diff --git a/lib/components/Table/index.js b/lib/components/Table/index.js index 92dde08e..fd9ee39f 100644 --- a/lib/components/Table/index.js +++ b/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 || {} diff --git a/lib/components/Table/muiStyleOverrides.js b/lib/components/Table/muiStyleOverrides.js index 623bd61e..e3ca9a08 100644 --- a/lib/components/Table/muiStyleOverrides.js +++ b/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() ? ( + + + + ) : ( + + + + ) + }; + }, + 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 } } }, diff --git a/package-lock.json b/package-lock.json index 5986dc66..c81e27f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "orcs-design-system", - "version": "3.2.44", + "version": "3.2.45", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "orcs-design-system", - "version": "3.2.44", + "version": "3.2.45", "dependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", diff --git a/package.json b/package.json index 315fadb7..7372fbf4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "orcs-design-system", - "version": "3.2.44", + "version": "3.2.45", "engines": { "node": "20.12.2" },