material-react-table 1.15.0 → 2.0.0-alpha.1

package/src/body/MRT_TableBody.tsx

@@ -9,30 +9,38 @@ import Typography from '@mui/material/Typography';
 import { Memo_MRT_TableBodyRow, MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { rankGlobalFuzzy } from '../sortingFns';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
-interface Props {
+interface Props<TData extends Record<string, any>> {
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }
 
-export const MRT_TableBody = ({
+export const MRT_TableBody = <TData extends Record<string, any>>({
   columnVirtualizer,
   table,
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
-}: Props) => {
+}: Props<TData>) => {
   const {
-    getRowModel,
+    getBottomRows,
+    getCenterRows,
     getPrePaginationRowModel,
+    getRowModel,
     getState,
+    getIsSomeRowsPinned,
+    getTopRows,
     options: {
       enableGlobalFilterRankedResults,
       enablePagination,
+      enableRowPinning,
       enableRowVirtualization,
+      enableStickyHeader,
+      enableStickyFooter,
       layoutMode,
       localization,
       manualExpanding,
@@ -43,12 +51,11 @@ export const MRT_TableBody = ({
       memoMode,
       muiTableBodyProps,
       renderEmptyRowsFallback,
+      rowPinningDisplayMode,
       rowVirtualizerInstanceRef,
-      rowVirtualizerProps,
-      virtualizerInstanceRef,
-      virtualizerProps,
+      rowVirtualizerOptions,
     },
-    refs: { tableContainerRef, tablePaperRef },
+    refs: { tableContainerRef, tablePaperRef, tableFooterRef, tableHeadRef },
   } = table;
   const {
     columnFilters,
@@ -58,22 +65,21 @@ export const MRT_TableBody = ({
     globalFilterFn,
     pagination,
     sorting,
+    rowPinning,
+    isFullScreen,
   } = getState();
 
-  const tableBodyProps =
-    muiTableBodyProps instanceof Function
-      ? muiTableBodyProps({ table })
-      : muiTableBodyProps;
+  const tableBodyProps = parseFromValuesOrFunc(muiTableBodyProps, { table });
+  const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
+    table,
+  });
 
-  const vProps_old =
-    virtualizerProps instanceof Function
-      ? virtualizerProps({ table })
-      : virtualizerProps;
-
-  const vProps =
-    rowVirtualizerProps instanceof Function
-      ? rowVirtualizerProps({ table })
-      : rowVirtualizerProps;
+  const tableHeadHeight =
+    ((enableStickyHeader || isFullScreen) &&
+      tableHeadRef.current?.clientHeight) ||
+    0;
+  const tableFooterHeight =
+    (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
 
   const shouldRankResults = useMemo(
     () =>
@@ -99,21 +105,45 @@ export const MRT_TableBody = ({
     ],
   );
 
+  const pinnedRowIds = useMemo(
+    () =>
+      getRowModel()
+        .rows.filter((row) => row.getIsPinned())
+        .map((r) => r.id),
+    [rowPinning, table.getRowModel().rows],
+  );
+
   const rows = useMemo(() => {
-    if (!shouldRankResults) return getRowModel().rows;
-    const rankedRows = getPrePaginationRowModel().rows.sort((a, b) =>
-      rankGlobalFuzzy(a, b),
-    );
-    if (enablePagination && !manualPagination) {
-      const start = pagination.pageIndex * pagination.pageSize;
-      return rankedRows.slice(start, start + pagination.pageSize);
+    let rows = [];
+    if (!shouldRankResults) {
+      rows =
+        !enableRowPinning || rowPinningDisplayMode?.includes('sticky')
+          ? getRowModel().rows
+          : getCenterRows();
+    } else {
+      rows = getPrePaginationRowModel().rows.sort((a, b) =>
+        rankGlobalFuzzy(a, b),
+      );
+      if (enablePagination && !manualPagination) {
+        const start = pagination.pageIndex * pagination.pageSize;
+        rows = rows.slice(start, start + pagination.pageSize);
+      }
+    }
+    if (enableRowPinning && rowPinningDisplayMode?.includes('sticky')) {
+      rows = [
+        ...getTopRows().filter((row) => !pinnedRowIds.includes(row.id)),
+        ...rows,
+        ...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
+      ];
     }
-    return rankedRows;
+
+    return rows;
   }, [
     shouldRankResults,
     shouldRankResults ? getPrePaginationRowModel().rows : getRowModel().rows,
     pagination.pageIndex,
     pagination.pageSize,
+    rowPinning,
   ]);
 
   const rowVirtualizer:
@@ -130,8 +160,7 @@ export const MRT_TableBody = ({
             ? (element) => element?.getBoundingClientRect().height
             : undefined,
         overscan: 4,
-        ...vProps_old,
-        ...vProps,
+        ...rowVirtualizerProps,
       })
     : undefined;
 
@@ -139,78 +168,140 @@ export const MRT_TableBody = ({
     rowVirtualizerInstanceRef.current = rowVirtualizer;
   }
 
-  //deprecated
-  if (virtualizerInstanceRef && rowVirtualizer) {
-    virtualizerInstanceRef.current = rowVirtualizer;
-  }
-
   const virtualRows = rowVirtualizer
     ? rowVirtualizer.getVirtualItems()
     : undefined;
 
   return (
-    <TableBody
-      {...tableBodyProps}
-      sx={(theme) => ({
-        display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
-        height: rowVirtualizer
-          ? `${rowVirtualizer.getTotalSize()}px`
-          : 'inherit',
-        minHeight: !rows.length ? '100px' : undefined,
-        position: 'relative',
-        ...(tableBodyProps?.sx instanceof Function
-          ? tableBodyProps?.sx(theme)
-          : (tableBodyProps?.sx as any)),
-      })}
-    >
-      {tableBodyProps?.children ??
-        (!rows.length ? (
-          <tr style={{ display: layoutMode === 'grid' ? 'grid' : 'table-row' }}>
-            <td
-              colSpan={table.getVisibleLeafColumns().length}
-              style={{
-                display: layoutMode === 'grid' ? 'grid' : 'table-cell',
-              }}
+    <>
+      {!rowPinningDisplayMode?.includes('sticky') &&
+        getIsSomeRowsPinned('top') && (
+          <TableBody
+            {...tableBodyProps}
+            sx={(theme) => ({
+              display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
+              position: 'sticky',
+              top: tableHeadHeight - 1,
+              zIndex: 1,
+              ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme) as any),
+            })}
+          >
+            {getTopRows().map((row, rowIndex) => {
+              const props = {
+                columnVirtualizer,
+                measureElement: rowVirtualizer?.measureElement,
+                numRows: rows.length,
+                row,
+                rowIndex,
+                table,
+                virtualColumns,
+                virtualPaddingLeft,
+                virtualPaddingRight,
+              };
+              return memoMode === 'rows' ? (
+                <Memo_MRT_TableBodyRow key={row.id} {...props} />
+              ) : (
+                <MRT_TableBodyRow key={row.id} {...props} />
+              );
+            })}
+          </TableBody>
+        )}
+      <TableBody
+        {...tableBodyProps}
+        sx={(theme) => ({
+          display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
+          height: rowVirtualizer
+            ? `${rowVirtualizer.getTotalSize()}px`
+            : 'inherit',
+          minHeight: !rows.length ? '100px' : undefined,
+          position: 'relative',
+          ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme) as any),
+        })}
+      >
+        {tableBodyProps?.children ??
+          (!rows.length ? (
+            <tr
+              style={{ display: layoutMode === 'grid' ? 'grid' : 'table-row' }}
             >
-              {renderEmptyRowsFallback?.({ table }) ?? (
-                <Typography
-                  sx={{
-                    color: 'text.secondary',
-                    fontStyle: 'italic',
-                    maxWidth: `min(100vw, ${
-                      tablePaperRef.current?.clientWidth ?? 360
-                    }px)`,
-                    py: '2rem',
-                    textAlign: 'center',
-                    width: '100%',
-                  }}
-                >
-                  {globalFilter || columnFilters.length
-                    ? localization.noResultsFound
-                    : localization.noRecordsToDisplay}
-                </Typography>
-              )}
-            </td>
-          </tr>
-        ) : (
-          <>
-            {(virtualRows ?? rows).map((rowOrVirtualRow, rowIndex) => {
-              const row = rowVirtualizer
-                ? rows[rowOrVirtualRow.index]
-                : (rowOrVirtualRow as MRT_Row);
+              <td
+                colSpan={table.getVisibleLeafColumns().length}
+                style={{
+                  display: layoutMode === 'grid' ? 'grid' : 'table-cell',
+                }}
+              >
+                {renderEmptyRowsFallback?.({ table }) ?? (
+                  <Typography
+                    sx={{
+                      color: 'text.secondary',
+                      fontStyle: 'italic',
+                      maxWidth: `min(100vw, ${
+                        tablePaperRef.current?.clientWidth ?? 360
+                      }px)`,
+                      py: '2rem',
+                      textAlign: 'center',
+                      width: '100%',
+                    }}
+                  >
+                    {globalFilter || columnFilters.length
+                      ? localization.noResultsFound
+                      : localization.noRecordsToDisplay}
+                  </Typography>
+                )}
+              </td>
+            </tr>
+          ) : (
+            <>
+              {(virtualRows ?? rows).map((rowOrVirtualRow, rowIndex) => {
+                const row = rowVirtualizer
+                  ? rows[rowOrVirtualRow.index]
+                  : (rowOrVirtualRow as MRT_Row<TData>);
+                const props = {
+                  columnVirtualizer,
+                  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} />
+                ) : (
+                  <MRT_TableBodyRow key={row.id} {...props} />
+                );
+              })}
+            </>
+          ))}
+      </TableBody>
+      {!rowPinningDisplayMode?.includes('sticky') &&
+        getIsSomeRowsPinned('bottom') && (
+          <TableBody
+            {...tableBodyProps}
+            sx={(theme) => ({
+              display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
+              position: 'sticky',
+              bottom: tableFooterHeight - 1,
+              zIndex: 1,
+              ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme) as any),
+            })}
+          >
+            {getBottomRows().map((row, rowIndex) => {
               const props = {
                 columnVirtualizer,
                 measureElement: rowVirtualizer?.measureElement,
                 numRows: rows.length,
                 row,
-                rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex,
+                rowIndex,
                 table,
                 virtualColumns,
                 virtualPaddingLeft,
                 virtualPaddingRight,
-                virtualRow: rowVirtualizer
-                  ? (rowOrVirtualRow as VirtualItem)
-                  : undefined,
               };
               return memoMode === 'rows' ? (
                 <Memo_MRT_TableBodyRow key={row.id} {...props} />
@@ -218,13 +309,13 @@ export const MRT_TableBody = ({
                 <MRT_TableBodyRow key={row.id} {...props} />
               );
             })}
-          </>
-        ))}
-    </TableBody>
+          </TableBody>
+        )}
+    </>
   );
 };
 
 export const Memo_MRT_TableBody = memo(
   MRT_TableBody,
   (prev, next) => prev.table.options.data === next.table.options.data,
-);
+) as typeof MRT_TableBody;

package/src/body/MRT_TableBodyCell.tsx

@@ -1,6 +1,6 @@
 import {
-  type DragEvent,
   memo,
+  type DragEvent,
   type MouseEvent,
   type RefObject,
   useEffect,
@@ -18,21 +18,22 @@ import {
   getCommonCellStyles,
   getIsFirstColumn,
   getIsLastColumn,
+  parseFromValuesOrFunc,
 } from '../column.utils';
 import { type VirtualItem } from '@tanstack/react-virtual';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
 
-interface Props {
-  cell: MRT_Cell;
+interface Props<TData extends Record<string, any>> {
+  cell: MRT_Cell<TData>;
   measureElement?: (element: HTMLTableCellElement) => void;
   numRows: number;
   rowIndex: number;
   rowRef: RefObject<HTMLTableRowElement>;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
   virtualCell?: VirtualItem;
 }
 
-export const MRT_TableBodyCell = ({
+export const MRT_TableBodyCell = <TData extends Record<string, any>>({
   cell,
   measureElement,
   numRows,
@@ -40,12 +41,13 @@ export const MRT_TableBodyCell = ({
   rowRef,
   table,
   virtualCell,
-}: Props) => {
+}: Props<TData>) => {
   const theme = useTheme();
   const {
     getState,
     options: {
-      editingMode,
+      createDisplayMode,
+      editDisplayMode,
       enableClickToCopy,
       enableColumnOrdering,
       enableEditing,
@@ -53,7 +55,7 @@ export const MRT_TableBodyCell = ({
       enableRowNumbers,
       layoutMode,
       muiTableBodyCellProps,
-      muiTableBodyCellSkeletonProps,
+      muiSkeletonProps,
       rowNumberMode,
     },
     refs: { editInputRefs },
@@ -61,6 +63,7 @@ export const MRT_TableBodyCell = ({
     setHoveredColumn,
   } = table;
   const {
+    creatingRow,
     draggingColumn,
     draggingRow,
     editingCell,
@@ -75,41 +78,38 @@ export const MRT_TableBodyCell = ({
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
-  const mTableCellBodyProps =
-    muiTableBodyCellProps instanceof Function
-      ? muiTableBodyCellProps({ cell, column, row, table })
-      : muiTableBodyCellProps;
-
-  const mcTableCellBodyProps =
-    columnDef.muiTableBodyCellProps instanceof Function
-      ? columnDef.muiTableBodyCellProps({ cell, column, row, table })
-      : columnDef.muiTableBodyCellProps;
-
   const tableCellProps = {
-    ...mTableCellBodyProps,
-    ...mcTableCellBodyProps,
+    ...parseFromValuesOrFunc(muiTableBodyCellProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiTableBodyCellProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
   };
 
-  const skeletonProps =
-    muiTableBodyCellSkeletonProps instanceof Function
-      ? muiTableBodyCellSkeletonProps({ cell, column, row, table })
-      : muiTableBodyCellSkeletonProps;
+  const skeletonProps = parseFromValuesOrFunc(muiSkeletonProps, {
+    cell,
+    column,
+    row,
+    table,
+  });
 
-  const [skeletonWidth, setSkeletonWidth] = useState(0);
-  useEffect(
-    () =>
-      setSkeletonWidth(
-        isLoading || showSkeletons
-          ? columnDefType === 'display'
-            ? column.getSize() / 2
-            : Math.round(
-                Math.random() * (column.getSize() - column.getSize() / 3) +
-                  column.getSize() / 3,
-              )
-          : 100,
-      ),
-    [],
-  );
+  const [skeletonWidth, setSkeletonWidth] = useState(100);
+  useEffect(() => {
+    if ((!isLoading && !showSkeletons) || skeletonWidth !== 100) return;
+    const size = column.getSize();
+    setSkeletonWidth(
+      columnDefType === 'display'
+        ? size / 2
+        : Math.round(Math.random() * (size - size / 3) + size / 3),
+    );
+  }, [isLoading, showSkeletons]);
 
   const draggingBorders = useMemo(() => {
     const isDraggingColumn = draggingColumn?.id === column.id;
@@ -151,22 +151,23 @@ export const MRT_TableBodyCell = ({
   }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
 
   const isEditable =
-    (enableEditing instanceof Function ? enableEditing(row) : enableEditing) &&
-    (columnDef.enableEditing instanceof Function
-      ? columnDef.enableEditing(row)
-      : columnDef.enableEditing) !== false;
+    parseFromValuesOrFunc(enableEditing, row) &&
+    parseFromValuesOrFunc(columnDef.enableEditing, row) !== false;
 
   const isEditing =
     isEditable &&
-    editingMode !== 'modal' &&
-    (editingMode === 'table' ||
+    !['modal', 'custom'].includes(editDisplayMode as string) &&
+    (editDisplayMode === 'table' ||
       editingRow?.id === row.id ||
       editingCell?.id === cell.id) &&
     !row.getIsGrouped();
 
+  const isCreating =
+    isEditable && createDisplayMode === 'row' && creatingRow?.id === row.id;
+
   const handleDoubleClick = (event: MouseEvent<HTMLTableCellElement>) => {
     tableCellProps?.onDoubleClick?.(event);
-    if (isEditable && editingMode === 'cell') {
+    if (isEditable && editDisplayMode === 'cell') {
       setEditingCell(cell);
       queueMicrotask(() => {
         const textField = editInputRefs.current[column.id];
@@ -203,7 +204,8 @@ export const MRT_TableBodyCell = ({
       onDoubleClick={handleDoubleClick}
       sx={(theme) => ({
         alignItems: layoutMode === 'grid' ? 'center' : undefined,
-        cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit',
+        cursor:
+          isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit',
         justifyContent:
           layoutMode === 'grid' ? tableCellProps.align : undefined,
         overflow: 'hidden',
@@ -231,11 +233,12 @@ export const MRT_TableBodyCell = ({
               }rem`
             : undefined,
         textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
-        whiteSpace: density === 'compact' ? 'nowrap' : 'normal',
+        whiteSpace:
+          row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal',
         zIndex:
           draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0,
         '&:hover': {
-          outline: ['table', 'cell'].includes(editingMode ?? '')
+          outline: ['table', 'cell'].includes(editDisplayMode ?? '')
             ? `1px solid ${theme.palette.text.secondary}`
             : undefined,
           outlineOffset: '-1px',
@@ -265,11 +268,7 @@ export const MRT_TableBodyCell = ({
           column.id === 'mrt-row-numbers' ? (
           rowIndex + 1
         ) : column.id === 'mrt-row-drag' ? (
-          <MRT_TableBodyRowGrabHandle
-            cell={cell}
-            rowRef={rowRef}
-            table={table}
-          />
+          <MRT_TableBodyRowGrabHandle row={row} rowRef={rowRef} table={table} />
         ) : columnDefType === 'display' &&
           (column.id === 'mrt-row-select' ||
             column.id === 'mrt-row-expand' ||
@@ -281,7 +280,7 @@ export const MRT_TableBodyCell = ({
             row,
             table,
           })
-        ) : isEditing ? (
+        ) : isCreating || isEditing ? (
           <MRT_EditCellTextField cell={cell} table={table} />
         ) : (enableClickToCopy || columnDef.enableClickToCopy) &&
           columnDef.enableClickToCopy !== false ? (
@@ -302,4 +301,4 @@ export const MRT_TableBodyCell = ({
 export const Memo_MRT_TableBodyCell = memo(
   MRT_TableBodyCell,
   (prev, next) => next.cell === prev.cell,
-);
+) as typeof MRT_TableBodyCell;

package/src/body/MRT_TableBodyCellValue.tsx

@@ -6,12 +6,15 @@ import { type MRT_Cell, type MRT_TableInstance } from '../types';
 
 const allowedTypes = ['string', 'number'];
 
-interface Props {
-  cell: MRT_Cell;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  cell: MRT_Cell<TData>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableBodyCellValue = ({ cell, table }: Props) => {
+export const MRT_TableBodyCellValue = <TData extends Record<string, any>>({
+  cell,
+  table,
+}: Props<TData>) => {
   const {
     getState,
     options: { enableFilterMatchHighlighting },