added styled table

lib/components/Table/Table.stories.js

@@ -0,0 +1,170 @@
+import React, { useMemo } from "react";
+import Table from ".";
+import Card from "../Card/index";
+import Box from "../Box";
+import Badge from "../Badge";
+
+export default {
+  title: "Components/Table",
+  component: Table
+};
+
+export const Default = () => {
+  const columns = useMemo(
+    () => [
+      {
+        accessorKey: "name",
+        header: "Name",
+        enableHiding: false
+      },
+      {
+        accessorFn: (originalRow) => parseInt(originalRow.age),
+        id: "age",
+        header: "Age",
+        Header: <i>Age</i>,
+        Cell: ({ cell }) => <i>{cell.getValue().toLocaleString()}</i>
+      }
+    ],
+    []
+  );
+
+  const data = useMemo(
+    () => [
+      { name: "John", age: 30 },
+      { name: "Sara", age: 25 }
+    ],
+    []
+  );
+
+  return (
+    <Card>
+      <Table columns={columns} data={data} />
+    </Card>
+  );
+};
+
+const types = {
+  strat_outcome: { variant: "primaryDark", label: "Strategic Outcome" },
+  okr: { variant: "primary", label: "Objective Key & result" },
+  epic: { variant: "secondary", label: "Epic" },
+  work_item: { variant: "warning", label: "Work Item" }
+};
+
+export const NestedTreeStructure = () => {
+  const columns = useMemo(
+    () => [
+      {
+        accessorKey: "name",
+        id: "name",
+        header: "Strategy"
+      },
+      {
+        accessorKey: "workForce",
+        id: "workForce",
+        header: "Work force"
+      },
+      {
+        accessorKey: "type",
+        id: "type",
+        header: "Type",
+        Cell: ({ cell }) => {
+          const type = types[cell.getValue()];
+
+          return (
+            <Box>
+              <Badge variant={type?.variant}>{type?.label}</Badge>
+            </Box>
+          );
+        }
+      }
+    ],
+    []
+  );
+
+  const data = useMemo(
+    () => [
+      {
+        name: "Never gonna give you up",
+        workForce: 391,
+        type: "strat_outcome",
+        children: [
+          {
+            name: "Never gonna let you down",
+            workForce: 25,
+            type: "okr",
+            children: [
+              {
+                name: "TPP-441 Never gonna run around and desert you",
+                workForce: 30,
+                type: "epic",
+                children: [
+                  {
+                    name: "TPP-684 Never gonna make you cry",
+                    workForce: 25,
+                    type: "work_item"
+                  },
+                  {
+                    name: "TPP-685 Never gonna say goodbye",
+                    workForce: 25,
+                    type: "work_item"
+                  },
+                  {
+                    name: "TPP-685 Never gonna tell a lie and hurt you",
+                    workForce: 25,
+                    type: "work_item"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        name: "Grow customer base by 5 mill",
+        workForce: 391,
+        type: "strat_outcome",
+        children: [
+          {
+            name: "Launch our revolutionary HPLSF module",
+            workForce: 25,
+            type: "okr",
+            children: [
+              {
+                name: "TPP-441 New space flight model test",
+                workForce: 30,
+                type: "epic",
+                children: [
+                  {
+                    name: "TPP-684 Infra benchmarking",
+                    workForce: 25,
+                    type: "work_item"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ],
+    []
+  );
+
+  return (
+    <Card>
+      <Table
+        columns={columns}
+        data={data}
+        enableExpanding
+        enableExpandAll
+        getSubRows={(row) => row.children}
+        muiTableBodyCellProps={({ row }) => ({
+          sx: () => ({
+            color: row.original.type === "work_item" ? "grey" : "",
+            fontWeight:
+              row.depth === 0 ? 600 : row.depth === 1 ? 500 : undefined
+          })
+        })}
+      />
+    </Card>
+  );
+};

lib/components/Table/index.js

@@ -0,0 +1,133 @@
+import React from "react";
+import {
+  useMaterialReactTable,
+  MaterialReactTable,
+  MRT_ExpandAllButton
+} from "material-react-table";
+import { get } from "lodash";
+import { Stack } from "@mui/material";
+import Box from "../Box";
+
+const muiStyleOverrides = {
+  muiBottomToolbarProps: { sx: { boxShadow: "none" } },
+  muiTableHeadProps: {
+    sx: {
+      height: "32px",
+      borderRadius: "5px",
+      "& .MuiTableCell-root": {
+        borderBottom: "none",
+        paddingTop: 0,
+        paddingBottom: 0,
+        verticalAlign: "middle"
+      },
+      "& .MuiTableRow-root": {
+        borderRadius: "5px",
+        background: "#F2F5F5",
+        boxShadow: "none"
+      },
+      "& th:nth-child(1)": {
+        borderRadius: "5px 0px 0px 5px"
+      },
+      "& th:nth-last-child(1)": {
+        borderRadius: "0px 5px 5px 0px"
+      }
+    }
+  },
+  muiTableBodyRowProps: ({ row, table }) => {
+    let borderBottomStyle = "solid";
+
+    if (row.getIsExpanded()) {
+      borderBottomStyle = "dashed";
+    }
+
+    if (!row.originalSubRows && table.options.enableExpanding) {
+      const lastSubRowOfParent =
+        row.getParentRow().subRows[row.getParentRow().subRows.length - 1];
+
+      borderBottomStyle = lastSubRowOfParent.id === row.id ? "solid" : "none";
+    }
+
+    return {
+      sx: {
+        "&:not(.Mui-TableBodyCell-DetailPanel) .MuiTableCell-root": {
+          borderBottomStyle
+        }
+      }
+    };
+  },
+  muiTableProps: {
+    sx: {
+      borderCollapse: "separate !important",
+      tableLayout: "fixed",
+
+      fontSize: "12px",
+      "& td, .MuiTableCell-root": {
+        fontSize: "12px"
+      }
+    }
+  },
+  muiTablePaperProps: {
+    sx: { boxShadow: "none" }
+  }
+};
+
+const Table = ({ data, columns, ...tableConfig }) => {
+  const otherConfig = {};
+
+  if (tableConfig.enableExpanding) {
+    const firstCol = columns[0];
+
+    otherConfig.displayColumnDefOptions = {
+      "mrt-row-expand": {
+        Header: (props) => {
+          const { table } = props;
+          let headerMarkup = firstCol.header;
+
+          if (React.isValidElement(firstCol.Header)) {
+            headerMarkup = firstCol.Header;
+          }
+
+          if (typeof firstCol.Header === "function") {
+            headerMarkup = <firstCol.Header />;
+          }
+
+          return (
+            <Stack direction="row" alignItems="center">
+              {tableConfig.enableExpandAll && (
+                <MRT_ExpandAllButton table={table} />
+              )}
+
+              <Box>{headerMarkup}</Box>
+            </Stack>
+          );
+        },
+        GroupedCell: (props) => {
+          const { row } = props;
+
+          if (firstCol.Cell) return <firstCol.Cell {...props} />;
+
+          return get(row.original, firstCol.accessorKey);
+        },
+        enableResizing: true,
+        size: 200
+      }
+    };
+  }
+
+  const finalColumns = tableConfig.enableExpanding
+    ? [...columns.slice(1, columns.length)]
+    : columns;
+
+  const table = useMaterialReactTable({
+    ...muiStyleOverrides,
+    initialState: { density: "compact" },
+    ...otherConfig,
+    ...tableConfig,
+    columns: finalColumns,
+    data
+  });
+
+  return <MaterialReactTable table={table} />;
+};
+
+export default Table;