material-react-table 2.0.4 → 2.0.5

package/dist/types/useMaterialReactTable.d.ts

@@ -0,0 +1,2 @@
+import { type MRT_RowData, type MRT_TableInstance, type MRT_TableOptions } from './types';
+export declare const useMaterialReactTable: <TData extends MRT_RowData>(tableOptions: MRT_TableOptions<TData>) => MRT_TableInstance<TData>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.4",
+  "version": "2.0.5",
   "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.",
@@ -35,11 +35,11 @@
   "size-limit": [
     {
       "path": "dist/index.js",
-      "limit": "59 KB"
+      "limit": "53 KB"
     },
     {
       "path": "dist/index.esm.js",
-      "limit": "55 KB"
+      "limit": "50 KB"
     }
   ],
   "engines": {
@@ -61,34 +61,34 @@
     "storybook:dev": "storybook dev -p 6006"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
+    "@babel/core": "^7.23.5",
+    "@babel/preset-react": "^7.23.3",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@faker-js/faker": "^8.2.0",
-    "@mui/icons-material": "^5.14.16",
-    "@mui/material": "^5.14.17",
-    "@mui/x-date-pickers": "^6.18.0",
+    "@faker-js/faker": "^8.3.1",
+    "@mui/icons-material": "^5.14.19",
+    "@mui/material": "^5.14.19",
+    "@mui/x-date-pickers": "^6.18.3",
     "@rollup/plugin-typescript": "^11.1.5",
-    "@size-limit/preset-small-lib": "^10.0.2",
-    "@storybook/addon-a11y": "^7.5.3",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addon-storysource": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-vite": "^7.5.3",
+    "@size-limit/preset-small-lib": "^11.0.0",
+    "@storybook/addon-a11y": "^7.6.3",
+    "@storybook/addon-essentials": "^7.6.3",
+    "@storybook/addon-interactions": "^7.6.3",
+    "@storybook/addon-links": "^7.6.3",
+    "@storybook/addon-storysource": "^7.6.3",
+    "@storybook/blocks": "^7.6.3",
+    "@storybook/react": "^7.6.3",
+    "@storybook/react-vite": "^7.6.3",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.8.10",
-    "@types/react": "^18.2.36",
-    "@types/react-dom": "^18.2.14",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "@vitejs/plugin-react": "^4.1.1",
-    "eslint": "^8.53.0",
+    "@types/node": "^20.10.3",
+    "@types/react": "^18.2.42",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.55.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
-    "eslint-plugin-perfectionist": "^2.2.0",
+    "eslint-plugin-perfectionist": "^2.5.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -96,12 +96,12 @@
     "rollup": "^2.79.1",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "size-limit": "^10.0.2",
-    "storybook": "^7.5.3",
-    "storybook-dark-mode": "^3.0.1",
+    "size-limit": "^11.0.0",
+    "storybook": "^7.6.3",
+    "storybook-dark-mode": "^3.0.3",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0"
+    "typescript": "^5.3.2",
+    "vite": "^5.0.5"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11",
@@ -115,7 +115,7 @@
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.8.4",
     "@tanstack/react-table": "8.10.7",
-    "@tanstack/react-virtual": "3.0.0-beta.68",
+    "@tanstack/react-virtual": "3.0.1",
     "highlight-words": "1.2.2"
   }
 }

package/src/body/MRT_TableBody.tsx

@@ -186,6 +186,15 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
     ? rowVirtualizer.getVirtualItems()
     : undefined;
 
+  const commonRowProps = {
+    columnVirtualizer,
+    numRows: rows.length,
+    table,
+    virtualColumns,
+    virtualPaddingLeft,
+    virtualPaddingRight,
+  };
+
   return (
     <>
       {!rowPinningDisplayMode?.includes('sticky') &&
@@ -202,15 +211,9 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
           >
             {getTopRows().map((row, rowIndex) => {
               const props = {
-                columnVirtualizer,
-                measureElement: rowVirtualizer?.measureElement,
-                numRows: rows.length,
+                ...commonRowProps,
                 row,
                 rowIndex,
-                table,
-                virtualColumns,
-                virtualPaddingLeft,
-                virtualPaddingRight,
               };
               return memoMode === 'rows' ? (
                 <Memo_MRT_TableBodyRow key={row.id} {...props} />
@@ -275,24 +278,22 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
                   ? rows[rowOrVirtualRow.index]
                   : (rowOrVirtualRow as MRT_Row<TData>);
                 const props = {
-                  columnVirtualizer,
+                  ...commonRowProps,
                   measureElement: rowVirtualizer?.measureElement,
-                  numRows: rows.length,
                   pinnedRowIds,
                   row,
                   rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex,
-                  table,
-                  virtualColumns,
-                  virtualPaddingLeft,
-                  virtualPaddingRight,
                   virtualRow: rowVirtualizer
                     ? (rowOrVirtualRow as VirtualItem)
                     : undefined,
                 };
                 return memoMode === 'rows' ? (
-                  <Memo_MRT_TableBodyRow key={row.id} {...props} />
+                  <Memo_MRT_TableBodyRow
+                    key={`${row.id}${row.index}`}
+                    {...props}
+                  />
                 ) : (
-                  <MRT_TableBodyRow key={row.id} {...props} />
+                  <MRT_TableBodyRow key={`${row.id}${row.index}`} {...props} />
                 );
               })}
             </>
@@ -312,18 +313,12 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
           >
             {getBottomRows().map((row, rowIndex) => {
               const props = {
-                columnVirtualizer,
-                measureElement: rowVirtualizer?.measureElement,
-                numRows: rows.length,
+                ...commonRowProps,
                 row,
                 rowIndex,
-                table,
-                virtualColumns,
-                virtualPaddingLeft,
-                virtualPaddingRight,
               };
               return memoMode === 'rows' ? (
-                <Memo_MRT_TableBodyRow key={row.id} {...props} />
+                <Memo_MRT_TableBodyRow key={`${row.id}`} {...props} />
               ) : (
                 <MRT_TableBodyRow key={row.id} {...props} />
               );

package/src/body/MRT_TableBodyCellValue.tsx

@@ -60,7 +60,7 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
     allowedTypes.includes(typeof renderedCellValue) &&
     ((filterValue &&
       allowedTypes.includes(typeof filterValue) &&
-      columnDef.filterVariant === 'text') ||
+      ['autocomplete', 'text'].includes(columnDef.filterVariant!)) ||
       (globalFilter &&
         allowedTypes.includes(typeof globalFilter) &&
         column.getCanGlobalFilter()))

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -37,12 +37,19 @@ export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
     isLoading || showSkeletons
       ? ''
       : column.getIsSorted()
-      ? column.getIsSorted() === 'desc'
-        ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
-        : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
-      : column.getNextSortingOrder() === 'desc'
-      ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
-      : localization.sortByColumnAsc.replace('{column}', columnDef.header);
+        ? column.getIsSorted() === 'desc'
+          ? localization.sortedByColumnDesc.replace(
+              '{column}',
+              columnDef.header,
+            )
+          : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
+        : column.getNextSortingOrder() === 'desc'
+          ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
+          : localization.sortByColumnAsc.replace('{column}', columnDef.header);
+
+  const direction = isSorted
+    ? (column.getIsSorted() as 'asc' | 'desc')
+    : undefined;
 
   return (
     <Tooltip placement="top" title={sortTooltip}>
@@ -56,6 +63,7 @@ export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
               ? (props) => (
                   <SyncAltIcon
                     {...props}
+                    direction={direction}
                     style={{
                       transform: 'rotate(-90deg) scaleX(0.9) translateX(-1px)',
                     }}
@@ -65,9 +73,7 @@ export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
           }
           active
           aria-label={sortTooltip}
-          direction={
-            isSorted ? (column.getIsSorted() as 'asc' | 'desc') : undefined
-          }
+          direction={direction}
           onClick={(e) => {
             e.stopPropagation();
             header.column.getToggleSortingHandler()?.(e);

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -92,6 +92,16 @@ export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
       unmountOnExit
     >
       <TextField
+        inputProps={{
+          autoComplete: 'new-password', // disable autocomplete and autofill
+          ...textFieldProps.inputProps,
+        }}
+        onChange={handleChange}
+        placeholder={localization.search}
+        size="small"
+        value={searchValue ?? ''}
+        variant="outlined"
+        {...textFieldProps}
         InputProps={{
           endAdornment: (
             <InputAdornment position="end">
@@ -134,16 +144,6 @@ export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
             ) as any),
           }),
         }}
-        inputProps={{
-          autoComplete: 'new-password', // disable autocomplete and autofill
-          ...textFieldProps.inputProps,
-        }}
-        onChange={handleChange}
-        placeholder={localization.search}
-        size="small"
-        value={searchValue ?? ''}
-        variant="outlined"
-        {...textFieldProps}
         inputRef={(inputRef) => {
           searchInputRef.current = inputRef;
           if (textFieldProps?.inputRef) {

package/src/toolbar/MRT_TablePagination.tsx

@@ -70,6 +70,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
 
   return (
     <Box
+      className="MuiTablePagination-root"
       sx={{
         alignItems: 'center',
         display: 'flex',

package/src/types.ts

@@ -241,6 +241,7 @@ export type MRT_TableInstance<TData extends MRT_RowData> = Omit<
   | 'getExpandedRowModel'
   | 'getFlatHeaders'
   | 'getHeaderGroups'
+  | 'getLeafHeaders'
   | 'getLeftLeafColumns'
   | 'getPaginationRowModel'
   | 'getPreFilteredRowModel'
@@ -262,6 +263,7 @@ export type MRT_TableInstance<TData extends MRT_RowData> = Omit<
   getExpandedRowModel: () => MRT_RowModel<TData>;
   getFlatHeaders: () => MRT_Header<TData>[];
   getHeaderGroups: () => MRT_HeaderGroup<TData>[];
+  getLeafHeaders: () => MRT_Header<TData>[];
   getLeftLeafColumns: () => MRT_Column<TData>[];
   getPaginationRowModel: () => MRT_RowModel<TData>;
   getPreFilteredRowModel: () => MRT_RowModel<TData>;