material-react-table 2.6.1 → 2.8.0

package/src/hooks/useMRT_Rows.ts

@@ -1,11 +1,11 @@
 import { useMemo } from 'react';
-import { getCanRankRows } from '../column.utils';
-import { rankGlobalFuzzy } from '../sortingFns';
+import { rankGlobalFuzzy } from '../fns/sortingFns';
 import {
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
+import { getCanRankRows } from '../utils/row.utils';
 
 export const useMRT_Rows = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,
@@ -19,6 +19,7 @@ export const useMRT_Rows = <TData extends MRT_RowData>(
     getState,
     getTopRows,
     options: {
+      createDisplayMode,
       enableGlobalFilterRankedResults,
       enablePagination,
       enableRowPinning,
@@ -27,11 +28,18 @@ export const useMRT_Rows = <TData extends MRT_RowData>(
       manualGrouping,
       manualPagination,
       manualSorting,
+      positionCreatingRow,
       rowPinningDisplayMode,
     },
   } = table;
-  const { expanded, globalFilter, pagination, rowPinning, sorting } =
-    getState();
+  const {
+    creatingRow,
+    expanded,
+    globalFilter,
+    pagination,
+    rowPinning,
+    sorting,
+  } = getState();
 
   const shouldRankRows = useMemo(
     () =>
@@ -73,14 +81,32 @@ export const useMRT_Rows = <TData extends MRT_RowData>(
         ...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
       ];
     }
+    if (
+      positionCreatingRow !== undefined &&
+      creatingRow &&
+      createDisplayMode === 'row'
+    ) {
+      const creatingRowIndex = !isNaN(+positionCreatingRow)
+        ? +positionCreatingRow
+        : positionCreatingRow === 'top'
+          ? 0
+          : rows.length;
+      rows = [
+        ...rows.slice(0, creatingRowIndex),
+        creatingRow,
+        ...rows.slice(creatingRowIndex),
+      ];
+    }
 
     return rows;
   }, [
-    shouldRankRows,
-    shouldRankRows ? getPrePaginationRowModel().rows : getRowModel().rows,
+    creatingRow,
     pagination.pageIndex,
     pagination.pageSize,
+    positionCreatingRow,
     rowPinning,
+    shouldRankRows ? getPrePaginationRowModel().rows : getRowModel().rows,
+    shouldRankRows,
   ]);
 
   return rows;

package/src/hooks/useMRT_TableInstance.ts

@@ -11,38 +11,39 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import {
-  createRow,
-  getAllLeafColumnDefs,
-  getColumnId,
-  getDefaultColumnFilterFn,
-  getDefaultColumnOrderIds,
-  prepareColumns,
-} from '../column.utils';
 import {
   type MRT_Cell,
   type MRT_Column,
   type MRT_ColumnDef,
   type MRT_ColumnFilterFnsState,
   type MRT_ColumnOrderState,
+  type MRT_ColumnSizingInfoState,
   type MRT_DefinedTableOptions,
   type MRT_DensityState,
   type MRT_FilterOption,
   type MRT_GroupingState,
+  type MRT_PaginationState,
   type MRT_Row,
   type MRT_RowData,
+  type MRT_StatefulTableOptions,
   type MRT_TableInstance,
   type MRT_TableState,
   type MRT_Updater,
 } from '../types';
-import { useMRT_DisplayColumns } from './useMRT_DisplayColumns';
+import {
+  getAllLeafColumnDefs,
+  getColumnId,
+  getDefaultColumnFilterFn,
+  prepareColumns,
+} from '../utils/column.utils';
+import { getDefaultColumnOrderIds } from '../utils/displayColumn.utils';
+import { createRow } from '../utils/tanstack.helpers';
+import { getMRT_DisplayColumns } from './display-columns/getMRT_DisplayColumns';
 import { useMRT_Effects } from './useMRT_Effects';
 
-export const useMRT_TableInstance: <TData extends MRT_RowData>(
-  tableOptions: MRT_DefinedTableOptions<TData>,
-) => MRT_TableInstance<TData> = <TData extends MRT_RowData>(
-  tableOptions: MRT_DefinedTableOptions<TData>,
-) => {
+export const useMRT_TableInstance = <TData extends MRT_RowData>(
+  _tableOptions: MRT_DefinedTableOptions<TData>,
+): MRT_TableInstance<TData> => {
   const bottomToolbarRef = useRef<HTMLDivElement>(null);
   const editInputRefs = useRef<Record<string, HTMLInputElement>>({});
   const filterInputRefs = useRef<Record<string, HTMLInputElement>>({});
@@ -55,13 +56,19 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
   const tableFooterRef = useRef<HTMLTableSectionElement>(null);
 
   const initialState: Partial<MRT_TableState<TData>> = useMemo(() => {
-    const initState = tableOptions.initialState ?? {};
+    const initState = _tableOptions.initialState ?? {};
     initState.columnOrder =
-      initState.columnOrder ?? getDefaultColumnOrderIds(tableOptions);
-    initState.globalFilterFn = tableOptions.globalFilterFn ?? 'fuzzy';
+      initState.columnOrder ??
+      getDefaultColumnOrderIds({
+        ..._tableOptions,
+        state: { ..._tableOptions.initialState, ..._tableOptions.state },
+      } as MRT_StatefulTableOptions<TData>);
+    initState.globalFilterFn = _tableOptions.globalFilterFn ?? 'fuzzy';
     return initState;
   }, []);
 
+  _tableOptions.initialState = initialState;
+
   const [creatingRow, _setCreatingRow] = useState<MRT_Row<TData> | null>(
     initialState.creatingRow ?? null,
   );
@@ -70,7 +77,7 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
       Object.assign(
         {},
         ...getAllLeafColumnDefs(
-          tableOptions.columns as MRT_ColumnDef<TData>[],
+          _tableOptions.columns as MRT_ColumnDef<TData>[],
         ).map((col) => ({
           [getColumnId(col)]:
             col.filterFn instanceof Function
@@ -81,9 +88,13 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
         })),
       ),
     );
-  const [columnOrder, setColumnOrder] = useState<MRT_ColumnOrderState>(
+  const [columnOrder, onColumnOrderChange] = useState<MRT_ColumnOrderState>(
     initialState.columnOrder ?? [],
   );
+  const [columnSizingInfo, onColumnSizingInfoChange] =
+    useState<MRT_ColumnSizingInfoState>(
+      initialState.columnSizingInfo ?? ({} as MRT_ColumnSizingInfoState),
+    );
   const [density, setDensity] = useState<MRT_DensityState>(
     initialState?.density ?? 'comfortable',
   );
@@ -101,7 +112,7 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
   const [globalFilterFn, setGlobalFilterFn] = useState<MRT_FilterOption>(
     initialState.globalFilterFn ?? 'fuzzy',
   );
-  const [grouping, setGrouping] = useState<MRT_GroupingState>(
+  const [grouping, onGroupingChange] = useState<MRT_GroupingState>(
     initialState.grouping ?? [],
   );
   const [hoveredColumn, setHoveredColumn] = useState<Partial<
@@ -113,8 +124,11 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
   const [isFullScreen, setIsFullScreen] = useState<boolean>(
     initialState?.isFullScreen ?? false,
   );
+  const [pagination, onPaginationChange] = useState<MRT_PaginationState>(
+    initialState?.pagination ?? { pageIndex: 0, pageSize: 10 },
+  );
   const [showAlertBanner, setShowAlertBanner] = useState<boolean>(
-    tableOptions.initialState?.showAlertBanner ?? false,
+    initialState?.showAlertBanner ?? false,
   );
   const [showColumnFilters, setShowColumnFilters] = useState<boolean>(
     initialState?.showColumnFilters ?? false,
@@ -126,41 +140,55 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
     initialState?.showToolbarDropZone ?? false,
   );
 
-  const displayColumns = useMRT_DisplayColumns({
+  _tableOptions.state = {
+    columnFilterFns,
     columnOrder,
+    columnSizingInfo,
     creatingRow,
+    density,
+    draggingColumn,
+    draggingRow,
+    editingCell,
+    editingRow,
+    globalFilterFn,
     grouping,
-    tableOptions,
-  });
+    hoveredColumn,
+    hoveredRow,
+    isFullScreen,
+    pagination,
+    showAlertBanner,
+    showColumnFilters,
+    showGlobalFilter,
+    showToolbarDropZone,
+    ..._tableOptions.state,
+  };
 
-  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 tableOptions = _tableOptions as MRT_StatefulTableOptions<TData>;
+
+  //don't recompute columnDefs while resizing column or dragging column/row
+  const columnDefsRef = useRef<MRT_ColumnDef<TData>[]>([]);
+  tableOptions.columns =
+    tableOptions.state.columnSizingInfo.isResizingColumn ||
+    tableOptions.state.draggingColumn ||
+    tableOptions.state.draggingRow
+      ? columnDefsRef.current
+      : prepareColumns({
+          columnDefs: [
+            ...getMRT_DisplayColumns(tableOptions),
+            ...tableOptions.columns,
+          ],
+          tableOptions,
+        });
+  columnDefsRef.current = tableOptions.columns;
 
-  const data: TData[] = useMemo(
+  tableOptions.data = useMemo(
     () =>
-      (tableOptions.state?.isLoading || tableOptions.state?.showSkeletons) &&
+      (tableOptions.state.isLoading || tableOptions.state.showSkeletons) &&
       !tableOptions.data.length
         ? [
-            ...Array(
-              tableOptions.state?.pagination?.pageSize ||
-                initialState?.pagination?.pageSize ||
-                10,
-            ).fill(null),
+            ...Array(Math.min(tableOptions.state.pagination.pageSize, 20)).fill(
+              null,
+            ),
           ].map(() =>
             Object.assign(
               {},
@@ -172,8 +200,8 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
         : tableOptions.data,
     [
       tableOptions.data,
-      tableOptions.state?.isLoading,
-      tableOptions.state?.showSkeletons,
+      tableOptions.state.isLoading,
+      tableOptions.state.showSkeletons,
     ],
   );
 
@@ -209,58 +237,36 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
       ? getSortedRowModel()
       : undefined,
     getSubRows: (row) => row?.subRows,
-    onColumnOrderChange: setColumnOrder,
-    onGroupingChange: setGrouping,
+    onColumnOrderChange,
+    onColumnSizingInfoChange,
+    onGroupingChange,
+    onPaginationChange,
     ...tableOptions,
-    //@ts-ignore
-    columns: columnDefs,
-    data,
     globalFilterFn: tableOptions.filterFns?.[globalFilterFn ?? 'fuzzy'],
-    initialState,
-    state: {
-      columnFilterFns,
-      columnOrder,
-      creatingRow,
-      density,
-      draggingColumn,
-      draggingRow,
-      editingCell,
-      editingRow,
-      globalFilterFn,
-      grouping,
-      hoveredColumn,
-      hoveredRow,
-      isFullScreen,
-      showAlertBanner,
-      showColumnFilters,
-      showGlobalFilter,
-      showToolbarDropZone,
-      ...tableOptions.state,
-    },
   }) as MRT_TableInstance<TData>;
 
-  // @ts-ignore
+  //@ts-ignore
   table.refs = {
-    // @ts-ignore
+    //@ts-ignore
     bottomToolbarRef,
     editInputRefs,
     filterInputRefs,
-    // @ts-ignore
+    //@ts-ignore
     searchInputRef,
-    // @ts-ignore
+    //@ts-ignore
     tableContainerRef,
-    // @ts-ignore
+    //@ts-ignore
     tableFooterRef,
     tableHeadCellRefs,
-    // @ts-ignore
+    //@ts-ignore
     tableHeadRef,
-    // @ts-ignore
+    //@ts-ignore
     tablePaperRef,
-    // @ts-ignore
+    //@ts-ignore
     topToolbarRef,
   };
 
-  const setCreatingRow = (row: MRT_Updater<MRT_Row<TData> | null | true>) => {
+  table.setCreatingRow = (row: MRT_Updater<MRT_Row<TData> | null | true>) => {
     let _row = row;
     if (row === true) {
       _row = createRow(table);
@@ -268,8 +274,6 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
     tableOptions?.onCreatingRowChange?.(_row as MRT_Row<TData> | null) ??
       _setCreatingRow(_row as MRT_Row<TData> | null);
   };
-
-  table.setCreatingRow = setCreatingRow;
   table.setColumnFilterFns =
     tableOptions.onColumnFilterFnsChange ?? setColumnFilterFns;
   table.setDensity = tableOptions.onDensityChange ?? setDensity;

package/src/hooks/useMRT_TableOptions.ts

@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
 import { useTheme } from '@mui/material/styles';
-import { MRT_AggregationFns } from '../aggregationFns';
-import { MRT_FilterFns } from '../filterFns';
+import { MRT_AggregationFns } from '../fns/aggregationFns';
+import { MRT_FilterFns } from '../fns/filterFns';
+import { MRT_SortingFns } from '../fns/sortingFns';
 import { MRT_Default_Icons } from '../icons';
 import { MRT_Localization_EN } from '../locales/en';
-import { MRT_SortingFns } from '../sortingFns';
 import {
   type MRT_DefinedTableOptions,
   type MRT_RowData,
@@ -83,6 +83,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   manualSorting,
   paginationDisplayMode = 'default',
   positionActionsColumn = 'first',
+  positionCreatingRow = 'top',
   positionExpandColumn = 'first',
   positionGlobalFilter = 'right',
   positionPagination = 'bottom',
@@ -197,6 +198,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     manualSorting,
     paginationDisplayMode,
     positionActionsColumn,
+    positionCreatingRow,
     positionExpandColumn,
     positionGlobalFilter,
     positionPagination,

package/src/{useMaterialReactTable.ts → hooks/useMaterialReactTable.ts}

@@ -1,10 +1,10 @@
-import { useMRT_TableInstance } from './hooks/useMRT_TableInstance';
-import { useMRT_TableOptions } from './hooks/useMRT_TableOptions';
 import {
   type MRT_RowData,
   type MRT_TableInstance,
   type MRT_TableOptions,
-} from './types';
+} from '../types';
+import { useMRT_TableInstance } from './useMRT_TableInstance';
+import { useMRT_TableOptions } from './useMRT_TableOptions';
 
 export const useMaterialReactTable = <TData extends MRT_RowData>(
   tableOptions: MRT_TableOptions<TData>,

package/src/icons.ts

@@ -32,43 +32,7 @@ import SyncAltIcon from '@mui/icons-material/SyncAlt';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 
-export interface MRT_Icons {
-  ArrowDownwardIcon: any;
-  ArrowRightIcon: any;
-  CancelIcon: any;
-  ChevronLeftIcon: any;
-  ChevronRightIcon: any;
-  ClearAllIcon: any;
-  CloseIcon: any;
-  DensityLargeIcon: any;
-  DensityMediumIcon: any;
-  DensitySmallIcon: any;
-  DragHandleIcon: any;
-  DynamicFeedIcon: any;
-  EditIcon: any;
-  ExpandMoreIcon: any;
-  FilterAltIcon: any;
-  FilterListIcon: any;
-  FilterListOffIcon: any;
-  FirstPageIcon?: any;
-  FullscreenExitIcon: any;
-  FullscreenIcon: any;
-  KeyboardDoubleArrowDownIcon: any;
-  LastPageIcon?: any;
-  MoreHorizIcon: any;
-  MoreVertIcon: any;
-  PushPinIcon: any;
-  RestartAltIcon: any;
-  SaveIcon: any;
-  SearchIcon: any;
-  SearchOffIcon: any;
-  SortIcon: any;
-  SyncAltIcon?: any;
-  ViewColumnIcon: any;
-  VisibilityOffIcon: any;
-}
-
-export const MRT_Default_Icons: MRT_Icons = {
+export const MRT_Default_Icons = {
   ArrowDownwardIcon,
   ArrowRightIcon,
   CancelIcon,
@@ -102,4 +66,6 @@ export const MRT_Default_Icons: MRT_Icons = {
   SyncAltIcon,
   ViewColumnIcon,
   VisibilityOffIcon,
-};
+} as const;
+
+export type MRT_Icons = Record<keyof typeof MRT_Default_Icons, any>;

package/src/index.ts

@@ -1,18 +1,89 @@
-export * from './MaterialReactTable';
-export * from './aggregationFns';
-export * from './body';
-export * from './buttons';
-export * from './column.utils';
-export * from './filterFns';
-export * from './footer';
-export * from './head';
-export * from './hooks';
-export * from './inputs';
-export * from './menus';
-export * from './modals';
-export * from './sortingFns';
-export * from './style.utils';
-export * from './table';
-export * from './toolbar';
 export * from './types';
-export * from './useMaterialReactTable';
+
+//helpers
+export * from './utils/tanstack.helpers';
+export * from './utils/column.utils';
+export * from './utils/displayColumn.utils';
+export * from './utils/row.utils';
+
+//fns
+export * from './fns/aggregationFns';
+export * from './fns/filterFns';
+export * from './fns/sortingFns';
+
+//hooks
+export * from './hooks/useMaterialReactTable';
+export * from './hooks/useMRT_ColumnVirtualizer';
+export * from './hooks/useMRT_Effects';
+export * from './hooks/useMRT_RowVirtualizer';
+export * from './hooks/useMRT_Rows';
+export * from './hooks/useMRT_TableInstance';
+export * from './hooks/useMRT_TableOptions';
+
+//components
+export * from './components/MaterialReactTable';
+//body components
+export * from './components/body/MRT_TableBody';
+export * from './components/body/MRT_TableBodyCell';
+export * from './components/body/MRT_TableBodyCellValue';
+export * from './components/body/MRT_TableBodyRow';
+export * from './components/body/MRT_TableBodyRowGrabHandle';
+export * from './components/body/MRT_TableBodyRowPinButton';
+export * from './components/body/MRT_TableDetailPanel';
+//button components
+export * from './components/buttons/MRT_ColumnPinningButtons';
+export * from './components/buttons/MRT_CopyButton';
+export * from './components/buttons/MRT_EditActionButtons';
+export * from './components/buttons/MRT_ExpandAllButton';
+export * from './components/buttons/MRT_ExpandButton';
+export * from './components/buttons/MRT_GrabHandleButton';
+export * from './components/buttons/MRT_RowPinButton';
+export * from './components/buttons/MRT_ShowHideColumnsButton';
+export * from './components/buttons/MRT_ToggleDensePaddingButton';
+export * from './components/buttons/MRT_ToggleFiltersButton';
+export * from './components/buttons/MRT_ToggleFullScreenButton';
+export * from './components/buttons/MRT_ToggleGlobalFilterButton';
+export * from './components/buttons/MRT_ToggleRowActionMenuButton';
+//footer components
+export * from './components/footer/MRT_TableFooter';
+export * from './components/footer/MRT_TableFooterCell';
+export * from './components/footer/MRT_TableFooterRow';
+//head components
+export * from './components/head/MRT_TableHead';
+export * from './components/head/MRT_TableHeadCell';
+export * from './components/head/MRT_TableHeadCellColumnActionsButton';
+export * from './components/head/MRT_TableHeadCellFilterContainer';
+export * from './components/head/MRT_TableHeadCellFilterLabel';
+export * from './components/head/MRT_TableHeadCellGrabHandle';
+export * from './components/head/MRT_TableHeadCellResizeHandle';
+export * from './components/head/MRT_TableHeadCellSortLabel';
+export * from './components/head/MRT_TableHeadRow';
+//input components
+export * from './components/inputs/MRT_EditCellTextField';
+export * from './components/inputs/MRT_FilterCheckbox';
+export * from './components/inputs/MRT_FilterRangeFields';
+export * from './components/inputs/MRT_FilterRangeSlider';
+export * from './components/inputs/MRT_FilterTextField';
+export * from './components/inputs/MRT_GlobalFilterTextField';
+export * from './components/inputs/MRT_SelectCheckbox';
+//menu components
+export * from './components/menus/MRT_ColumnActionMenu';
+export * from './components/menus/MRT_FilterOptionMenu';
+export * from './components/menus/MRT_RowActionMenu';
+export * from './components/menus/MRT_ShowHideColumnsMenu';
+export * from './components/menus/MRT_ShowHideColumnsMenuItems';
+//modal components
+export * from './components/modals/MRT_EditRowModal';
+//table components
+export * from './components/table/MRT_Table';
+export * from './components/table/MRT_TableContainer';
+export * from './components/table/MRT_TableLoadingOverlay';
+export * from './components/table/MRT_TablePaper';
+//toolbar components
+export * from './components/toolbar/MRT_BottomToolbar';
+export * from './components/toolbar/MRT_LinearProgressBar';
+export * from './components/toolbar/MRT_TablePagination';
+export * from './components/toolbar/MRT_ToolbarAlertBanner';
+export * from './components/toolbar/MRT_ToolbarDropZone';
+export * from './components/toolbar/MRT_ToolbarInternalButtons';
+export * from './components/toolbar/MRT_TopToolbar';