material-react-table 3.0.3 → 3.1.0

package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -24,7 +24,7 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
 }: MRT_ToolbarAlertBannerProps<TData>) => {
   const {
     getFilteredSelectedRowModel,
-    getPrePaginationRowModel,
+    getCoreRowModel,
     getState,
     options: {
       enableRowSelection,
@@ -52,7 +52,7 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
     table,
   });
 
-  const totalRowCount = rowCount ?? getPrePaginationRowModel().flatRows.length;
+  const totalRowCount = rowCount ?? getCoreRowModel().rows.length;
 
   const selectedRowCount = useMemo(
     () =>

package/src/components/toolbar/MRT_TopToolbar.tsx

@@ -60,7 +60,7 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
       ref={(ref: HTMLDivElement) => {
         topToolbarRef.current = ref;
         if (toolbarProps?.ref) {
-          // @ts-ignore
+          // @ts-expect-error
           toolbarProps.ref.current = ref;
         }
       }}

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

@@ -14,7 +14,7 @@ export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
     Cell: ({ row, rowRef, table }) => (
       <MRT_TableBodyRowGrabHandle
         row={row}
-        rowRef={rowRef as RefObject<HTMLTableRowElement>}
+        rowRef={rowRef as RefObject<HTMLTableRowElement | null>}
         table={table}
       />
     ),

package/src/hooks/useMRT_ColumnVirtualizer.ts

@@ -116,7 +116,7 @@ export const useMRT_ColumnVirtualizer = <
   }
 
   if (columnVirtualizerInstanceRef) {
-    //@ts-ignore
+    //@ts-expect-error
     columnVirtualizerInstanceRef.current = columnVirtualizer;
   }
 

package/src/hooks/useMRT_Effects.ts

@@ -31,8 +31,8 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
   const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
 
   const rerender = useReducer(() => ({}), {})[1];
-  const initialBodyHeight = useRef<string>();
-  const previousTop = useRef<number>();
+  const initialBodyHeight = useRef<string>(null);
+  const previousTop = useRef<number>(null);
 
   useEffect(() => {
     if (typeof window !== 'undefined') {

package/src/hooks/useMRT_RowVirtualizer.ts

@@ -68,7 +68,7 @@ export const useMRT_RowVirtualizer = <
   rowVirtualizer.virtualRows = rowVirtualizer.getVirtualItems() as any;
 
   if (rowVirtualizerInstanceRef) {
-    //@ts-ignore
+    //@ts-expect-error
     rowVirtualizerInstanceRef.current = rowVirtualizer;
   }
 

package/src/hooks/useMRT_TableInstance.ts

@@ -247,7 +247,7 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
     ],
   );
 
-  //@ts-ignore
+  //@ts-expect-error
   const table = useReactTable({
     onColumnOrderChange,
     onColumnSizingInfoChange,

package/src/types.ts

@@ -1,6 +1,5 @@
 import {
   type Dispatch,
-  type MutableRefObject,
   type ReactNode,
   type RefObject,
   type SetStateAction,
@@ -308,18 +307,18 @@ export type MRT_TableInstance<TData extends MRT_RowData> = Omit<
   getTopRows: () => MRT_Row<TData>[];
   options: MRT_StatefulTableOptions<TData>;
   refs: {
-    actionCellRef: MutableRefObject<HTMLTableCellElement | null>;
-    bottomToolbarRef: MutableRefObject<HTMLDivElement | null>;
-    editInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
-    filterInputRefs: MutableRefObject<Record<string, HTMLInputElement>>;
-    lastSelectedRowId: MutableRefObject<null | string>;
-    searchInputRef: MutableRefObject<HTMLInputElement | null>;
-    tableContainerRef: MutableRefObject<HTMLDivElement | null>;
-    tableFooterRef: MutableRefObject<HTMLTableSectionElement | null>;
-    tableHeadCellRefs: MutableRefObject<Record<string, HTMLTableCellElement>>;
-    tableHeadRef: MutableRefObject<HTMLTableSectionElement | null>;
-    tablePaperRef: MutableRefObject<HTMLDivElement | null>;
-    topToolbarRef: MutableRefObject<HTMLDivElement | null>;
+    actionCellRef: RefObject<HTMLTableCellElement | null>;
+    bottomToolbarRef: RefObject<HTMLDivElement | null>;
+    editInputRefs: RefObject<Record<string, HTMLInputElement> | null>;
+    filterInputRefs: RefObject<Record<string, HTMLInputElement> | null>;
+    lastSelectedRowId: RefObject<null | string>;
+    searchInputRef: RefObject<HTMLInputElement | null>;
+    tableContainerRef: RefObject<HTMLDivElement | null>;
+    tableFooterRef: RefObject<HTMLTableSectionElement | null>;
+    tableHeadCellRefs: RefObject<Record<string, HTMLTableCellElement> | null>;
+    tableHeadRef: RefObject<HTMLTableSectionElement | null>;
+    tablePaperRef: RefObject<HTMLDivElement | null>;
+    topToolbarRef: RefObject<HTMLDivElement | null>;
   };
   setActionCell: Dispatch<SetStateAction<MRT_Cell<TData> | null>>;
   setColumnFilterFns: Dispatch<SetStateAction<MRT_ColumnFilterFnsState>>;
@@ -442,7 +441,7 @@ export interface MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown>
     column: MRT_Column<TData, TValue>;
     renderedCellValue: ReactNode;
     row: MRT_Row<TData>;
-    rowRef?: RefObject<HTMLTableRowElement>;
+    rowRef?: RefObject<HTMLTableRowElement | null>;
     staticColumnIndex?: number;
     staticRowIndex?: number;
     table: MRT_TableInstance<TData>;
@@ -824,7 +823,7 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
    * @link https://www.material-react-table.com/docs/api/column-options
    */
   columns: MRT_ColumnDef<TData, any>[];
-  columnVirtualizerInstanceRef?: MutableRefObject<MRT_ColumnVirtualizer | null>;
+  columnVirtualizerInstanceRef?: RefObject<MRT_ColumnVirtualizer | null>;
   columnVirtualizerOptions?:
     | ((props: {
         table: MRT_TableInstance<TData>;
@@ -923,27 +922,18 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
         table: MRT_TableInstance<TData>;
       }) => CircularProgressProps & { Component?: ReactNode })
     | (CircularProgressProps & { Component?: ReactNode });
-  /**
-   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
-   */
   muiColumnActionsButtonProps?:
     | ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
       }) => IconButtonProps)
     | IconButtonProps;
-  /**
-   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
-   */
   muiColumnDragHandleProps?:
     | ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
       }) => IconButtonProps)
     | IconButtonProps;
-  /**
-   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
-   */
   muiCopyButtonProps?:
     | ((props: {
         cell: MRT_Cell<TData>;
@@ -970,9 +960,6 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
         table: MRT_TableInstance<TData>;
       }) => DialogProps)
     | DialogProps;
-  /**
-   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
-   */
   muiEditTextFieldProps?:
     | ((props: {
         cell: MRT_Cell<TData>;
@@ -991,27 +978,18 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
         table: MRT_TableInstance<TData>;
       }) => IconButtonProps)
     | IconButtonProps;
-  /**
-   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
-   */
   muiFilterAutocompleteProps?:
     | ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
       }) => AutocompleteProps<any, any, any, any>)
     | AutocompleteProps<any, any, any, any>;
-  /**
-   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
-   */
   muiFilterCheckboxProps?:
     | ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
       }) => CheckboxProps)
     | CheckboxProps;
-  /**
-   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
-   */
   muiFilterDatePickerProps?:
     | ((props: {
         column: MRT_Column<TData>;
@@ -1019,9 +997,6 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
         table: MRT_TableInstance<TData>;
       }) => DatePickerProps<never>)
     | DatePickerProps<never>;
-  /**
-   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
-   */
   muiFilterDateTimePickerProps?:
     | ((props: {
         column: MRT_Column<TData>;
@@ -1029,18 +1004,12 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
         table: MRT_TableInstance<TData>;
       }) => DateTimePickerProps<never>)
     | DateTimePickerProps<never>;
-  /**
-   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
-   */
   muiFilterSliderProps?:
     | ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
       }) => SliderProps)
     | SliderProps;
-  /**
-   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
-   */
   muiFilterTextFieldProps?:
     | ((props: {
         column: MRT_Column<TData>;
@@ -1048,9 +1017,6 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
         table: MRT_TableInstance<TData>;
       }) => TextFieldProps)
     | TextFieldProps;
-  /**
-   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
-   */
   muiFilterTimePickerProps?:
     | ((props: {
         column: MRT_Column<TData>;
@@ -1108,9 +1074,6 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
         table: MRT_TableInstance<TData>;
       }) => SkeletonProps)
     | SkeletonProps;
-  /**
-   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
-   */
   muiTableBodyCellProps?:
     | ((props: {
         cell: MRT_Cell<TData>;
@@ -1133,9 +1096,6 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
   muiTableContainerProps?:
     | ((props: { table: MRT_TableInstance<TData> }) => TableContainerProps)
     | TableContainerProps;
-  /**
-   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
-   */
   muiTableFooterCellProps?:
     | ((props: {
         column: MRT_Column<TData>;
@@ -1151,9 +1111,6 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
         table: MRT_TableInstance<TData>;
       }) => TableRowProps)
     | TableRowProps;
-  /**
-   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
-   */
   muiTableHeadCellProps?:
     | ((props: {
         column: MRT_Column<TData>;
@@ -1237,9 +1194,6 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
   renderCaption?:
     | ((props: { table: MRT_TableInstance<TData> }) => ReactNode)
     | ReactNode;
-  /**
-   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
-   */
   renderCellActionMenuItems?: (props: {
     cell: MRT_Cell<TData>;
     closeMenu: () => void;
@@ -1250,18 +1204,12 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
     staticRowIndex?: number;
     table: MRT_TableInstance<TData>;
   }) => ReactNode[];
-  /**
-   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
-   */
   renderColumnActionsMenuItems?: (props: {
     closeMenu: () => void;
     column: MRT_Column<TData>;
     internalColumnMenuItems: ReactNode[];
     table: MRT_TableInstance<TData>;
   }) => ReactNode[];
-  /**
-   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
-   */
   renderColumnFilterModeMenuItems?: (props: {
     column: MRT_Column<TData>;
     internalFilterOptions: MRT_InternalFilterOption[];
@@ -1325,7 +1273,7 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
     | 'sticky'
     | 'top'
     | 'top-and-bottom';
-  rowVirtualizerInstanceRef?: MutableRefObject<MRT_RowVirtualizer | null>;
+  rowVirtualizerInstanceRef?: RefObject<MRT_RowVirtualizer | null>;
   rowVirtualizerOptions?:
     | ((props: {
         table: MRT_TableInstance<TData>;

package/src/utils/cell.utils.ts

@@ -52,7 +52,7 @@ export const openEditingCell = <TData extends MRT_RowData>({
   if (isCellEditable({ cell, table }) && editDisplayMode === 'cell') {
     table.setEditingCell(cell);
     queueMicrotask(() => {
-      const textField = editInputRefs.current[column.id];
+      const textField = editInputRefs.current?.[column.id];
       if (textField) {
         textField.focus();
         textField.select?.();
@@ -92,7 +92,7 @@ export const cellKeyboardShortcuts = <TData extends MRT_RowData = MRT_RowData>({
       getMRT_RowSelectionHandler({
         row: cell.row,
         table,
-        //@ts-ignore
+        //@ts-expect-error
         staticRowIndex: +event.target.getAttribute('data-index'),
       })(event as any);
     } else if (

package/src/utils/column.utils.ts

@@ -85,7 +85,7 @@ export const prepareColumns = <TData extends MRT_RowData>({
 
       //assign sortingFns
       if (Object.keys(sortingFns).includes(columnDef.sortingFn as string)) {
-        // @ts-ignore
+        // @ts-expect-error
         columnDef.sortingFn = sortingFns[columnDef.sortingFn];
       }
     } else if (columnDef.columnDefType === 'display') {

package/src/utils/tanstack.helpers.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ReactNode, type JSX } from 'react';
 import {
   createRow as _createRow,
   flexRender as _flexRender,