material-react-table 1.15.0 → 2.0.0-alpha.1

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -4,17 +4,17 @@ import Tooltip from '@mui/material/Tooltip';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 import { type TableCellProps } from '@mui/material/TableCell';
 
-interface Props {
-  header: MRT_Header;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
   tableCellProps?: TableCellProps;
 }
 
-export const MRT_TableHeadCellSortLabel = ({
+export const MRT_TableHeadCellSortLabel = <TData extends Record<string, any>>({
   header,
   table,
   tableCellProps,
-}: Props) => {
+}: Props<TData>) => {
   const {
     getState,
     options: {
@@ -30,7 +30,9 @@ export const MRT_TableHeadCellSortLabel = ({
     ? column.getIsSorted() === 'desc'
       ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
       : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
-    : localization.unsorted;
+    : column.getNextSortingOrder() === 'desc'
+    ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
+    : localization.sortByColumnAsc.replace('{column}', columnDef.header);
 
   return (
     <Tooltip arrow placement="top" title={sortTooltip}>

package/src/head/MRT_TableHeadRow.tsx

@@ -7,30 +7,31 @@ import {
   type MRT_HeaderGroup,
   type MRT_TableInstance,
 } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
-interface Props {
-  headerGroup: MRT_HeaderGroup;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  headerGroup: MRT_HeaderGroup<TData>;
+  table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }
 
-export const MRT_TableHeadRow = ({
+export const MRT_TableHeadRow = <TData extends Record<string, any>>({
   headerGroup,
   table,
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
-}: Props) => {
+}: Props<TData>) => {
   const {
     options: { layoutMode, muiTableHeadRowProps },
   } = table;
 
-  const tableRowProps =
-    muiTableHeadRowProps instanceof Function
-      ? muiTableHeadRowProps({ headerGroup, table })
-      : muiTableHeadRowProps;
+  const tableRowProps = parseFromValuesOrFunc(muiTableHeadRowProps, {
+    headerGroup,
+    table,
+  });
 
   return (
     <TableRow
@@ -40,9 +41,7 @@ export const MRT_TableHeadRow = ({
         boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
         display: layoutMode === 'grid' ? 'flex' : 'table-row',
         top: 0,
-        ...(tableRowProps?.sx instanceof Function
-          ? tableRowProps?.sx(theme)
-          : (tableRowProps?.sx as any)),
+        ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
       })}
     >
       {virtualPaddingLeft ? (
@@ -51,7 +50,7 @@ export const MRT_TableHeadRow = ({
       {(virtualColumns ?? headerGroup.headers).map((headerOrVirtualHeader) => {
         const header = virtualColumns
           ? headerGroup.headers[headerOrVirtualHeader.index]
-          : (headerOrVirtualHeader as MRT_Header);
+          : (headerOrVirtualHeader as MRT_Header<TData>);
 
         return (
           <MRT_TableHeadCell header={header} key={header.id} table={table} />

package/src/head/index.ts

@@ -0,0 +1,9 @@
+export * from './MRT_TableHead';
+export * from './MRT_TableHeadCell';
+export * from './MRT_TableHeadCellColumnActionsButton';
+export * from './MRT_TableHeadCellFilterContainer';
+export * from './MRT_TableHeadCellFilterLabel';
+export * from './MRT_TableHeadCellGrabHandle';
+export * from './MRT_TableHeadCellResizeHandle';
+export * from './MRT_TableHeadCellSortLabel';
+export * from './MRT_TableHeadRow';

package/src/hooks/useMRT_DisplayColumns.tsx

@@ -0,0 +1,155 @@
+import { type RefObject, useMemo } from 'react';
+import { showExpandColumn } from '../column.utils';
+import { MRT_TableBodyRowPinButton } from '../body/MRT_TableBodyRowPinButton';
+import { MRT_TableBodyRowGrabHandle } from '../body';
+import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
+import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
+import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
+import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
+import {
+  type MRT_ColumnDef,
+  type MRT_ColumnOrderState,
+  type MRT_GroupingState,
+  type MRT_DefinedTableOptions,
+  type MRT_Row,
+} from '../types';
+
+interface Params<TData extends Record<string, any>> {
+  creatingRow: MRT_Row<TData> | null;
+  columnOrder: MRT_ColumnOrderState;
+  grouping: MRT_GroupingState;
+  tableOptions: MRT_DefinedTableOptions<TData>;
+}
+
+export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
+  creatingRow,
+  columnOrder,
+  grouping,
+  tableOptions,
+}: Params<TData>) => {
+  return useMemo(
+    () =>
+      (
+        [
+          (tableOptions.state?.columnOrder ?? columnOrder).includes(
+            'mrt-row-pin',
+          ) && {
+            Cell: ({ row, table }) => (
+              <MRT_TableBodyRowPinButton row={row} table={table} />
+            ),
+            header: tableOptions.localization.pin,
+            size: 60,
+            ...tableOptions.defaultDisplayColumn,
+            ...tableOptions.displayColumnDefOptions?.['mrt-row-pin'],
+            id: 'mrt-row-pin',
+          },
+          (tableOptions.state?.columnOrder ?? columnOrder).includes(
+            'mrt-row-drag',
+          ) && {
+            Cell: ({ row, rowRef, table }) => (
+              <MRT_TableBodyRowGrabHandle
+                row={row}
+                rowRef={rowRef as RefObject<HTMLTableRowElement>}
+                table={table}
+              />
+            ),
+            header: tableOptions.localization.move,
+            size: 60,
+            ...tableOptions.defaultDisplayColumn,
+            ...tableOptions.displayColumnDefOptions?.['mrt-row-drag'],
+            id: 'mrt-row-drag',
+          },
+          ((tableOptions.state?.columnOrder ?? columnOrder).includes(
+            'mrt-row-actions',
+          ) ||
+            (creatingRow && tableOptions.createDisplayMode === 'row')) && {
+            Cell: ({ cell, row, table }) => (
+              <MRT_ToggleRowActionMenuButton
+                cell={cell}
+                row={row}
+                table={table}
+              />
+            ),
+            header: tableOptions.localization.actions,
+            size: 70,
+            ...tableOptions.defaultDisplayColumn,
+            ...tableOptions.displayColumnDefOptions?.['mrt-row-actions'],
+            id: 'mrt-row-actions',
+          },
+          (tableOptions.state?.columnOrder ?? columnOrder).includes(
+            'mrt-row-expand',
+          ) &&
+            showExpandColumn(
+              tableOptions,
+              tableOptions.state?.grouping ?? grouping,
+            ) && {
+              Cell: ({ row, table }) => (
+                <MRT_ExpandButton row={row} table={table} />
+              ),
+              Header: tableOptions.enableExpandAll
+                ? ({ table }) => <MRT_ExpandAllButton table={table} />
+                : null,
+              header: tableOptions.localization.expand,
+              size: 60,
+              ...tableOptions.defaultDisplayColumn,
+              ...tableOptions.displayColumnDefOptions?.['mrt-row-expand'],
+              id: 'mrt-row-expand',
+            },
+          (tableOptions.state?.columnOrder ?? columnOrder).includes(
+            'mrt-row-select',
+          ) && {
+            Cell: ({ row, table }) => (
+              <MRT_SelectCheckbox row={row} table={table} />
+            ),
+            Header:
+              tableOptions.enableSelectAll &&
+              tableOptions.enableMultiRowSelection
+                ? ({ table }) => <MRT_SelectCheckbox selectAll table={table} />
+                : null,
+            header: tableOptions.localization.select,
+            size: 60,
+            ...tableOptions.defaultDisplayColumn,
+            ...tableOptions.displayColumnDefOptions?.['mrt-row-select'],
+            id: 'mrt-row-select',
+          },
+          (tableOptions.state?.columnOrder ?? columnOrder).includes(
+            'mrt-row-numbers',
+          ) && {
+            Cell: ({ row }) => row.index + 1,
+            Header: () => tableOptions.localization.rowNumber,
+            header: tableOptions.localization.rowNumbers,
+            size: 60,
+            ...tableOptions.defaultDisplayColumn,
+            ...tableOptions.displayColumnDefOptions?.['mrt-row-numbers'],
+            id: 'mrt-row-numbers',
+          },
+        ] as MRT_ColumnDef<TData>[]
+      ).filter(Boolean),
+    [
+      columnOrder,
+      grouping,
+      tableOptions.displayColumnDefOptions,
+      tableOptions.editDisplayMode,
+      tableOptions.enableColumnDragging,
+      tableOptions.enableColumnFilterModes,
+      tableOptions.enableColumnOrdering,
+      tableOptions.enableEditing,
+      tableOptions.enableExpandAll,
+      tableOptions.enableExpanding,
+      tableOptions.enableGrouping,
+      tableOptions.enableRowActions,
+      tableOptions.enableRowDragging,
+      tableOptions.enableRowNumbers,
+      tableOptions.enableRowOrdering,
+      tableOptions.enableRowSelection,
+      tableOptions.enableSelectAll,
+      tableOptions.localization,
+      tableOptions.positionActionsColumn,
+      tableOptions.renderDetailPanel,
+      tableOptions.renderRowActionMenuItems,
+      tableOptions.renderRowActions,
+      tableOptions.state?.columnOrder,
+      tableOptions.state?.grouping,
+    ],
+  );
+};

package/src/hooks/useMRT_Effects.ts

@@ -0,0 +1,77 @@
+import { useEffect, useRef } from 'react';
+import { getCanRankRows } from '../column.utils';
+import { type MRT_SortingState, type MRT_TableInstance } from '../types';
+
+export const useMRT_Effects = <TData extends Record<string, any> = {}>(
+  table: MRT_TableInstance<TData>,
+) => {
+  const {
+    getState,
+    options: { enablePagination, rowCount },
+  } = table;
+  const {
+    globalFilter,
+    isFullScreen,
+    pagination,
+    sorting,
+    isLoading,
+    showSkeletons,
+  } = getState();
+
+  const isMounted = useRef(false);
+  const initialBodyHeight = useRef<string>();
+  const previousTop = useRef<number>();
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      initialBodyHeight.current = document.body.style.height;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isMounted && typeof window !== 'undefined') {
+      if (isFullScreen) {
+        previousTop.current = document.body.getBoundingClientRect().top; //save scroll position
+        document.body.style.height = '100vh'; //hide page scrollbars when table is in full screen mode
+      } else {
+        document.body.style.height = initialBodyHeight.current as string;
+        if (!previousTop.current) return;
+        //restore scroll position
+        window.scrollTo({
+          top: -1 * (previousTop.current as number),
+          behavior: 'instant',
+        });
+      }
+    }
+    isMounted.current = true;
+  }, [isFullScreen]);
+
+  //if page index is out of bounds, set it to the last page
+  useEffect(() => {
+    if (!enablePagination || isLoading || showSkeletons) return;
+    const { pageIndex, pageSize } = pagination;
+    const totalRowCount =
+      rowCount ?? table.getPrePaginationRowModel().rows.length;
+    const firstVisibleRowIndex = pageIndex * pageSize;
+    if (firstVisibleRowIndex > totalRowCount) {
+      table.setPageIndex(Math.floor(totalRowCount / pageSize));
+    }
+  }, [rowCount, table.getPrePaginationRowModel().rows.length]);
+
+  //turn off sort when global filter is looking for ranked results
+  const appliedSort = useRef<MRT_SortingState>(sorting);
+  useEffect(() => {
+    if (sorting.length) {
+      appliedSort.current = sorting;
+    }
+  }, [sorting]);
+
+  useEffect(() => {
+    if (!getCanRankRows(table)) return;
+    if (globalFilter) {
+      table.setSorting([]);
+    } else {
+      table.setSorting(() => appliedSort.current || []);
+    }
+  }, [globalFilter]);
+};

package/src/hooks/useMRT_TableInstance.ts

@@ -0,0 +1,297 @@
+import { useMemo, useRef, useState } from 'react';
+import {
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFacetedMinMaxValues,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getGroupedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import {
+  createRow,
+  getAllLeafColumnDefs,
+  getColumnId,
+  getDefaultColumnFilterFn,
+  getDefaultColumnOrderIds,
+  prepareColumns,
+} from '../column.utils';
+import { useMRT_DisplayColumns } from './useMRT_DisplayColumns';
+import { useMRT_Effects } from './useMRT_Effects';
+import {
+  type MRT_Cell,
+  type MRT_Column,
+  type MRT_ColumnDef,
+  type MRT_ColumnOrderState,
+  type MRT_DefinedTableOptions,
+  type MRT_DensityState,
+  type MRT_ColumnFilterFnsState,
+  type MRT_FilterOption,
+  type MRT_GroupingState,
+  type MRT_Row,
+  type MRT_TableInstance,
+  type MRT_TableState,
+  type MRT_Updater,
+} from '../types';
+
+export const useMRT_TableInstance: <TData extends Record<string, any>>(
+  tableOptions: MRT_DefinedTableOptions<TData>,
+) => MRT_TableInstance<TData> = <TData extends Record<string, any>>(
+  tableOptions: MRT_DefinedTableOptions<TData>,
+) => {
+  const bottomToolbarRef = useRef<HTMLDivElement>(null);
+  const editInputRefs = useRef<Record<string, HTMLInputElement>>({});
+  const filterInputRefs = useRef<Record<string, HTMLInputElement>>({});
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const tableHeadCellRefs = useRef<Record<string, HTMLTableCellElement>>({});
+  const tablePaperRef = useRef<HTMLDivElement>(null);
+  const topToolbarRef = useRef<HTMLDivElement>(null);
+  const tableHeadRef = useRef<HTMLTableSectionElement>(null);
+  const tableFooterRef = useRef<HTMLTableSectionElement>(null);
+
+  const initialState: Partial<MRT_TableState<TData>> = useMemo(() => {
+    const initState = tableOptions.initialState ?? {};
+    initState.columnOrder =
+      initState.columnOrder ?? getDefaultColumnOrderIds(tableOptions);
+    initState.globalFilterFn = tableOptions.globalFilterFn ?? 'fuzzy';
+    return initState;
+  }, []);
+
+  const [creatingRow, _setCreatingRow] = useState<MRT_Row<TData> | null>(
+    initialState.creatingRow ?? null,
+  );
+  const [columnFilterFns, setColumnFilterFns] =
+    useState<MRT_ColumnFilterFnsState>(() =>
+      Object.assign(
+        {},
+        ...getAllLeafColumnDefs(
+          tableOptions.columns as MRT_ColumnDef<TData>[],
+        ).map((col) => ({
+          [getColumnId(col)]:
+            col.filterFn instanceof Function
+              ? col.filterFn.name ?? 'custom'
+              : col.filterFn ??
+                initialState?.columnFilterFns?.[getColumnId(col)] ??
+                getDefaultColumnFilterFn(col),
+        })),
+      ),
+    );
+  const [columnOrder, setColumnOrder] = useState<MRT_ColumnOrderState>(
+    initialState.columnOrder ?? [],
+  );
+  const [density, setDensity] = useState<MRT_DensityState>(
+    initialState?.density ?? 'comfortable',
+  );
+  const [draggingColumn, setDraggingColumn] =
+    useState<MRT_Column<TData> | null>(initialState.draggingColumn ?? null);
+  const [draggingRow, setDraggingRow] = useState<MRT_Row<TData> | null>(
+    initialState.draggingRow ?? null,
+  );
+  const [editingCell, setEditingCell] = useState<MRT_Cell<TData> | null>(
+    initialState.editingCell ?? null,
+  );
+  const [editingRow, setEditingRow] = useState<MRT_Row<TData> | null>(
+    initialState.editingRow ?? null,
+  );
+  const [globalFilterFn, setGlobalFilterFn] = useState<MRT_FilterOption>(
+    initialState.globalFilterFn ?? 'fuzzy',
+  );
+  const [grouping, setGrouping] = useState<MRT_GroupingState>(
+    initialState.grouping ?? [],
+  );
+  const [hoveredColumn, setHoveredColumn] = useState<
+    MRT_Column<TData> | { id: string } | null
+  >(initialState.hoveredColumn ?? null);
+  const [hoveredRow, setHoveredRow] = useState<
+    MRT_Row<TData> | { id: string } | null
+  >(initialState.hoveredRow ?? null);
+  const [isFullScreen, setIsFullScreen] = useState<boolean>(
+    initialState?.isFullScreen ?? false,
+  );
+  const [showAlertBanner, setShowAlertBanner] = useState<boolean>(
+    tableOptions.initialState?.showAlertBanner ?? false,
+  );
+  const [showColumnFilters, setShowColumnFilters] = useState<boolean>(
+    initialState?.showColumnFilters ?? false,
+  );
+  const [showGlobalFilter, setShowGlobalFilter] = useState<boolean>(
+    initialState?.showGlobalFilter ?? false,
+  );
+  const [showToolbarDropZone, setShowToolbarDropZone] = useState<boolean>(
+    initialState?.showToolbarDropZone ?? false,
+  );
+
+  const displayColumns = useMRT_DisplayColumns({
+    columnOrder,
+    creatingRow,
+    grouping,
+    tableOptions,
+  });
+
+  const columnDefs = useMemo(
+    () =>
+      prepareColumns({
+        aggregationFns: tableOptions.aggregationFns as any,
+        columnDefs: [...displayColumns, ...tableOptions.columns],
+        columnFilterFns: tableOptions.state?.columnFilterFns ?? columnFilterFns,
+        defaultDisplayColumn: tableOptions.defaultDisplayColumn ?? {},
+        filterFns: tableOptions.filterFns as any,
+        sortingFns: tableOptions.sortingFns as any,
+      }),
+    [
+      columnFilterFns,
+      displayColumns,
+      tableOptions.columns,
+      tableOptions.state?.columnFilterFns,
+    ],
+  );
+
+  const data: TData[] = useMemo(
+    () =>
+      (tableOptions.state?.isLoading || tableOptions.state?.showSkeletons) &&
+      !tableOptions.data.length
+        ? [
+            ...Array(
+              tableOptions.state?.pagination?.pageSize ||
+                initialState?.pagination?.pageSize ||
+                10,
+            ).fill(null),
+          ].map(() =>
+            Object.assign(
+              {},
+              ...getAllLeafColumnDefs(tableOptions.columns).map((col) => ({
+                [getColumnId(col)]: null,
+              })),
+            ),
+          )
+        : tableOptions.data,
+    [
+      tableOptions.data,
+      tableOptions.state?.isLoading,
+      tableOptions.state?.showSkeletons,
+    ],
+  );
+
+  //@ts-ignore
+  const table = useReactTable({
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel:
+      tableOptions.enableExpanding || tableOptions.enableGrouping
+        ? getExpandedRowModel()
+        : undefined,
+    getFacetedMinMaxValues: tableOptions.enableFacetedValues
+      ? getFacetedMinMaxValues()
+      : undefined,
+    getFacetedRowModel: tableOptions.enableFacetedValues
+      ? getFacetedRowModel()
+      : undefined,
+    getFacetedUniqueValues: tableOptions.enableFacetedValues
+      ? getFacetedUniqueValues()
+      : undefined,
+    getFilteredRowModel:
+      tableOptions.enableColumnFilters ||
+      tableOptions.enableGlobalFilter ||
+      tableOptions.enableFilters
+        ? getFilteredRowModel()
+        : undefined,
+    getGroupedRowModel: tableOptions.enableGrouping
+      ? getGroupedRowModel()
+      : undefined,
+    getPaginationRowModel: tableOptions.enablePagination
+      ? getPaginationRowModel()
+      : undefined,
+    getSortedRowModel: tableOptions.enableSorting
+      ? getSortedRowModel()
+      : undefined,
+    onColumnOrderChange: setColumnOrder,
+    onGroupingChange: setGrouping,
+    getSubRows: (row) => row?.subRows,
+    ...tableOptions,
+    //@ts-ignore
+    columns: columnDefs,
+    data,
+    globalFilterFn: tableOptions.filterFns?.[globalFilterFn ?? 'fuzzy'],
+    initialState,
+    state: {
+      creatingRow,
+      columnFilterFns,
+      columnOrder,
+      density,
+      draggingColumn,
+      draggingRow,
+      editingCell,
+      editingRow,
+      globalFilterFn,
+      grouping,
+      hoveredColumn,
+      hoveredRow,
+      isFullScreen,
+      showAlertBanner,
+      showColumnFilters,
+      showGlobalFilter,
+      showToolbarDropZone,
+      ...tableOptions.state,
+    },
+  }) as MRT_TableInstance<TData>;
+
+  // @ts-ignore
+  table.refs = {
+    // @ts-ignore
+    bottomToolbarRef,
+    editInputRefs,
+    filterInputRefs,
+    // @ts-ignore
+    searchInputRef,
+    // @ts-ignore
+    tableContainerRef,
+    tableHeadCellRefs,
+    // @ts-ignore
+    tablePaperRef,
+    // @ts-ignore
+    topToolbarRef,
+    // @ts-ignore
+    tableFooterRef,
+    // @ts-ignore
+    tableHeadRef,
+  };
+
+  const setCreatingRow = (row: MRT_Updater<MRT_Row<TData> | null | true>) => {
+    if (row === true) {
+      table.setCreatingRow(createRow(table));
+    } else {
+      _setCreatingRow(row as MRT_Row<TData> | null);
+    }
+  };
+
+  table.setCreatingRow = setCreatingRow;
+  table.setColumnFilterFns =
+    tableOptions.onColumnFilterFnsChange ?? setColumnFilterFns;
+  table.setDensity = tableOptions.onDensityChange ?? setDensity;
+  table.setDraggingColumn =
+    tableOptions.onDraggingColumnChange ?? setDraggingColumn;
+  table.setDraggingRow = tableOptions.onDraggingRowChange ?? setDraggingRow;
+  table.setEditingCell = tableOptions.onEditingCellChange ?? setEditingCell;
+  table.setEditingRow = tableOptions.onEditingRowChange ?? setEditingRow;
+  table.setGlobalFilterFn =
+    tableOptions.onGlobalFilterFnChange ?? setGlobalFilterFn;
+  table.setHoveredColumn =
+    tableOptions.onHoveredColumnChange ?? setHoveredColumn;
+  table.setHoveredRow = tableOptions.onHoveredRowChange ?? setHoveredRow;
+  table.setIsFullScreen = tableOptions.onIsFullScreenChange ?? setIsFullScreen;
+  table.setShowAlertBanner =
+    tableOptions.onShowAlertBannerChange ?? setShowAlertBanner;
+  table.setShowColumnFilters =
+    tableOptions.onShowColumnFiltersChange ?? setShowColumnFilters;
+  table.setShowGlobalFilter =
+    tableOptions.onShowGlobalFilterChange ?? setShowGlobalFilter;
+  table.setShowToolbarDropZone =
+    tableOptions.onShowToolbarDropZoneChange ?? setShowToolbarDropZone;
+
+  useMRT_Effects(table);
+
+  return table;
+};