material-react-table 3.0.3 → 3.2.0

package/src/types.ts

@@ -1,6 +1,5 @@
 import {
   type Dispatch,
-  type MutableRefObject,
   type ReactNode,
   type RefObject,
   type SetStateAction,
@@ -151,6 +150,8 @@ export type MRT_ColumnHelper<TData extends MRT_RowData> = {
 };
 
 export interface MRT_Localization {
+  // language of the localization as BCP 47 language tag for number formatting
+  language: string;
   actions: string;
   and: string;
   cancel: string;
@@ -308,18 +309,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 +443,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 +825,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 +924,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 +962,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 +980,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 +999,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 +1006,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 +1019,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 +1076,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 +1098,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 +1113,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 +1196,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 +1206,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 +1275,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,

package/src/utils/virtualization.utils.ts

@@ -1,5 +1,10 @@
 import { type Range, defaultRangeExtractor } from '@tanstack/react-virtual';
 
+/**
+ * When scroll, the `draggingRow` or `draggingColumn` can be removed from document because of virtualization,
+ * then, the `dragEnd` event on `MRT_TableBodyRowGrabHandle` or `MRT_TableHeadCellGrabHandle` will not fire.
+ * We should keep the `draggingRow` or `draggingColumn` in `getVirtualItems()` to avoid this thing.
+ */
 export const extraIndexRangeExtractor = (
   range: Range,
   draggingIndex?: number,