Data Grid component

packages/lib/package.json

@@ -39,6 +39,7 @@
     "@radix-ui/react-tooltip": "^1.1.0",
     "color": "^4.2.3",
     "dayjs": "^1.11.11",
+    "react-data-grid": "^7.0.0-beta.44",
     "slugify": "^1.6.6"
   },
   "devDependencies": {

packages/lib/src/data-grid/DataGrid.stories.tsx

@@ -0,0 +1,268 @@
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import DxcDataGrid from "./DataGrid";
+import DxcContainer from "../container/Container";
+import { GridColumn, HierarchyGridRow } from "./types";
+import { useState } from "react";
+
+export default {
+  title: "Datagrid",
+  component: DxcDataGrid,
+};
+
+const columns: GridColumn[] = [
+  {
+    key: "id",
+    name: "ID",
+    resizable: true,
+    sortable: true,
+    draggable: false,
+    alignment: "left",
+  },
+  {
+    key: "task",
+    name: "Title",
+    resizable: true,
+    sortable: true,
+    draggable: true,
+    textEditable: true,
+    alignment: "left",
+  },
+  {
+    key: "complete",
+    name: " % Complete",
+    resizable: true,
+    sortable: true,
+    draggable: true,
+    alignment: "right",
+    summaryKeyToRender: "label",
+  },
+  {
+    key: "priority",
+    name: "Priority",
+    resizable: true,
+    draggable: true,
+    alignment: "center",
+    summaryKeyToRender: "total",
+  },
+];
+
+const expandableRows = [
+  {
+    id: 1,
+    task: "Task 1",
+    complete: 46,
+    priority: "High",
+    issueType: "Bug",
+    expandedContent: <DxcContainer> Custom content 1</DxcContainer>,
+    expandedContentHeight: 470,
+  },
+  {
+    id: 2,
+    task: "Task 2",
+    complete: 51,
+    priority: "High",
+    issueType: "Epic",
+    expandedContent: <DxcContainer> Custom content 1</DxcContainer>,
+  },
+  {
+    id: 3,
+    task: "Task 3",
+    complete: 40,
+    priority: "High",
+    issueType: "Improvement",
+    expandedContent: <DxcContainer> Custom content 1</DxcContainer>,
+  },
+  {
+    id: 4,
+    task: "Task 4",
+    complete: 10,
+    priority: "High",
+    issueType: "Improvement",
+    expandedContent: <DxcContainer> Custom content 1</DxcContainer>,
+  },
+  {
+    id: 5,
+    task: "Task 5",
+    complete: 68,
+    priority: "High",
+    issueType: "Improvement",
+    expandedContent: <DxcContainer> Custom content 1</DxcContainer>,
+  },
+  {
+    id: 6,
+    task: "Task 6",
+    complete: 37,
+    priority: "High",
+    issueType: "Improvement",
+    expandedContent: <DxcContainer> Custom content 1</DxcContainer>,
+  },
+  {
+    id: 7,
+    task: "Task 7",
+    complete: 73,
+    priority: "Medium",
+    issueType: "Story",
+    expandedContent: <DxcContainer> Custom content 1</DxcContainer>,
+  },
+  {
+    id: 8,
+    task: "Task 8",
+    complete: 27,
+    priority: "Medium",
+    issueType: "Story",
+    expandedContent: <DxcContainer> Custom content 1</DxcContainer>,
+  },
+  {
+    id: 9,
+    task: "Task 9",
+    complete: 36,
+    priority: "Critical",
+    issueType: "Epic",
+    expandedContent: <DxcContainer> Custom content 1</DxcContainer>,
+  },
+];
+
+const childcolumns: GridColumn[] = [
+  {
+    key: "name",
+    name: "Name",
+    resizable: true,
+    sortable: true,
+    alignment: "center",
+  },
+  {
+    key: "value",
+    name: "Value",
+    resizable: true,
+    sortable: true,
+    draggable: true,
+    textEditable: true,
+    alignment: "right",
+  },
+];
+
+const childRows: HierarchyGridRow[] = [
+  {
+    name: "Root Node 1",
+    value: "1",
+    id: "a",
+    childRows: [
+      {
+        name: "Child Node 1.1",
+        value: "1.1",
+        id: "aa",
+        childRows: [
+          {
+            name: "Grandchild Node 1.1.1",
+            value: "1.1.1",
+            id: "aaa",
+          },
+          {
+            name: "Grandchild Node 1.1.2",
+            value: "1.1.2",
+            id: "aab",
+          },
+        ],
+      },
+      {
+        name: "Child Node 1.2",
+        value: "1.2",
+        id: "ab",
+      },
+    ],
+  },
+  {
+    name: "Root Node 2",
+    value: "2",
+    id: "b",
+    childRows: [
+      {
+        name: "Child Node 2.1",
+        value: "2.1",
+        id: "ba",
+        childRows: [
+          {
+            name: "Grandchild Node 2.1.1",
+            value: "2.1.1",
+            id: "baa",
+          },
+        ],
+      },
+      {
+        name: "Child Node 2.2",
+        value: "2.2",
+        id: "bb",
+      },
+      {
+        name: "Child Node 2.3",
+        value: "2.3",
+        id: "bc",
+      },
+    ],
+  },
+];
+
+export const Chromatic = () => {
+  const [selectedRows, setSelectedRows] = useState((): Set<number | string> => new Set());
+  const [selectedChildRows, setSelectedChildRows] = useState((): Set<number | string> => new Set());
+  return (
+    <>
+      <ExampleContainer>
+        <Title title="Default" theme="light" level={4} />
+        <DxcDataGrid columns={columns} rows={expandableRows} uniqueRowId="id" />
+      </ExampleContainer>
+      <ExampleContainer>
+        <Title title="Expandable" theme="light" level={4} />
+        <DxcDataGrid columns={columns} rows={expandableRows} uniqueRowId="id" expandable />
+      </ExampleContainer>
+      <ExampleContainer>
+        <Title title="Selectable" theme="light" level={4} />
+        <DxcDataGrid
+          columns={columns}
+          rows={expandableRows}
+          uniqueRowId="task"
+          selectable
+          selectedRows={selectedRows}
+          onSelectRows={setSelectedRows}
+        />
+      </ExampleContainer>
+      <ExampleContainer>
+        <Title title="Selectable & expandable" theme="light" level={4} />
+        <DxcDataGrid
+          columns={columns}
+          rows={expandableRows}
+          uniqueRowId="task"
+          expandable
+          selectable
+          selectedRows={selectedRows}
+          onSelectRows={setSelectedRows}
+        />
+      </ExampleContainer>
+      <ExampleContainer>
+        <Title title="DataGrid with children" theme="light" level={4} />
+        <DxcDataGrid columns={childcolumns} rows={childRows} uniqueRowId="id" />
+      </ExampleContainer>
+      <ExampleContainer>
+        <Title title="DataGrid with children" theme="light" level={4} />
+        <DxcDataGrid
+          columns={childcolumns}
+          rows={childRows}
+          uniqueRowId="value"
+          selectable
+          selectedRows={selectedChildRows}
+          onSelectRows={setSelectedChildRows}
+        />
+      </ExampleContainer>
+      <ExampleContainer>
+        <Title title="Summary row" theme="light" level={4} />
+        <DxcDataGrid
+          columns={columns}
+          rows={expandableRows}
+          summaryRow={{ label: "Total", total: 100 }}
+          uniqueRowId="id"
+        />
+      </ExampleContainer>
+    </>
+  );
+};