Documentation for controlled datatable rowdetails PR grommet/grommet#…

…6571
aheintz · Jul 2, 2023 · 31dfe40 · 31dfe40
1 parent e22ac41
commit 31dfe40
Showing 1 changed file with 29 additions and 10 deletions.
diff --git a/src/screens/DataTable.js b/src/screens/DataTable.js
@@ -336,12 +336,31 @@ const DataTablePage = () => (
 
         <Property name="rowDetails">
           <Description>
-            When supplied, this function will be called with row data. Function
-            can return a React Element which will be rendered on expanding the
-            row.
+            Function rendering the row details or an object to manage row
+            details controlled.
           </Description>
           <PropertyValue type="function">
-            <Example>{`() => {}`}</Example>
+            <Example>{`(row) => { return <span>Row Details</span>}`}</Example>
+          </PropertyValue>
+          <PropertyValue type="object">
+            <Description>
+              You can enable controlled row details by providing an object with
+              the properties `render` (function rendering row details),
+              `expanded` (function returning `true` if the row should be
+              expanded.), `expandable` (function returning `true` if the row is
+              expandable), and `onClickExpand` (when supplied, this function
+              will be called when user clicks expand button. Clicked `row`
+              object is provided as argument).
+            </Description>
+            <Example>
+              {`
+{
+  render: (row) => {...} // return React Element
+  expanded: (row) => {...} // return boolean
+  expandable: (row) => {...} // return boolean
+  onClickExpand: (row) => {...} // void
+}`}
+            </Example>
           </PropertyValue>
         </Property>
 
@@ -804,7 +823,7 @@ const DataTablePage = () => (
   opacity: bool | string,
   repeat: no-repeat | repeat,
   size: cover | contain | string
-}            
+}
             `}
             </Example>
           </PropertyValue>
@@ -823,7 +842,7 @@ const DataTablePage = () => (
   size: "medium",
   style: "dashed",
   side: "all"
-}              
+}
               `}
             </Example>
           </PropertyValue>
@@ -882,7 +901,7 @@ const DataTablePage = () => (
   opacity: bool | string,
   repeat: no-repeat | repeat,
   size: cover | contain | string
-}            
+}
             `}
             </Example>
           </PropertyValue>
@@ -995,7 +1014,7 @@ const DataTablePage = () => (
   opacity: bool | string,
   repeat: no-repeat | repeat,
   size: cover | contain | string
-}            
+}
             `}
             </Example>
           </PropertyValue>
@@ -1025,7 +1044,7 @@ const DataTablePage = () => (
   opacity: bool | string,
   repeat: no-repeat | repeat,
   size: cover | contain | string
-}            
+}
             `}
             </Example>
           </PropertyValue>
@@ -1055,7 +1074,7 @@ const DataTablePage = () => (
   opacity: bool | string,
   repeat: no-repeat | repeat,
   size: cover | contain | string
-}            
+}
             `}
             </Example>
           </PropertyValue>