material-react-table 0.19.0-alpha.1 → 0.21.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.19.0-alpha.1",
+  "version": "0.21.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -61,7 +61,7 @@
     "@emotion/styled": "^11.9.3",
     "@faker-js/faker": "^7.3.0",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.8.6",
+    "@mui/material": "^5.8.7",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-actions": "^6.5.9",

package/src/MaterialReactTable.tsx

@@ -46,6 +46,8 @@ import { MRT_TableRoot } from './table/MRT_TableRoot';
 import { MRT_FilterFns } from './filtersFns';
 import { MRT_SortingFns } from './sortingFns';
 
+type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
+
 export type MRT_TableOptions<D extends Record<string, any> = {}> = Partial<
   Omit<
     TableOptions<D>,
@@ -206,7 +208,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
    *
    * @example accessorKey: 'username'
    */
-  accessorKey?: keyof D;
+  accessorKey?: LiteralUnion<string & keyof D>;
   /**
    * Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
    * Leave this blank if you are just creating a normal data column.
@@ -229,12 +231,14 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   header: string;
   /**
    * Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
+   *
    * If you have also specified an `accessorFn`, MRT still needs to have a valid `id` to be able to identify the column uniquely.
+   *
    * `id` defaults to the `accessorKey` or `header` if not specified.
    *
    * @default gets set to the same value as `accessorKey` by default
    */
-  id?: string;
+  id?: LiteralUnion<string & keyof D>;
   muiTableBodyCellCopyButtonProps?:
     | ButtonProps
     | (({

package/src/body/MRT_TableBody.tsx

@@ -2,8 +2,8 @@ import React, { FC, RefObject, useMemo } from 'react';
 import { useVirtual } from 'react-virtual';
 import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
-import type { MRT_Row, MRT_TableInstance } from '..';
 import { rankGlobalFuzzy } from '../sortingFns';
+import type { MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   table: MRT_TableInstance;
@@ -62,19 +62,27 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
 
   const rowVirtualizer = enableRowVirtualization
     ? useVirtual({
-        overscan: density === 'compact' ? 20 : 10,
-        size: rows.length,
+        // estimateSize: () => (density === 'compact' ? 25 : 50),
+        overscan: density === 'compact' ? 30 : 10,
         parentRef: tableContainerRef,
+        size: rows.length,
         ...virtualizerProps,
       })
     : ({} as any);
 
-  const { virtualItems: virtualRows } = rowVirtualizer;
-  const paddingTop = virtualRows?.length > 0 ? virtualRows[0].start : 0;
-  const paddingBottom =
-    virtualRows?.length > 0
-      ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
-      : 0;
+  const virtualRows = enableRowVirtualization
+    ? rowVirtualizer.virtualItems
+    : [];
+
+  let paddingTop = 0;
+  let paddingBottom = 0;
+  if (enableRowVirtualization) {
+    paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
+    paddingBottom =
+      virtualRows.length > 0
+        ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
+        : 0;
+  }
 
   return (
     <TableBody {...tableBodyProps}>
@@ -83,7 +91,6 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
           <td style={{ height: `${paddingTop}px` }} />
         </tr>
       )}
-      {/* @ts-ignore */}
       {(enableRowVirtualization ? virtualRows : rows).map(
         (rowOrVirtualRow: any, rowIndex: number) => {
           const row = enableRowVirtualization