Adjust datatable last column (#2307)

OKTA-790884 fix: fixed the column resizing fix: update active color of resize handle Merge branch 'main' into jk-datatable-last-column fix: add waitBeforeCapture to applitools Merge branch 'main' into jk-datatable-last-column Update packages/odyssey-react-mui/src/DataTable/DataTable.tsx Co-authored-by: Kevin Ghadyani <[email protected]> fix: remove unnecessary TEST comment fix: update const name Merge branch 'main' into jk-datatable-last-column fix: address linter error
okta · Aug 7, 2024 · 6b98b1d · 6b98b1d
1 parent c42ca4a
commit 6b98b1d
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 16 deletions.
diff --git a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
@@ -584,6 +584,16 @@ const DataTable = ({
     [columnIds],
   ) as string[];
 
+  const shouldDisplayRowActions = useMemo(
+    () =>
+      (hasRowReordering === true && onReorderRows) ||
+      rowActionButtons ||
+      rowActionMenuItems
+        ? true
+        : false,
+    [hasRowReordering, onReorderRows, rowActionButtons, rowActionMenuItems],
+  );
+
   const dataTable = useMaterialReactTable({
     columns: columns,
     data: data,
@@ -723,12 +733,7 @@ const DataTable = ({
     }),
 
     // Row actions
-    enableRowActions:
-      (hasRowReordering === true && onReorderRows) ||
-      rowActionButtons ||
-      rowActionMenuItems
-        ? true
-        : false,
+    enableRowActions: shouldDisplayRowActions,
     positionActionsColumn:
       "last" as MRT_TableOptions<DataTableRowData>["positionActionsColumn"],
     renderRowActions: ({ row }) => renderRowActions({ row }),
@@ -763,6 +768,10 @@ const DataTable = ({
     // Refs
     muiTableProps: {
       ref: tableContentRef,
+      className:
+        !shouldDisplayRowActions && hasColumnResizing
+          ? "ods-hide-spacer-column"
+          : "",
     },
 
     muiTableContainerProps: {

diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
@@ -267,6 +267,21 @@ const TableContent = ({
     [innerWidthStyle, emptyState],
   );
 
+  const shouldDisplayRowActions = useMemo(
+    () =>
+      (hasRowReordering === true && onReorderRows) ||
+      tableOptions.rowActionButtons ||
+      tableOptions.rowActionMenuItems
+        ? true
+        : false,
+    [
+      hasRowReordering,
+      onReorderRows,
+      tableOptions.rowActionButtons,
+      tableOptions.rowActionMenuItems,
+    ],
+  );
+
   const dataTable = useMaterialReactTable({
     data: !isEmpty && !isNoResults ? data : [],
     columns,
@@ -329,6 +344,10 @@ const TableContent = ({
     },
     muiTableProps: {
       ref: tableContentRef,
+      className:
+        !shouldDisplayRowActions && tableOptions.hasColumnResizing
+          ? "ods-hide-spacer-column"
+          : "",
     },
     muiTableContainerProps: {
       ref: tableInnerContainerRef,
@@ -340,12 +359,7 @@ const TableContent = ({
     defaultColumn: {
       Cell: defaultCell,
     },
-    enableRowActions:
-      (hasRowReordering === true && onReorderRows) ||
-      tableOptions.rowActionButtons ||
-      tableOptions.rowActionMenuItems
-        ? true
-        : false,
+    enableRowActions: shouldDisplayRowActions,
     renderRowActions: ({ row }) => renderRowActions({ row }),
     enableRowOrdering: hasRowReordering && Boolean(onReorderRows),
     enableRowDragging: hasRowReordering && Boolean(onReorderRows),

diff --git a/packages/odyssey-react-mui/src/theme/components.tsx b/packages/odyssey-react-mui/src/theme/components.tsx
@@ -2566,10 +2566,6 @@ export const components = ({
             borderLeft: `none !important`,
           },
 
-          ["&::after"]: {
-            background: "transparent !important",
-          },
-
           [`.${tableBodyClasses.root} &.${tableCellClasses.root}`]: {
             borderRight: `none !important`,
           },
@@ -2633,7 +2629,25 @@ export const components = ({
               flexGrow: 0,
               width: odysseyTokens.Spacing2,
             },
+          [`.ods-hide-spacer-column .${tableHeadClasses.root} &:last-of-type, .ods-hide-spacer-column .${tableBodyClasses.root} &:last-of-type`]:
+            {
+              display: "none",
+            },
+
+          [`.ods-hide-spacer-column .${tableHeadClasses.root} &:nth-last-of-type(2), .ods-hide-spacer-column .${tableBodyClasses.root} &:nth-last-of-type(2)`]:
+            {
+              borderTopRightRadius: odysseyTokens.Spacing2,
+              borderBottomRightRadius: odysseyTokens.Spacing2,
+              flexGrow: 1,
+
+              [`& .Mui-TableHeadCell-ResizeHandle-Wrapper`]: {
+                display: "none",
+              },
+            },
 
+          [`&::after`]: {
+            display: "none",
+          },
           ...(ownerState.variant === "number" && {
             textAlign: "end",
             fontFeatureSettings: '"lnum", "tnum"',
@@ -2672,6 +2686,11 @@ export const components = ({
 
           [`& .Mui-TableHeadCell-ResizeHandle-Wrapper`]: {
             marginInlineEnd: `-${odysseyTokens.Spacing3}`,
+
+            [`&:active .${dividerClasses.vertical}`]: {
+              borderColor: odysseyTokens.HueNeutral400,
+              opacity: 1,
+            },
           },
 
           [`& .Mui-TableHeadCell-Content-Wrapper`]: {