Merge pull request #2093 from dxc-technology/jialecl-dataGrid-doc

Complete data grid documentation

Author: Mil4n0r

apps/website/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/website/screens/components/data-grid/DatagridPageLayout.tsx

@@ -6,8 +6,8 @@ import ComponentHeading from "@/common/ComponentHeading";
 const DataGridPageHeading = ({ children }: { children: React.ReactNode }) => {
   const tabs = [
     { label: "Code", path: "/components/data-grid" },
-    // { label: "Usage", path: "/components/data-grid/usage" },
-    // { label: "Specifications", path: "/components/data-grid/specifications" },
+    { label: "Usage", path: "/components/data-grid/usage" },
+    { label: "Specifications", path: "/components/data-grid/specifications" },
   ];
 
   return (

apps/website/screens/components/data-grid/code/DataGridCodePage.tsx

@@ -87,7 +87,7 @@ const sections = [
                   <b>summaryKey</b>: Value that will be rendered from the <TableCode>summaryRow</TableCode>
                 </li>
                 <li>
-                  <b>alignment</b>: St sets the alignment inside the cells.
+                  <b>alignment</b>: Sets the alignment inside the cells.
                 </li>
               </ul>
             </td>
@@ -174,6 +174,14 @@ const sections = [
             </td>
             <td>-</td>
           </tr>
+          <tr>
+            <td>onGridRowsChange</td>
+            <td>
+              <TableCode>{`(rows: GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]) => void`}</TableCode>
+            </td>
+            <td>Function called whenever a cell is edited.</td>
+            <td>-</td>
+          </tr>
         </tbody>
       </DxcTable>
     ),

apps/website/screens/components/data-grid/code/examples/basicUsage.ts

@@ -13,29 +13,29 @@ const code = `() => {
       label: "% Complete",
       resizable: true,
       draggable: true,
-      alignment: "center",
+      alignment: "right",
     },
   ];
   
   const rows = [
     {
-      id: 1,
+      id: "Row 1",
       complete: 46, 
     },
     {
-      id: 2,
+      id: "Row 2",
       complete: 51,
     },
     {
-      id: 3,
+      id: "Row 3",
       complete: 40,
     },
     {
-      id: 4,
+      id: "Row 4",
       complete: 10,
     },
-
   ];
+  
   return (
     <DxcInset space="2rem">
       <DxcDataGrid columns={columns} rows={rows} uniqueRowId="id" />

apps/website/screens/components/data-grid/code/examples/expandable.ts

@@ -13,32 +13,32 @@ const code = `() => {
       label: "% Complete",
       resizable: true,
       draggable: true,
-      alignment: "center",
+      alignment: "right",
     },
   ];
   
   const rows = [
     {
-      id: 1,
+      id: "Row 1",
       complete: 46,
       expandedContent: "Expanded content"
     },
     {
-      id: 2,
+      id: "Row 2",
       complete: 51,
       expandedContent: "Expanded content",
       expandedContentHeight: 100
     },
     {
-      id: 3,
+      id: "Row 3",
       complete: 40,
     },
     {
-      id: 4,
+      id: "Row 4",
       complete: 10,
     },
-
   ];
+  
   return (
     <DxcInset space="2rem">
       <DxcDataGrid columns={columns} rows={rows} expandable uniqueRowId="id" />

apps/website/screens/components/data-grid/code/examples/hierarchical.ts

@@ -10,7 +10,7 @@ const code = `() => {
     {
       key: "value",
       label: "Value",
-      alignment: "center",
+      alignment: "right",
       summaryKey: "total"
     },
   ];

apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.ts

@@ -11,7 +11,7 @@ const code = `() => {
     {
       key: "value",
       label: "Value",
-      alignment: "center",
+      alignment: "right",
       summaryKey: "total"
     },
   ];

apps/website/screens/components/data-grid/code/examples/selectable.ts

@@ -14,28 +14,27 @@ const code = `() => {
       label: "% Complete",
       resizable: true,
       draggable: true,
-      alignment: "center",
+      alignment: "right",
     },
   ];
   
   const rows = [
     {
-      id: 1,
+      id: "Row 1",
       complete: 46, 
     },
     {
-      id: 2,
+      id: "Row 2",
       complete: 51,
     },
     {
-      id: 3,
+      id: "Row 3",
       complete: 40,
     },
     {
-      id: 4,
+      id: "Row 4",
       complete: 10,
     },
-
   ];
   
   const [selectedRows, setSelectedRows] = useState(new Set());