material-react-table 2.0.0-beta.0 → 2.0.0-beta.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.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.",

package/src/MaterialReactTable.tsx

@@ -1,26 +1,27 @@
 import { MRT_TablePaper } from './table/MRT_TablePaper';
 import {
+  type MRT_RowData,
   type MRT_TableInstance,
   type MRT_TableOptions,
   type Xor,
 } from './types';
 import { useMaterialReactTable } from './useMaterialReactTable';
 
-type TableInstanceProp<TData extends Record<string, any> = {}> = {
+type TableInstanceProp<TData extends MRT_RowData> = {
   table: MRT_TableInstance<TData>;
 };
 
-type Props<TData extends Record<string, any> = {}> = Xor<
+type Props<TData extends MRT_RowData> = Xor<
   TableInstanceProp<TData>,
   MRT_TableOptions<TData>
 >;
 
-const isTableInstanceProp = <TData extends Record<string, any> = {}>(
+const isTableInstanceProp = <TData extends MRT_RowData>(
   props: Props<TData>,
 ): props is TableInstanceProp<TData> =>
   (props as TableInstanceProp<TData>).table !== undefined;
 
-export const MaterialReactTable = <TData extends Record<string, any> = {}>(
+export const MaterialReactTable = <TData extends MRT_RowData>(
   props: Props<TData>,
 ) => {
   let table: MRT_TableInstance<TData>;

package/src/body/MRT_TableBody.tsx

@@ -14,9 +14,13 @@ import {
   parseFromValuesOrFunc,
 } from '../column.utils';
 import { rankGlobalFuzzy } from '../sortingFns';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
@@ -24,7 +28,7 @@ interface Props<TData extends Record<string, any>> {
   virtualPaddingRight?: number;
 }
 
-export const MRT_TableBody = <TData extends Record<string, any>>({
+export const MRT_TableBody = <TData extends MRT_RowData>({
   columnVirtualizer,
   table,
   virtualColumns,
@@ -40,6 +44,7 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
     getState,
     getTopRows,
     options: {
+      createDisplayMode,
       enableGlobalFilterRankedResults,
       enablePagination,
       enableRowPinning,
@@ -64,6 +69,7 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
   } = table;
   const {
     columnFilters,
+    creatingRow,
     density,
     draggingRow,
     expanded,
@@ -222,6 +228,9 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
           ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme) as any),
         })}
       >
+        {creatingRow && createDisplayMode === 'row' && (
+          <MRT_TableBodyRow row={creatingRow} rowIndex={-1} table={table} />
+        )}
         {tableBodyProps?.children ??
           (!rows.length ? (
             <tr

package/src/body/MRT_TableBodyCell.tsx

@@ -21,19 +21,23 @@ import {
   parseFromValuesOrFunc,
 } from '../column.utils';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
-import { type MRT_Cell, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Cell,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   cell: MRT_Cell<TData>;
   measureElement?: (element: HTMLTableCellElement) => void;
-  numRows: number;
+  numRows?: number;
   rowIndex: number;
   rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance<TData>;
   virtualCell?: VirtualItem;
 }
 
-export const MRT_TableBodyCell = <TData extends Record<string, any>>({
+export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   cell,
   measureElement,
   numRows,
@@ -63,6 +67,7 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
     setHoveredColumn,
   } = table;
   const {
+    columnSizingInfo,
     creatingRow,
     density,
     draggingColumn,
@@ -118,15 +123,23 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
     const isHoveredRow = hoveredRow?.id === row.id;
     const isFirstColumn = getIsFirstColumn(column, table);
     const isLastColumn = getIsLastColumn(column, table);
-    const isLastRow = rowIndex === numRows - 1;
+    const isLastRow = numRows && rowIndex === numRows - 1;
 
     const borderStyle =
-      isDraggingColumn || isDraggingRow
+      columnSizingInfo.isResizingColumn === column.id
+        ? `2px solid ${theme.palette.primary.main} !important`
+        : isDraggingColumn || isDraggingRow
         ? `1px dashed ${theme.palette.text.secondary} !important`
-        : isHoveredColumn || isHoveredRow
+        : isHoveredColumn ||
+          isHoveredRow ||
+          columnSizingInfo.isResizingColumn === column.id
         ? `2px dashed ${theme.palette.primary.main} !important`
         : undefined;
 
+    if (columnSizingInfo.isResizingColumn === column.id) {
+      return { borderRight: borderStyle };
+    }
+
     return borderStyle
       ? {
           borderBottom:
@@ -148,7 +161,14 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
           borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
         }
       : undefined;
-  }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
+  }, [
+    columnSizingInfo.isResizingColumn,
+    draggingColumn,
+    draggingRow,
+    hoveredColumn,
+    hoveredRow,
+    rowIndex,
+  ]);
 
   const isEditable =
     parseFromValuesOrFunc(enableEditing, row) &&

package/src/body/MRT_TableBodyCellValue.tsx

@@ -1,17 +1,21 @@
 import { type ReactNode } from 'react';
 import Box from '@mui/material/Box';
 import { darken, lighten } from '@mui/material/styles';
-import { type MRT_Cell, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Cell,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 import highlightWords from 'highlight-words';
 
 const allowedTypes = ['string', 'number'];
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   cell: MRT_Cell<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableBodyCellValue = <TData extends Record<string, any>>({
+export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
   cell,
   table,
 }: Props<TData>) => {

package/src/body/MRT_TableBodyRow.tsx

@@ -11,12 +11,17 @@ import {
 import { MRT_TableBodyCell, Memo_MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Cell,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   measureElement?: (element: HTMLTableRowElement) => void;
-  numRows: number;
+  numRows?: number;
   pinnedRowIds?: string[];
   row: MRT_Row<TData>;
   rowIndex: number;
@@ -27,7 +32,7 @@ interface Props<TData extends Record<string, any>> {
   virtualRow?: VirtualItem;
 }
 
-export const MRT_TableBodyRow = <TData extends Record<string, any>>({
+export const MRT_TableBodyRow = <TData extends MRT_RowData>({
   columnVirtualizer,
   measureElement,
   numRows,

package/src/body/MRT_TableBodyRowGrabHandle.tsx

@@ -1,15 +1,19 @@
 import { type DragEvent, type RefObject } from 'react';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   row: MRT_Row<TData>;
   rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableBodyRowGrabHandle = <TData extends Record<string, any>>({
+export const MRT_TableBodyRowGrabHandle = <TData extends MRT_RowData>({
   row,
   rowRef,
   table,

package/src/body/MRT_TableBodyRowPinButton.tsx

@@ -1,14 +1,18 @@
 import Box from '@mui/material/Box';
 import { MRT_RowPinButton } from '../buttons/MRT_RowPinButton';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableBodyRowPinButton = <TData extends Record<string, any>>({
+export const MRT_TableBodyRowPinButton = <TData extends MRT_RowData>({
   row,
   table,
 }: Props<TData>) => {

package/src/body/MRT_TableDetailPanel.tsx

@@ -5,9 +5,13 @@ import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
 import { lighten } from '@mui/material/styles';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   parentRowRef: RefObject<HTMLTableRowElement>;
   row: MRT_Row<TData>;
   rowIndex: number;
@@ -15,7 +19,7 @@ interface Props<TData extends Record<string, any>> {
   virtualRow?: VirtualItem;
 }
 
-export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
+export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
   parentRowRef,
   row,
   rowIndex,
@@ -74,8 +78,7 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
             : undefined,
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
           display: layoutMode?.startsWith('grid') ? 'flex' : 'table-cell',
-          pb: row.getIsExpanded() ? '1rem' : 0,
-          pt: row.getIsExpanded() ? '1rem' : 0,
+          py: row.getIsExpanded() ? '1rem' : 0,
           transition: 'all 150ms ease-in-out',
           width: `${table.getTotalSize()}px`,
           ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),

package/src/buttons/MRT_ColumnPinningButtons.tsx

@@ -1,14 +1,18 @@
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_Column, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ColumnPinningButtons = <TData extends Record<string, any>>({
+export const MRT_ColumnPinningButtons = <TData extends MRT_RowData>({
   column,
   table,
 }: Props<TData>) => {

package/src/buttons/MRT_CopyButton.tsx

@@ -2,15 +2,19 @@ import { type MouseEvent, type ReactNode, useState } from 'react';
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Cell, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Cell,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   cell: MRT_Cell<TData>;
   children: ReactNode;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_CopyButton = <TData extends Record<string, any>>({
+export const MRT_CopyButton = <TData extends MRT_RowData>({
   cell,
   children,
   table,

package/src/buttons/MRT_EditActionButtons.tsx

@@ -3,15 +3,19 @@ import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
   variant?: 'icon' | 'text';
 }
 
-export const MRT_EditActionButtons = <TData extends Record<string, any>>({
+export const MRT_EditActionButtons = <TData extends MRT_RowData>({
   row,
   table,
   variant = 'icon',

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,13 +1,13 @@
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ExpandAllButton = <TData extends Record<string, any>>({
+export const MRT_ExpandAllButton = <TData extends MRT_RowData>({
   table,
 }: Props<TData>) => {
   const {
@@ -37,9 +37,8 @@ export const MRT_ExpandAllButton = <TData extends Record<string, any>>({
       enterDelay={1000}
       enterNextDelay={1000}
       title={
-        iconButtonProps?.title ?? isAllRowsExpanded
-          ? localization.collapseAll
-          : localization.expandAll
+        iconButtonProps?.title ??
+        (isAllRowsExpanded ? localization.collapseAll : localization.expandAll)
       }
     >
       <span>

package/src/buttons/MRT_ExpandButton.tsx

@@ -2,14 +2,18 @@ import { type MouseEvent } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ExpandButton = <TData extends Record<string, any>>({
+export const MRT_ExpandButton = <TData extends MRT_RowData>({
   row,
   table,
 }: Props<TData>) => {
@@ -45,9 +49,8 @@ export const MRT_ExpandButton = <TData extends Record<string, any>>({
       enterDelay={1000}
       enterNextDelay={1000}
       title={
-        iconButtonProps?.title ?? isExpanded
-          ? localization.collapse
-          : localization.expand
+        iconButtonProps?.title ??
+        (isExpanded ? localization.collapse : localization.expand)
       }
     >
       <span>

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -2,9 +2,9 @@ import { type DragEventHandler } from 'react';
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   iconButtonProps?: IconButtonProps;
   location?: 'column' | 'row';
   onDragEnd: DragEventHandler<HTMLButtonElement>;
@@ -12,7 +12,7 @@ interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_GrabHandleButton = <TData extends Record<string, any>>({
+export const MRT_GrabHandleButton = <TData extends MRT_RowData>({
   iconButtonProps,
   location,
   onDragEnd,

package/src/buttons/MRT_RowPinButton.tsx

@@ -2,15 +2,19 @@ import { type MouseEvent, useState } from 'react';
 import { type RowPinningPosition } from '@tanstack/react-table';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   pinningPosition: RowPinningPosition;
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_RowPinButton = <TData extends Record<string, any>>({
+export const MRT_RowPinButton = <TData extends MRT_RowData>({
   pinningPosition,
   row,
   table,

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -2,13 +2,13 @@ import { type MouseEvent, useState } from 'react';
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> extends IconButtonProps {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ShowHideColumnsButton = <TData extends Record<string, any>>({
+export const MRT_ShowHideColumnsButton = <TData extends MRT_RowData>({
   table,
   ...rest
 }: Props<TData>) => {

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -1,14 +1,12 @@
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> extends IconButtonProps {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleDensePaddingButton = <
-  TData extends Record<string, any>,
->({
+export const MRT_ToggleDensePaddingButton = <TData extends MRT_RowData>({
   table,
   ...rest
 }: Props<TData>) => {

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,12 +1,12 @@
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> extends IconButtonProps {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleFiltersButton = <TData extends Record<string, any>>({
+export const MRT_ToggleFiltersButton = <TData extends MRT_RowData>({
   table,
   ...rest
 }: Props<TData>) => {

package/src/buttons/MRT_ToggleFullScreenButton.tsx

@@ -1,13 +1,13 @@
 import { useState } from 'react';
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> extends IconButtonProps {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleFullScreenButton = <TData extends Record<string, any>>({
+export const MRT_ToggleFullScreenButton = <TData extends MRT_RowData>({
   table,
   ...rest
 }: Props<TData>) => {

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -1,14 +1,12 @@
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> extends IconButtonProps {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleGlobalFilterButton = <
-  TData extends Record<string, any>,
->({
+export const MRT_ToggleGlobalFilterButton = <TData extends MRT_RowData>({
   table,
   ...rest
 }: Props<TData>) => {

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -4,7 +4,12 @@ import Tooltip from '@mui/material/Tooltip';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
-import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Cell,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
 const commonIconButtonStyles = {
   '&:hover': {
@@ -17,15 +22,13 @@ const commonIconButtonStyles = {
   width: '2rem',
 };
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   cell: MRT_Cell<TData>;
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleRowActionMenuButton = <
-  TData extends Record<string, any>,
->({
+export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
   cell,
   row,
   table,