fix table design (#345)

lib/components/Table/index.js

@@ -3,16 +3,27 @@ import {
   useMaterialReactTable,
   MaterialReactTable
 } from "material-react-table";
-import { merge } from "lodash";
+import { merge, map } from "lodash";
 import muiStyleOverrides from "./muiStyleOverrides";
 import getExpandColumnConfig from "./getExpandColumnConfig";
 import { PropTypes } from "prop-types";
 
-const Table = ({ data, columns, ...tableConfig }) => {
+const Table = ({ data, columns: columnOverrides, ...tableConfig }) => {
   const otherConfig = {};
 
   const columnVisibility = {};
 
+  const columns = useMemo(() => {
+    return tableConfig?.enableSorting
+      ? columnOverrides
+      : map(columnOverrides, (col) => {
+          return {
+            ...col,
+            enableSorting: false
+          };
+        });
+  }, [columnOverrides, tableConfig?.enableSorting]);
+
   const firstCol = useMemo(() => columns[0], [columns]);
 
   if (tableConfig.enableExpanding) {
@@ -33,6 +44,7 @@ const Table = ({ data, columns, ...tableConfig }) => {
     ...tableConfig,
     columns,
     data,
+    enableExpanding: true,
     initialState: merge(
       { density: "compact", columnVisibility },
       tableConfig.initialState || {}

lib/components/Table/muiStyleOverrides.js

@@ -1,25 +1,39 @@
+import React from "react";
+import Icon from "../Icon";
+import Box from "../Box";
+
 const muiStyleOverrides = {
-  muiBottomToolbarProps: { sx: { boxShadow: "none" } },
+  muiExpandButtonProps: ({ row }) => {
+    return {
+      children: row?.getIsExpanded() ? (
+        <Box p="s">
+          <Icon icon={["fas", "chevron-down"]} size="xs" />
+        </Box>
+      ) : (
+        <Box p="s">
+          <Icon icon={["fal", "chevron-right"]} size="xs" />
+        </Box>
+      )
+    };
+  },
+  muiBottomToolbarProps: {
+    sx: {
+      display: "none" // Remove bottom toolbar
+    }
+  },
   muiTableHeadProps: {
     sx: {
-      height: "32px",
-      borderRadius: "5px",
+      backgroundColor: "transparent", // No background for header
       "& .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"
+        color: "#6b7280", // Subtle text color (gray tone)
+        fontWeight: "500", // Slightly bold for clarity
+        padding: "0 0 6px 0", // Consistent padding
+        borderBottom: "1px solid #e0e0e0", // Subtle header-row separation
+        textAlign: "left", // Ensure text alignment is consistent
+        lineHeight: "1.5" // Enhance readability
       },
-      "& th:nth-last-child(1)": {
-        borderRadius: "0px 5px 5px 0px"
+      "& button": {
+        display: "none" // Explicitly hide any buttons in the header
       }
     }
   },
@@ -37,7 +51,6 @@ const muiStyleOverrides = {
         borderBottomStyle = "none";
       } else {
         const lastSubRowOfParent = subRows[subRows.length - 1];
-
         borderBottomStyle = lastSubRowOfParent.id === row.id ? "solid" : "none";
       }
     }
@@ -54,10 +67,34 @@ const muiStyleOverrides = {
     sx: {
       borderCollapse: "separate !important",
       tableLayout: "fixed",
-
-      fontSize: "12px",
+      fontFamily: "inherit",
+      fontSize: "inherit",
+      fontWeight: "normal",
+      "& th, .MuiTableCell-root": {
+        fontWeight: "normal",
+        fontSize: "inherit",
+        fontFamily: "inherit"
+      },
+      "& td": {
+        fontFamily: "inherit",
+        fontSize: "inherit",
+        fontWeight: "normal"
+      },
       "& td, .MuiTableCell-root": {
-        fontSize: "12px"
+        padding: "6px 0 6px 0",
+        marginLeft: "0"
+      }
+    }
+  },
+  muiTableBodyCellProps: {
+    sx: {
+      fontWeight: "normal", // Remove bold when expanded
+      // Default row cell style
+      "&.MuiTableRow-root": {
+        fontWeight: "normal" // Ensure the font is not bold by default
+      },
+      "&.expanded": {
+        fontWeight: "normal" // Remove bold when expanded
       }
     }
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.44",
+  "version": "3.2.45",
   "engines": {
     "node": "20.12.2"
   },