material-react-table 2.8.0 → 2.9.1

package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx

@@ -86,9 +86,11 @@ export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
       id: 'mrt-row-expand',
       size:
         groupedColumnMode === 'remove'
-          ? defaultColumn?.size
+          ? defaultColumn?.size ?? 180
           : renderDetailPanel
-            ? 60
+            ? enableExpandAll
+              ? 60
+              : 70
             : 100,
       tableOptions,
     }),

package/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx

@@ -30,6 +30,7 @@ export const getMRT_RowNumbersColumnDef = <TData extends MRT_RowData>(
     ...defaultDisplayColumnProps({
       header: 'rowNumbers',
       id: 'mrt-row-numbers',
+      size: 50,
       tableOptions,
     }),
   };

package/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx

@@ -24,6 +24,7 @@ export const getMRT_RowPinningColumnDef = <TData extends MRT_RowData>(
     ...defaultDisplayColumnProps({
       header: 'pin',
       id: 'mrt-row-pin',
+      size: 60,
       tableOptions,
     }),
   };

package/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx

@@ -28,12 +28,13 @@ export const getMRT_RowSelectColumnDef = <TData extends MRT_RowData>(
     ),
     Header:
       enableSelectAll && enableMultiRowSelection
-        ? ({ table }) => <MRT_SelectCheckbox selectAll table={table} />
+        ? ({ table }) => <MRT_SelectCheckbox table={table} />
         : undefined,
     grow: false,
     ...defaultDisplayColumnProps({
       header: 'select',
       id: 'mrt-row-select',
+      size: enableSelectAll ? 60 : 70,
       tableOptions,
     }),
   };

package/src/hooks/useMRT_ColumnVirtualizer.ts

@@ -16,7 +16,10 @@ export const useMRT_ColumnVirtualizer = <
   table: MRT_TableInstance<TData>,
 ): MRT_ColumnVirtualizer | undefined => {
   const {
+    getLeftLeafColumns,
+    getRightLeafColumns,
     getState,
+    getVisibleLeafColumns,
     options: {
       columnVirtualizerInstanceRef,
       columnVirtualizerOptions,
@@ -25,7 +28,9 @@ export const useMRT_ColumnVirtualizer = <
     },
     refs: { tableContainerRef },
   } = table;
-  const { columnPinning, columnVisibility, draggingColumn } = getState();
+  const { columnPinning, draggingColumn } = getState();
+
+  if (!enableColumnVirtualization) return undefined;
 
   const columnVirtualizerProps = parseFromValuesOrFunc(
     columnVirtualizerOptions,
@@ -34,91 +39,87 @@ export const useMRT_ColumnVirtualizer = <
     },
   );
 
+  const visibleColumns = getVisibleLeafColumns();
+
   const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(
     () =>
-      enableColumnVirtualization && enableColumnPinning
+      enableColumnPinning
         ? [
-            table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
-            table
-              .getRightLeafColumns()
+            getLeftLeafColumns().map((c) => c.getPinnedIndex()),
+            getRightLeafColumns()
               .map(
-                (c) =>
-                  table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1,
+                (column) => visibleColumns.length - column.getPinnedIndex() - 1,
               )
               .sort((a, b) => a - b),
           ]
         : [[], []],
-    [columnPinning, enableColumnVirtualization, enableColumnPinning],
+    [columnPinning, enableColumnPinning],
   );
 
-  //get first 16 column widths and average them if calc is needed
-  const averageColumnWidth = useMemo(() => {
-    if (!enableColumnVirtualization || columnVirtualizerProps?.estimateSize) {
-      return 0;
-    }
-    const columnsWidths =
-      table
-        .getRowModel()
-        .rows[0]?.getCenterVisibleCells()
-        ?.slice(0, 16)
-        ?.map((cell) => cell.column.getSize() * 1.2) ?? [];
-    return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
-  }, [table.getRowModel().rows, columnPinning, columnVisibility]);
-
-  const draggingColumnIndex = draggingColumn?.id
-    ? table
-        .getVisibleLeafColumns()
-        .findIndex((c) => c.id === draggingColumn?.id)
-    : undefined;
-
-  const columnVirtualizer = enableColumnVirtualization
-    ? (useVirtualizer({
-        count: table.getVisibleLeafColumns().length,
-        estimateSize: () => averageColumnWidth,
-        getScrollElement: () => tableContainerRef.current,
-        horizontal: true,
-        overscan: 3,
-        rangeExtractor: useCallback(
-          (range: Range) => {
-            const newIndexes = extraIndexRangeExtractor(
-              range,
-              draggingColumnIndex,
-            );
-            return [
-              ...new Set([
-                ...leftPinnedIndexes,
-                ...newIndexes,
-                ...rightPinnedIndexes,
-              ]),
-            ];
-          },
-          [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex],
-        ),
-        ...columnVirtualizerProps,
-      }) as unknown as MRT_ColumnVirtualizer<TScrollElement, TItemElement>)
-    : undefined;
-
-  if (columnVirtualizer) {
-    const virtualColumns = columnVirtualizer.getVirtualItems();
-    columnVirtualizer.virtualColumns = virtualColumns;
-    if (virtualColumns.length) {
-      columnVirtualizer.virtualPaddingLeft =
-        (virtualColumns[leftPinnedIndexes.length]?.start ?? 0) -
-        (virtualColumns[leftPinnedIndexes.length - 1]?.end ?? 0);
-      columnVirtualizer.virtualPaddingRight =
-        columnVirtualizer.getTotalSize() -
-        (virtualColumns[virtualColumns.length - rightPinnedIndexes.length - 1]
-          ?.end ?? 0) -
-        (rightPinnedIndexes.length
-          ? columnVirtualizer.getTotalSize() -
-            (virtualColumns[virtualColumns.length - rightPinnedIndexes.length]
-              ?.start ?? 0)
-          : 0);
-    }
-    if (columnVirtualizerInstanceRef) {
-      //@ts-ignore
-      columnVirtualizerInstanceRef.current = columnVirtualizer;
-    }
+  const numPinnedLeft = leftPinnedIndexes.length;
+  const numPinnedRight = rightPinnedIndexes.length;
+
+  const draggingColumnIndex = useMemo(
+    () =>
+      draggingColumn?.id
+        ? visibleColumns.findIndex((c) => c.id === draggingColumn?.id)
+        : undefined,
+    [draggingColumn?.id],
+  );
+
+  const columnVirtualizer = useVirtualizer({
+    count: visibleColumns.length,
+    estimateSize: (index) => visibleColumns[index].getSize(),
+    getScrollElement: () => tableContainerRef.current,
+    horizontal: true,
+    overscan: 3,
+    rangeExtractor: useCallback(
+      (range: Range) => {
+        const newIndexes = extraIndexRangeExtractor(range, draggingColumnIndex);
+        if (!numPinnedLeft && !numPinnedRight) {
+          return newIndexes;
+        }
+        return [
+          ...new Set([
+            ...leftPinnedIndexes,
+            ...newIndexes,
+            ...rightPinnedIndexes,
+          ]),
+        ];
+      },
+      [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex],
+    ),
+    ...columnVirtualizerProps,
+  }) as unknown as MRT_ColumnVirtualizer<TScrollElement, TItemElement>;
+
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+  columnVirtualizer.virtualColumns = virtualColumns;
+  const numColumns = virtualColumns.length;
+
+  if (numColumns) {
+    const totalSize = columnVirtualizer.getTotalSize();
+
+    const leftNonPinnedStart = virtualColumns[numPinnedLeft]?.start || 0;
+    const leftNonPinnedEnd =
+      virtualColumns[leftPinnedIndexes.length - 1]?.end || 0;
+
+    const rightNonPinnedStart =
+      virtualColumns[numColumns - numPinnedRight]?.start || 0;
+    const rightNonPinnedEnd =
+      virtualColumns[numColumns - numPinnedRight - 1]?.end || 0;
+
+    columnVirtualizer.virtualPaddingLeft =
+      leftNonPinnedStart - leftNonPinnedEnd;
+
+    columnVirtualizer.virtualPaddingRight =
+      totalSize -
+      rightNonPinnedEnd -
+      (numPinnedRight ? totalSize - rightNonPinnedStart : 0);
+  }
+
+  if (columnVirtualizerInstanceRef) {
+    //@ts-ignore
+    columnVirtualizerInstanceRef.current = columnVirtualizer;
   }
 
   return columnVirtualizer as any;

package/src/hooks/useMRT_RowVirtualizer.ts

@@ -30,6 +30,8 @@ export const useMRT_RowVirtualizer = <
   } = table;
   const { density, draggingRow, expanded } = getState();
 
+  if (!enableRowVirtualization) return undefined;
+
   const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
     table,
   });
@@ -39,39 +41,35 @@ export const useMRT_RowVirtualizer = <
   const normalRowHeight =
     density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73;
 
-  const rowVirtualizer = enableRowVirtualization
-    ? (useVirtualizer({
-        count: renderDetailPanel ? rowCount * 2 : rowCount,
-        estimateSize: (index) =>
-          renderDetailPanel && index % 2 === 1
-            ? expanded === true
-              ? 100
-              : 0
-            : normalRowHeight,
-        getScrollElement: () => tableContainerRef.current,
-        measureElement:
-          typeof window !== 'undefined' &&
-          navigator.userAgent.indexOf('Firefox') === -1
-            ? (element) => element?.getBoundingClientRect().height
-            : undefined,
-        overscan: 4,
-        rangeExtractor: useCallback(
-          (range: Range) => {
-            return extraIndexRangeExtractor(range, draggingRow?.index ?? 0);
-          },
-          [draggingRow],
-        ),
-        ...rowVirtualizerProps,
-      }) as unknown as MRT_RowVirtualizer<TScrollElement, TItemElement>)
-    : undefined;
+  const rowVirtualizer = useVirtualizer({
+    count: renderDetailPanel ? rowCount * 2 : rowCount,
+    estimateSize: (index) =>
+      renderDetailPanel && index % 2 === 1
+        ? expanded === true
+          ? 100
+          : 0
+        : normalRowHeight,
+    getScrollElement: () => tableContainerRef.current,
+    measureElement:
+      typeof window !== 'undefined' &&
+      navigator.userAgent.indexOf('Firefox') === -1
+        ? (element) => element?.getBoundingClientRect().height
+        : undefined,
+    overscan: 4,
+    rangeExtractor: useCallback(
+      (range: Range) => {
+        return extraIndexRangeExtractor(range, draggingRow?.index ?? 0);
+      },
+      [draggingRow],
+    ),
+    ...rowVirtualizerProps,
+  }) as unknown as MRT_RowVirtualizer<TScrollElement, TItemElement>;
+
+  rowVirtualizer.virtualRows = rowVirtualizer.getVirtualItems();
 
-  if (rowVirtualizer) {
-    const virtualRows = rowVirtualizer.getVirtualItems();
-    rowVirtualizer.virtualRows = virtualRows;
-    if (rowVirtualizerInstanceRef) {
-      //@ts-ignore
-      rowVirtualizerInstanceRef.current = rowVirtualizer;
-    }
+  if (rowVirtualizerInstanceRef) {
+    //@ts-ignore
+    rowVirtualizerInstanceRef.current = rowVirtualizer;
   }
 
   return rowVirtualizer;

package/src/hooks/useMRT_TableInstance.ts

@@ -1,16 +1,5 @@
 import { useMemo, useRef, useState } from 'react';
-import {
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFacetedMinMaxValues,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getGroupedRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from '@tanstack/react-table';
+import { useReactTable } from '@tanstack/react-table';
 import {
   type MRT_Cell,
   type MRT_Column,
@@ -207,36 +196,6 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
 
   //@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,
-    getSubRows: (row) => row?.subRows,
     onColumnOrderChange,
     onColumnSizingInfoChange,
     onGroupingChange,

package/src/hooks/useMRT_TableOptions.ts

@@ -1,4 +1,15 @@
 import { useMemo } from 'react';
+import {
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFacetedMinMaxValues,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getGroupedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+} from '@tanstack/react-table';
 import { useTheme } from '@mui/material/styles';
 import { MRT_AggregationFns } from '../fns/aggregationFns';
 import { MRT_FilterFns } from '../fns/filterFns';
@@ -51,9 +62,11 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   enableColumnOrdering = false,
   enableColumnPinning = false,
   enableColumnResizing = false,
+  enableColumnVirtualization,
   enableDensityToggle = true,
   enableExpandAll = true,
   enableExpanding,
+  enableFacetedValues = false,
   enableFilterMatchHighlighting = true,
   enableFilters = true,
   enableFullScreenToggle = true,
@@ -66,6 +79,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   enablePagination = true,
   enableRowPinning = false,
   enableRowSelection = false,
+  enableRowVirtualization,
   enableSelectAll = true,
   enableSorting = true,
   enableStickyHeader = false,
@@ -96,31 +110,37 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   ...rest
 }: MRT_TableOptions<TData>) => {
   const theme = useTheme();
-  const _icons = useMemo(() => ({ ...MRT_Default_Icons, ...icons }), [icons]);
-  const _localization = useMemo(
+
+  icons = useMemo(() => ({ ...MRT_Default_Icons, ...icons }), [icons]);
+  localization = useMemo(
     () => ({
       ...MRT_Localization_EN,
       ...localization,
     }),
     [localization],
   );
-  const _aggregationFns = useMemo(
+  aggregationFns = useMemo(
     () => ({ ...MRT_AggregationFns, ...aggregationFns }),
     [],
   );
-  const _filterFns = useMemo(() => ({ ...MRT_FilterFns, ...filterFns }), []);
-  const _sortingFns = useMemo(() => ({ ...MRT_SortingFns, ...sortingFns }), []);
-  const _defaultColumn = useMemo(
+  filterFns = useMemo(() => ({ ...MRT_FilterFns, ...filterFns }), []);
+  sortingFns = useMemo(() => ({ ...MRT_SortingFns, ...sortingFns }), []);
+  defaultColumn = useMemo(
     () => ({ ...MRT_DefaultColumn, ...defaultColumn }),
     [defaultColumn],
   );
-  const _defaultDisplayColumn = useMemo(
+  defaultDisplayColumn = useMemo(
     () => ({
       ...MRT_DefaultDisplayColumn,
       ...defaultDisplayColumn,
     }),
     [defaultDisplayColumn],
   );
+  //cannot be changed after initialization
+  [enableColumnVirtualization, enableRowVirtualization] = useMemo(
+    () => [enableColumnVirtualization, enableRowVirtualization],
+    [],
+  );
 
   if (!columnResizeDirection) {
     columnResizeDirection = theme.direction || 'ltr';
@@ -130,12 +150,12 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     layoutMode || (enableColumnResizing ? 'grid-no-grow' : 'semantic');
   if (
     layoutMode === 'semantic' &&
-    (rest.enableRowVirtualization || rest.enableColumnVirtualization)
+    (enableRowVirtualization || enableColumnVirtualization)
   ) {
     layoutMode = 'grid';
   }
 
-  if (rest.enableRowVirtualization) {
+  if (enableRowVirtualization) {
     enableStickyHeader = true;
   }
 
@@ -151,14 +171,14 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   }
 
   return {
-    aggregationFns: _aggregationFns,
+    aggregationFns,
     autoResetExpanded,
     columnFilterDisplayMode,
     columnResizeDirection,
     columnResizeMode,
     createDisplayMode,
-    defaultColumn: _defaultColumn,
-    defaultDisplayColumn: _defaultDisplayColumn,
+    defaultColumn,
+    defaultDisplayColumn,
     editDisplayMode,
     enableBottomToolbar,
     enableColumnActions,
@@ -166,9 +186,11 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     enableColumnOrdering,
     enableColumnPinning,
     enableColumnResizing,
+    enableColumnVirtualization,
     enableDensityToggle,
     enableExpandAll,
     enableExpanding,
+    enableFacetedValues,
     enableFilterMatchHighlighting,
     enableFilters,
     enableFullScreenToggle,
@@ -181,6 +203,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     enablePagination,
     enableRowPinning,
     enableRowSelection,
+    enableRowVirtualization,
     enableSelectAll,
     enableSorting,
     enableStickyHeader,
@@ -188,10 +211,30 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     enableTableHead,
     enableToolbarInternalActions,
     enableTopToolbar,
-    filterFns: _filterFns,
-    icons: _icons,
+    filterFns,
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel:
+      enableExpanding || enableGrouping ? getExpandedRowModel() : undefined,
+    getFacetedMinMaxValues: enableFacetedValues
+      ? getFacetedMinMaxValues()
+      : undefined,
+    getFacetedRowModel: enableFacetedValues ? getFacetedRowModel() : undefined,
+    getFacetedUniqueValues: enableFacetedValues
+      ? getFacetedUniqueValues()
+      : undefined,
+    getFilteredRowModel:
+      enableColumnFilters || enableGlobalFilter || enableFilters
+        ? getFilteredRowModel()
+        : undefined,
+    getGroupedRowModel: enableGrouping ? getGroupedRowModel() : undefined,
+    getPaginationRowModel: enablePagination
+      ? getPaginationRowModel()
+      : undefined,
+    getSortedRowModel: enableSorting ? getSortedRowModel() : undefined,
+    getSubRows: (row) => row?.subRows,
+    icons,
     layoutMode,
-    localization: _localization,
+    localization,
     manualFiltering,
     manualGrouping,
     manualPagination,
@@ -207,7 +250,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     rowNumberDisplayMode,
     rowPinningDisplayMode,
     selectAllMode,
-    sortingFns: _sortingFns,
+    sortingFns,
     ...rest,
-  };
+  } as MRT_DefinedTableOptions<TData>;
 };

package/src/locales/ja.ts

@@ -78,10 +78,10 @@ export const MRT_Localization_JA: MRT_Localization = {
   showHideColumns: '列の表示状態',
   showHideFilters: '検索バーを表示',
   showHideSearch: '検索',
-  sortByColumnAsc: '{column}を昇順でを並べ替え',
-  sortByColumnDesc: '{column}を降順でを並べ替え',
-  sortedByColumnAsc: '{column}を昇順でを並べ替え',
-  sortedByColumnDesc: '{column}を降順でを並べ替え',
+  sortByColumnAsc: '{column}を昇順で並べ替え',
+  sortByColumnDesc: '{column}を降順で並べ替え',
+  sortedByColumnAsc: '{column}を昇順で並べ替え',
+  sortedByColumnDesc: '{column}を降順で並べ替え',
   thenBy: 'さらに',
   toggleDensity: 'テーブルの高さを変更',
   toggleFullScreen: 'フルスクリーン切り替え',

package/src/types.ts

@@ -1164,6 +1164,9 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   renderBottomToolbarCustomActions?: (props: {
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
+  renderCaption?:
+    | ((props: { table: MRT_TableInstance<TData> }) => ReactNode)
+    | ReactNode;
   renderColumnActionsMenuItems?: (props: {
     closeMenu: () => void;
     column: MRT_Column<TData>;

package/src/utils/displayColumn.utils.ts

@@ -10,12 +10,12 @@ import { getAllLeafColumnDefs, getColumnId } from './column.utils';
 export function defaultDisplayColumnProps<TData extends MRT_RowData>({
   header,
   id,
-  size = 60,
+  size,
   tableOptions,
 }: {
   header?: keyof MRT_Localization;
   id: MRT_DisplayColumnIds;
-  size?: number;
+  size: number;
   tableOptions: MRT_DefinedTableOptions<TData>;
 }) {
   const { defaultDisplayColumn, displayColumnDefOptions, localization } =

package/src/utils/row.utils.ts

@@ -1,4 +1,28 @@
-import { type MRT_RowData, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
+import { parseFromValuesOrFunc } from './utils';
+
+export const getIsRowSelected = <TData extends MRT_RowData>({
+  row,
+  table,
+}: {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}) => {
+  const {
+    options: { enableRowSelection },
+  } = table;
+
+  return (
+    row.getIsSelected() ||
+    (parseFromValuesOrFunc(enableRowSelection, row) &&
+      row.getCanSelectSubRows() &&
+      row.getIsAllSubRowsSelected())
+  );
+};
 
 export const getCanRankRows = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,