material-react-table 0.12.1 → 0.12.2

package/dist/table/MRT_TableRoot.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { MaterialReactTableProps } from '../MaterialReactTable';
 export declare const MRT_TableRoot: <D extends Record<string, any> = {}>(props: MaterialReactTableProps<D>) => JSX.Element;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.12.1",
+  "version": "0.12.2",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",

package/src/table/MRT_TableRoot.tsx

@@ -153,87 +153,104 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     [],
   );
 
-  const displayColumns = useMemo(
-    () =>
-      [
-        showActionColumn &&
-          createDisplayColumn(table, {
-            Cell: ({ cell }) => (
-              <MRT_ToggleRowActionMenuButton
-                row={cell.row as any}
-                instance={instance}
-              />
-            ),
-            header: props.localization?.actions,
-            id: 'mrt-row-actions',
-            muiTableBodyCellProps: props.muiTableBodyCellProps,
-            muiTableHeadCellProps: props.muiTableHeadCellProps,
-            size: 70,
-          }),
-        showExpandColumn &&
-          createDisplayColumn(table, {
-            Cell: ({ cell }) => (
-              <MRT_ExpandButton row={cell.row as any} instance={instance} />
-            ),
-            Header: () =>
-              props.enableExpandAll ? (
-                <MRT_ExpandAllButton instance={instance} />
-              ) : null,
-            header: props.localization?.expand,
-            id: 'mrt-expand',
-            muiTableBodyCellProps: props.muiTableBodyCellProps,
-            muiTableHeadCellProps: props.muiTableHeadCellProps,
-            size: 50,
-          }),
-        props.enableRowSelection &&
-          createDisplayColumn(table, {
-            Cell: ({ cell }) => (
-              <MRT_SelectCheckbox row={cell.row as any} instance={instance} />
-            ),
-            Header: () =>
-              props.enableSelectAll ? (
-                <MRT_SelectCheckbox selectAll instance={instance} />
-              ) : null,
-            header: props.localization?.select,
-            id: 'mrt-select',
-            muiTableBodyCellProps: props.muiTableBodyCellProps,
-            muiTableHeadCellProps: props.muiTableHeadCellProps,
-            size: 50,
-          }),
-        props.enableRowNumbers &&
-          createDisplayColumn(table, {
-            Cell: ({ cell }) => cell.row.index + 1,
-            Header: () => props.localization?.rowNumber,
-            header: props.localization?.rowNumbers,
-            id: 'mrt-row-numbers',
-            muiTableBodyCellProps: props.muiTableBodyCellProps,
-            muiTableHeadCellProps: props.muiTableHeadCellProps,
-            size: 50,
-          }),
-      ].filter(Boolean),
-    [
-      props.editingMode,
-      props.enableEditing,
-      props.enableExpandAll,
-      props.enableExpanding,
-      props.enableGrouping,
-      props.enableRowActions,
-      props.enableRowNumbers,
-      props.enableRowSelection,
-      props.enableSelectAll,
-      props.localization,
-      table,
-    ],
-  );
+  const [leadingDisplayColumns, trailingDisplayColumns] = useMemo(() => {
+    const leadingDisplayColumns = [
+      showActionColumn &&
+        createDisplayColumn(table, {
+          Cell: ({ cell }) => (
+            <MRT_ToggleRowActionMenuButton
+              row={cell.row as any}
+              instance={instance}
+            />
+          ),
+          header: props.localization?.actions,
+          id: 'mrt-row-actions',
+          muiTableBodyCellProps: props.muiTableBodyCellProps,
+          muiTableHeadCellProps: props.muiTableHeadCellProps,
+          size: 70,
+        }),
+      showExpandColumn &&
+        createDisplayColumn(table, {
+          Cell: ({ cell }) => (
+            <MRT_ExpandButton row={cell.row as any} instance={instance} />
+          ),
+          Header: () =>
+            props.enableExpandAll ? (
+              <MRT_ExpandAllButton instance={instance} />
+            ) : null,
+          header: props.localization?.expand,
+          id: 'mrt-expand',
+          muiTableBodyCellProps: props.muiTableBodyCellProps,
+          muiTableHeadCellProps: props.muiTableHeadCellProps,
+          size: 50,
+        }),
+      props.enableRowSelection &&
+        createDisplayColumn(table, {
+          Cell: ({ cell }) => (
+            <MRT_SelectCheckbox row={cell.row as any} instance={instance} />
+          ),
+          Header: () =>
+            props.enableSelectAll ? (
+              <MRT_SelectCheckbox selectAll instance={instance} />
+            ) : null,
+          header: props.localization?.select,
+          id: 'mrt-select',
+          muiTableBodyCellProps: props.muiTableBodyCellProps,
+          muiTableHeadCellProps: props.muiTableHeadCellProps,
+          size: 50,
+        }),
+      props.enableRowNumbers &&
+        createDisplayColumn(table, {
+          Cell: ({ cell }) => cell.row.index + 1,
+          Header: () => props.localization?.rowNumber,
+          header: props.localization?.rowNumbers,
+          id: 'mrt-row-numbers',
+          muiTableBodyCellProps: props.muiTableBodyCellProps,
+          muiTableHeadCellProps: props.muiTableHeadCellProps,
+          size: 50,
+        }),
+    ].filter(Boolean) as MRT_ColumnDef<D>[];
+
+    const trailingDisplayColumns = [] as MRT_ColumnDef<D>[];
+
+    if (props.enableRowActions && props.positionActionsColumn === 'last') {
+      trailingDisplayColumns.push(
+        ...leadingDisplayColumns.splice(
+          leadingDisplayColumns.findIndex(
+            (col) => col.id === 'mrt-row-actions',
+          ),
+          1,
+        ),
+      );
+    }
+
+    return [leadingDisplayColumns, trailingDisplayColumns];
+  }, [
+    props.editingMode,
+    props.enableEditing,
+    props.enableExpandAll,
+    props.enableExpanding,
+    props.enableGrouping,
+    props.enableRowActions,
+    props.enableRowNumbers,
+    props.enableRowSelection,
+    props.enableSelectAll,
+    props.localization,
+    props.muiTableBodyCellProps,
+    props.muiTableHeadCellProps,
+    props.positionActionsColumn,
+    table,
+  ]);
 
   const columns = useMemo(
     () => [
-      ...displayColumns,
+      ...leadingDisplayColumns,
       ...props.columns.map((column) =>
         column.columns
           ? createGroup(table, column as any, currentFilterFns)
           : createDataColumn(table, column as any, currentFilterFns),
       ),
+      ...trailingDisplayColumns,
     ],
     [table, props.columns, currentFilterFns],
   );