fix: fixed the column resizing

okta · Jul 25, 2024 · 6ee0a40 · 6ee0a40
1 parent 84f3af3
commit 6ee0a40
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 12 deletions.
diff --git a/packages/odyssey-react-mui/src/DataTable/DataTable.tsx b/packages/odyssey-react-mui/src/DataTable/DataTable.tsx
@@ -639,6 +639,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,
@@ -706,12 +716,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 }),
@@ -746,6 +751,8 @@ const DataTable = ({
     // Refs
     muiTableProps: {
       ref: tableContentRef,
+      className:
+        !shouldDisplayRowActions && hasColumnResizing ? "remove-last-row" : "",
     },
 
     muiTableContainerProps: {

diff --git a/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx b/packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
@@ -266,6 +266,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,
@@ -289,6 +304,10 @@ const TableContent = ({
     >,
     muiTableProps: {
       ref: tableContentRef,
+      className:
+        !shouldDisplayRowActions && tableOptions.hasColumnResizing
+          ? "remove-last-row"
+          : "",
     },
     muiTableContainerProps: {
       ref: tableInnerContainerRef,
@@ -300,12 +319,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
@@ -2621,6 +2621,23 @@ export const components = ({
               width: odysseyTokens.Spacing2,
             },
 
+          // TEST OF RESIZING
+          [`.remove-last-row .${tableHeadClasses.root} &:last-of-type, .remove-last-row .${tableBodyClasses.root} &:last-of-type`]:
+            {
+              display: "none",
+            },
+
+          [`.remove-last-row .${tableHeadClasses.root} &:nth-last-of-type(2), .remove-last-row .${tableBodyClasses.root} &:nth-last-of-type(2)`]:
+            {
+              borderTopRightRadius: odysseyTokens.Spacing2,
+              borderBottomRightRadius: odysseyTokens.Spacing2,
+              flexGrow: 1,
+
+              [`& .Mui-TableHeadCell-ResizeHandle-Wrapper`]: {
+                display: "none",
+              },
+            },
+
           [`&::after`]: {
             display: "none",
           },