material-react-table 0.8.11 → 0.8.14

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,33 +1,65 @@
-import React, { FC } from 'react';
-import { FormControlLabel, MenuItem, Switch } from '@mui/material';
-import type { MRT_Column, MRT_TableInstance } from '..';
+import React, { FC, Ref } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
+import { Box, FormControlLabel, MenuItem, Switch } from '@mui/material';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+import type { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
+  allColumns: MRT_Column[];
   column: MRT_Column;
   isSubMenu?: boolean;
   tableInstance: MRT_TableInstance;
 }
 
 export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
+  allColumns,
   column,
   isSubMenu,
   tableInstance,
 }) => {
   const {
     getState,
-    options: { onToggleColumnVisibility },
+    options: { enableColumnOrdering, onToggleColumnVisibility },
+    setColumnOrder,
   } = tableInstance;
 
-  const { columnVisibility } = getState();
+  const { columnOrder, columnVisibility } = getState();
+
+  const { columnDef, columnDefType } = column;
+
+  const reorder = (movingColumn: MRT_Column, receivingColumn: MRT_Column) => {
+    if (movingColumn.getCanPin()) {
+      movingColumn.pin(receivingColumn.getIsPinned());
+    }
+    columnOrder.splice(
+      columnOrder.indexOf(receivingColumn.id),
+      0,
+      columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0],
+    );
+    setColumnOrder([...columnOrder]);
+  };
+
+  const [, dropRef] = useDrop({
+    accept: 'column',
+    drop: (movingColumn: MRT_Column) => reorder(movingColumn, column),
+  });
+
+  const [, dragRef, previewRef] = useDrag({
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+    item: () => column,
+    type: 'column',
+  });
 
   const switchChecked =
-    (column.columnDefType !== 'group' && column.getIsVisible()) ||
-    (column.columnDefType === 'group' &&
+    (columnDefType !== 'group' && column.getIsVisible()) ||
+    (columnDefType === 'group' &&
       column.getLeafColumns().some((col) => col.getIsVisible()));
 
   const handleToggleColumnHidden = (column: MRT_Column) => {
-    if (column.columnDefType === 'group') {
+    if (columnDefType === 'group') {
       column?.columns?.forEach?.((childColumn: MRT_Column) => {
         childColumn.toggleVisibility(!switchChecked);
       });
@@ -44,6 +76,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
   return (
     <>
       <MenuItem
+        ref={columnDefType === 'data' ? dropRef : undefined}
         sx={{
           alignItems: 'center',
           justifyContent: 'flex-start',
@@ -52,23 +85,43 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           py: '6px',
         }}
       >
-        {!isSubMenu && column.getCanPin() && (
-          <MRT_ColumnPinningButtons
-            column={column}
-            tableInstance={tableInstance}
+        <Box ref={previewRef} sx={{ display: 'flex', flexWrap: 'nowrap' }}>
+          {columnDefType !== 'group' &&
+            enableColumnOrdering &&
+            columnDef.enableColumnOrdering !== false &&
+            !allColumns.some((col) => col.columnDefType === 'group') && (
+              <MRT_GrabHandleButton
+                ref={dragRef as Ref<HTMLButtonElement>}
+                tableInstance={tableInstance}
+              />
+            )}
+          {!isSubMenu && column.getCanPin() && (
+            <MRT_ColumnPinningButtons
+              column={column}
+              tableInstance={tableInstance}
+            />
+          )}
+          <FormControlLabel
+            componentsProps={{
+              typography: {
+                sx: {
+                  mb: 0,
+                  opacity: columnDefType !== 'display' ? 1 : 0.5,
+                },
+              },
+            }}
+            checked={switchChecked}
+            control={<Switch />}
+            disabled={(isSubMenu && switchChecked) || !column.getCanHide()}
+            label={columnDef.header}
+            onChange={() => handleToggleColumnHidden(column)}
+            sx={{ ml: '4px' }}
           />
-        )}
-        <FormControlLabel
-          componentsProps={{ typography: { sx: { marginBottom: 0 } } }}
-          checked={switchChecked}
-          control={<Switch />}
-          disabled={(isSubMenu && switchChecked) || !column.getCanHide()}
-          label={column.columnDef.header}
-          onChange={() => handleToggleColumnHidden(column)}
-        />
+        </Box>
       </MenuItem>
       {column.columns?.map((c: MRT_Column, i) => (
         <MRT_ShowHideColumnsMenuItems
+          allColumns={allColumns}
           key={`${i}-${c.id}`}
           column={c}
           isSubMenu={isSubMenu}

package/src/table/MRT_TableRoot.tsx

@@ -1,9 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import {
   FilterFn,
-  PaginationState,
   createTable,
-  functionalUpdate,
   getExpandedRowModel,
   getPaginationRowModel,
   useTableInstance,
@@ -13,6 +11,7 @@ import {
   getFilteredRowModel,
   ReactTableGenerics,
   getFacetedRowModel,
+  TableState,
 } from '@tanstack/react-table';
 import {
   MRT_Cell,
@@ -48,9 +47,30 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     [props.idPrefix],
   );
 
+  const showActionColumn =
+    props.enableRowActions ||
+    (props.enableEditing && props.editingMode === 'row');
+
+  const showExpandColumn = props.enableExpanding || props.enableGrouping;
+
   const initialState: Partial<MRT_TableState<D>> = useMemo(() => {
+    const initState = props.initialState ?? {};
+
+    initState.columnOrder =
+      initState?.columnOrder ?? props.enableColumnOrdering
+        ? ([
+            showActionColumn && 'mrt-row-actions',
+            showExpandColumn && 'mrt-expand',
+            props.enableRowSelection && 'mrt-select',
+            props.enableRowNumbers && 'mrt-row-numbers',
+            ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map(
+              (c) => c.id,
+            ),
+          ].filter(Boolean) as string[])
+        : [];
+
     if (!props.enablePersistentState || !props.idPrefix) {
-      return props.initialState;
+      return initState;
     }
     if (typeof window === 'undefined') {
       if (process.env.NODE_ENV !== 'production') {
@@ -58,7 +78,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
           'The MRT Persistent Table State feature is not supported if using SSR, but you can wrap your <MaterialReactTable /> in a MUI <NoSsr> tags to let it work',
         );
       }
-      return props.initialState;
+      return initState;
     }
     const storedState =
       props.persistentStateMode === 'localStorage'
@@ -69,10 +89,10 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     if (storedState) {
       const parsedState = JSON.parse(storedState);
       if (parsedState) {
-        return { ...props.initialState, ...parsedState };
+        return { ...initState, ...parsedState };
       }
     }
-    return props.initialState;
+    return initState;
   }, []);
 
   const [currentEditingCell, setCurrentEditingCell] =
@@ -92,11 +112,6 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   const [showGlobalFilter, setShowGlobalFilter] = useState(
     initialState?.showGlobalFilter ?? false,
   );
-  const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: initialState?.pagination?.pageIndex ?? 0,
-    pageSize: initialState?.pagination?.pageSize ?? 10,
-    pageCount: initialState?.pagination?.pageCount,
-  });
 
   const [currentFilterFns, setCurrentFilterFns] = useState<{
     [key: string]: MRT_FilterFn;
@@ -118,13 +133,29 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     MRT_FILTER_OPTION | FilterFn<ReactTableGenerics> | string | number | symbol
   >(props.globalFilterFn ?? MRT_FILTER_OPTION.FUZZY);
 
-  const table = useMemo(() => createTable(), []);
+  const table = useMemo(
+    () =>
+      createTable().setOptions({
+        //@ts-ignore
+        filterFns: defaultFilterFNs,
+        getCoreRowModel: getCoreRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+        getFacetedRowModel: getFacetedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getGroupedRowModel: getGroupedRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getSubRows: (row) => (row as MRT_Row)?.subRows,
+        idPrefix,
+        initialState,
+      }),
+    [],
+  );
 
   const displayColumns = useMemo(
     () =>
       [
-        (props.enableRowActions ||
-          (props.enableEditing && props.editingMode === 'row')) &&
+        showActionColumn &&
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
               <MRT_ToggleRowActionMenuButton
@@ -136,7 +167,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
             id: 'mrt-row-actions',
             size: 60,
           }),
-        (props.enableExpanding || props.enableGrouping) &&
+        showExpandColumn &&
           createDisplayColumn(table, {
             Cell: ({ cell }) => (
               <MRT_ExpandButton
@@ -222,50 +253,27 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     [props.data, props.state?.isLoading, props.state?.showSkeletons],
   );
 
-  const [columnOrder, setColumnOrder] = useState<string[]>(() =>
-    initialState?.columnOrder ?? props.enableColumnOrdering
-      ? getAllLeafColumnDefs(columns as MRT_ColumnDef[]).map((c) => c.id)
-      : [],
-  );
-
   //@ts-ignore
   const tableInstance = {
     //@ts-ignore
     ...useTableInstance(table, {
-      filterFns: defaultFilterFNs,
-      getCoreRowModel: getCoreRowModel(),
-      getExpandedRowModel: getExpandedRowModel(),
-      getFacetedRowModel: getFacetedRowModel(),
-      getFilteredRowModel: getFilteredRowModel(),
-      getGroupedRowModel: getGroupedRowModel(),
-      getPaginationRowModel: getPaginationRowModel(),
-      getSortedRowModel: getSortedRowModel(),
-      getSubRows: (row) => (row as MRT_Row)?.subRows,
-      //@ts-ignore
-      globalFilterFn: currentGlobalFilterFn,
-      onColumnOrderChange: setColumnOrder,
-      onPaginationChange: (updater: any) =>
-        setPagination((old) => functionalUpdate(updater, old)),
       ...props,
       //@ts-ignore
       columns,
       data,
-      idPrefix,
-      initialState,
+      //@ts-ignore
+      globalFilterFn: currentGlobalFilterFn,
       state: {
-        columnOrder,
         currentEditingCell,
         currentEditingRow,
         currentFilterFns,
         currentGlobalFilterFn,
         isDensePadding,
         isFullScreen,
-        //@ts-ignore
-        pagination,
         showFilters,
         showGlobalFilter,
         ...props.state,
-      },
+      } as TableState,
     }),
     setCurrentEditingCell,
     setCurrentEditingRow,

package/dist/head/MRT_TableHeadCellGrabHandle.d.ts

@@ -1,9 +0,0 @@
-import { FC, Ref } from 'react';
-import { MRT_Header, MRT_TableInstance } from '..';
-interface Props {
-    header: MRT_Header;
-    ref: Ref<HTMLButtonElement>;
-    tableInstance: MRT_TableInstance;
-}
-export declare const MRT_TableHeadCellGrabHandle: FC<Props>;
-export {};