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"
},