material-react-table 2.13.1 → 2.13.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.13.1",
+  "version": "2.13.2",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -62,7 +62,7 @@
     "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@emotion/react": "^11.13.0",
+    "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@faker-js/faker": "^8.4.1",
     "@mui/icons-material": "^5.16.5",
@@ -70,23 +70,23 @@
     "@mui/x-date-pickers": "^7.11.1",
     "@rollup/plugin-typescript": "^11.1.6",
     "@size-limit/preset-small-lib": "^11.1.4",
-    "@storybook/addon-a11y": "^8.2.6",
-    "@storybook/addon-essentials": "^8.2.6",
-    "@storybook/addon-links": "^8.2.6",
-    "@storybook/addon-storysource": "^8.2.6",
-    "@storybook/blocks": "^8.2.6",
-    "@storybook/preview-api": "^8.2.6",
-    "@storybook/react": "^8.2.6",
-    "@storybook/react-vite": "^8.2.6",
-    "@types/node": "^22.0.0",
-    "@types/react": "^18.3.3",
+    "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-storysource": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/preview-api": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@types/node": "^22.5.1",
+    "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^7.17.0",
+    "@typescript-eslint/eslint-plugin": "^8.3.0",
+    "@typescript-eslint/parser": "^8.3.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^9.8.0",
+    "eslint": "^9.9.1",
     "eslint-plugin-mui-path-imports": "^0.0.15",
-    "eslint-plugin-perfectionist": "^3.0.0",
+    "eslint-plugin-perfectionist": "^3.3.0",
     "eslint-plugin-storybook": "^0.8.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
@@ -98,11 +98,11 @@
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^11.1.4",
-    "storybook": "^8.2.6",
+    "storybook": "^8.2.9",
     "storybook-dark-mode": "^4.0.2",
-    "tslib": "^2.6.3",
+    "tslib": "^2.7.0",
     "typescript": "^5.5.4",
-    "vite": "^5.3.5"
+    "vite": "^5.4.2"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11",
@@ -114,9 +114,9 @@
     "react-dom": ">=17.0"
   },
   "dependencies": {
-    "@tanstack/match-sorter-utils": "8.15.1",
-    "@tanstack/react-table": "8.19.3",
-    "@tanstack/react-virtual": "3.8.3",
+    "@tanstack/match-sorter-utils": "8.19.4",
+    "@tanstack/react-table": "8.20.5",
+    "@tanstack/react-virtual": "3.10.6",
     "highlight-words": "1.2.2"
   }
 }

package/src/components/body/MRT_TableBody.tsx

@@ -172,7 +172,7 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
                   rowVirtualizer,
                   staticRowIndex,
                   virtualRow: rowVirtualizer
-                    ? (rowOrVirtualRow as VirtualItem<HTMLTableRowElement>)
+                    ? (rowOrVirtualRow as VirtualItem)
                     : undefined,
                 };
                 const key = `${row.id}-${row.index}`;

package/src/components/body/MRT_TableBodyCell.tsx

@@ -287,7 +287,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       {tableCellProps.children ?? (
         <>
           {cell.getIsPlaceholder() ? (
-            columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null
+            (columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null)
           ) : showSkeletons !== false && (isLoading || showSkeletons) ? (
             <Skeleton
               animation="wave"

package/src/components/body/MRT_TableBodyRow.tsx

@@ -35,7 +35,7 @@ export interface MRT_TableBodyRowProps<TData extends MRT_RowData>
   rowVirtualizer?: MRT_RowVirtualizer;
   staticRowIndex: number;
   table: MRT_TableInstance<TData>;
-  virtualRow?: VirtualItem<HTMLTableRowElement>;
+  virtualRow?: VirtualItem;
 }
 
 export const MRT_TableBodyRow = <TData extends MRT_RowData>({

package/src/components/body/MRT_TableDetailPanel.tsx

@@ -18,7 +18,7 @@ export interface MRT_TableDetailPanelProps<TData extends MRT_RowData>
   rowVirtualizer?: MRT_RowVirtualizer;
   staticRowIndex: number;
   table: MRT_TableInstance<TData>;
-  virtualRow?: MRT_VirtualItem<HTMLTableRowElement>;
+  virtualRow?: MRT_VirtualItem;
 }
 
 export const MRT_TableDetailPanel = <TData extends MRT_RowData>({

package/src/components/footer/MRT_TableFooterCell.tsx

@@ -79,13 +79,13 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
       {tableCellProps.children ??
         (footer.isPlaceholder
           ? null
-          : parseFromValuesOrFunc(columnDef.Footer, {
+          : (parseFromValuesOrFunc(columnDef.Footer, {
               column,
               footer,
               table,
             }) ??
             columnDef.footer ??
-            null)}
+            null))}
     </TableCell>
   );
 };

package/src/components/head/MRT_TableHeadCell.tsx

@@ -163,9 +163,18 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
             ? 'right'
             : 'left'
       }
+      aria-sort={
+        column.getIsSorted()
+          ? column.getIsSorted() === 'asc'
+            ? 'ascending'
+            : 'descending'
+          : 'none'
+      }
       colSpan={header.colSpan}
+      data-can-sort={column.getCanSort() || undefined}
       data-index={staticColumnIndex}
       data-pinned={!!isColumnPinned || undefined}
+      data-sort={column.getIsSorted() || undefined}
       onDragEnter={handleDragEnter}
       onDragOver={handleDragOver}
       ref={(node: HTMLTableCellElement) => {
@@ -222,7 +231,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     >
       {header.isPlaceholder
         ? null
-        : tableCellProps.children ?? (
+        : (tableCellProps.children ?? (
             <Box
               className="Mui-TableHeadCell-Content"
               sx={{
@@ -312,7 +321,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
                 <MRT_TableHeadCellResizeHandle header={header} table={table} />
               )}
             </Box>
-          )}
+          ))}
       {columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (
         <MRT_TableHeadCellFilterContainer header={header} table={table} />
       )}

package/src/components/inputs/MRT_EditCellTextField.tsx

@@ -42,6 +42,7 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
   const isEditing = editingRow?.id === row.id;
 
   const [value, setValue] = useState(() => cell.getValue<string>());
+  const [completesComposition, setCompletesComposition] = useState(true);
 
   const textFieldProps: TextFieldProps = {
     ...parseFromValuesOrFunc(muiEditTextFieldProps, {
@@ -94,7 +95,7 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
 
   const handleEnterKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     textFieldProps.onKeyDown?.(event);
-    if (event.key === 'Enter' && !event.shiftKey) {
+    if (event.key === 'Enter' && !event.shiftKey && completesComposition) {
       editInputRefs.current[column.id]?.blur();
     }
   };
@@ -164,6 +165,8 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
         textFieldProps?.onClick?.(e);
       }}
       onKeyDown={handleEnterKeyDown}
+      onCompositionStart={() => setCompletesComposition(false)}
+      onCompositionEnd={() => setCompletesComposition(true)}
     >
       {textFieldProps.children ??
         selectOptions?.map((option) => {

package/src/components/inputs/MRT_FilterRangeSlider.tsx

@@ -41,7 +41,7 @@ export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
   let [min, max] =
     sliderProps.min !== undefined && sliderProps.max !== undefined
       ? [sliderProps.min, sliderProps.max]
-      : column.getFacetedMinMaxValues() ?? [0, 1];
+      : (column.getFacetedMinMaxValues() ?? [0, 1]);
 
   //fix potential TanStack Table bugs where min or max is an array
   if (Array.isArray(min)) min = min[0];

package/src/components/inputs/MRT_FilterTextField.tsx

@@ -117,8 +117,11 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     : '';
 
   const filterPlaceholder = !isRangeFilter
-    ? textFieldProps?.placeholder ??
-      localization.filterByColumn?.replace('{column}', String(columnDef.header))
+    ? (textFieldProps?.placeholder ??
+      localization.filterByColumn?.replace(
+        '{column}',
+        String(columnDef.header),
+      ))
     : rangeFilterIndex === 0
       ? localization.min
       : rangeFilterIndex === 1
@@ -141,7 +144,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         ? (column.getFilterValue() as [string, string])?.[
             rangeFilterIndex as number
           ] || ''
-        : (column.getFilterValue() as string) ?? '',
+        : ((column.getFilterValue() as string) ?? ''),
   );
   const [autocompleteValue, setAutocompleteValue] =
     useState<DropdownOption | null>(

package/src/components/menus/MRT_FilterOptionMenu.tsx

@@ -254,7 +254,7 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
       {...rest}
     >
       {(header && column && columnDef
-        ? columnDef.renderColumnFilterModeMenuItems?.({
+        ? (columnDef.renderColumnFilterModeMenuItems?.({
             column: column as any,
             internalFilterOptions,
             onSelectFilterMode: handleSelectFilterMode,
@@ -265,7 +265,7 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
             internalFilterOptions,
             onSelectFilterMode: handleSelectFilterMode,
             table,
-          })
+          }))
         : renderGlobalFilterModeMenuItems?.({
             internalFilterOptions,
             onSelectFilterMode: handleSelectFilterMode,

package/src/components/table/MRT_TableContainer.tsx

@@ -56,12 +56,12 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
   useIsomorphicLayoutEffect(() => {
     const topToolbarHeight =
       typeof document !== 'undefined'
-        ? topToolbarRef.current?.offsetHeight ?? 0
+        ? (topToolbarRef.current?.offsetHeight ?? 0)
         : 0;
 
     const bottomToolbarHeight =
       typeof document !== 'undefined'
-        ? bottomToolbarRef?.current?.offsetHeight ?? 0
+        ? (bottomToolbarRef?.current?.offsetHeight ?? 0)
         : 0;
 
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);

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

@@ -79,7 +79,7 @@ export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
       id: 'mrt-row-expand',
       size:
         groupedColumnMode === 'remove'
-          ? defaultColumn?.size ?? 180
+          ? (defaultColumn?.size ?? 180)
           : renderDetailPanel
             ? enableExpandAll
               ? 60

package/src/hooks/useMRT_TableInstance.ts

@@ -99,10 +99,10 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
         ).map((col) => ({
           [getColumnId(col)]:
             col.filterFn instanceof Function
-              ? col.filterFn.name ?? 'custom'
-              : col.filterFn ??
+              ? (col.filterFn.name ?? 'custom')
+              : (col.filterFn ??
                 initialState?.columnFilterFns?.[getColumnId(col)] ??
-                getDefaultColumnFilterFn(col),
+                getDefaultColumnFilterFn(col)),
         })),
       ),
     );

package/src/types.ts

@@ -114,7 +114,7 @@ export type MRT_PaginationState = PaginationState;
 export type MRT_RowSelectionState = RowSelectionState;
 export type MRT_SortingState = SortingState;
 export type MRT_Updater<T> = Updater<T>;
-export type MRT_VirtualItem<T extends Element = Element> = VirtualItem<T>;
+export type MRT_VirtualItem = VirtualItem;
 export type MRT_VisibilityState = VisibilityState;
 
 export type MRT_VirtualizerOptions<