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

package/src/body/MRT_TableBody.tsx

@@ -9,6 +9,7 @@ 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<TData extends Record<string, any>> {
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
@@ -26,13 +27,20 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
   virtualPaddingRight,
 }: Props<TData>) => {
   const {
-    getRowModel,
+    getBottomRows,
+    getCenterRows,
     getPrePaginationRowModel,
+    getRowModel,
     getState,
+    getIsSomeRowsPinned,
+    getTopRows,
     options: {
       enableGlobalFilterRankedResults,
       enablePagination,
+      enableRowPinning,
       enableRowVirtualization,
+      enableStickyHeader,
+      enableStickyFooter,
       layoutMode,
       localization,
       manualExpanding,
@@ -43,10 +51,11 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
       memoMode,
       muiTableBodyProps,
       renderEmptyRowsFallback,
+      rowPinningDisplayMode,
       rowVirtualizerInstanceRef,
       rowVirtualizerOptions,
     },
-    refs: { tableContainerRef, tablePaperRef },
+    refs: { tableContainerRef, tablePaperRef, tableFooterRef, tableHeadRef },
   } = table;
   const {
     columnFilters,
@@ -56,17 +65,21 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
     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 =
-    rowVirtualizerOptions instanceof Function
-      ? rowVirtualizerOptions({ table })
-      : rowVirtualizerOptions;
+  const tableHeadHeight =
+    ((enableStickyHeader || isFullScreen) &&
+      tableHeadRef.current?.clientHeight) ||
+    0;
+  const tableFooterHeight =
+    (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
 
   const shouldRankResults = useMemo(
     () =>
@@ -92,21 +105,45 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
     ],
   );
 
+  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:
@@ -123,7 +160,7 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
             ? (element) => element?.getBoundingClientRect().height
             : undefined,
         overscan: 4,
-        ...vProps,
+        ...rowVirtualizerProps,
       })
     : undefined;
 
@@ -136,68 +173,135 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
     : 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<TData>);
+              <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} />
@@ -205,9 +309,9 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
                 <MRT_TableBodyRow key={row.id} {...props} />
               );
             })}
-          </>
-        ))}
-    </TableBody>
+          </TableBody>
+        )}
+    </>
   );
 };
 

package/src/body/MRT_TableBodyCell.tsx

@@ -18,6 +18,7 @@ import {
   getCommonCellStyles,
   getIsFirstColumn,
   getIsLastColumn,
+  parseFromValuesOrFunc,
 } from '../column.utils';
 import { type VirtualItem } from '@tanstack/react-virtual';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
@@ -77,25 +78,27 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
   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 =
-    muiSkeletonProps instanceof Function
-      ? muiSkeletonProps({ cell, column, row, table })
-      : muiSkeletonProps;
+  const skeletonProps = parseFromValuesOrFunc(muiSkeletonProps, {
+    cell,
+    column,
+    row,
+    table,
+  });
 
   const [skeletonWidth, setSkeletonWidth] = useState(100);
   useEffect(() => {
@@ -148,10 +151,8 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
   }, [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 &&
@@ -232,7 +233,8 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
               }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': {

package/src/body/MRT_TableBodyRow.tsx

@@ -1,15 +1,23 @@
-import { type DragEvent, memo, useRef } from 'react';
+import { type DragEvent, memo, useRef, useMemo } from 'react';
 import TableRow from '@mui/material/TableRow';
-import { type Theme, alpha, darken, lighten } from '@mui/material/styles';
+import {
+  type Theme,
+  alpha,
+  darken,
+  lighten,
+  useTheme,
+} from '@mui/material/styles';
 import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   measureElement?: (element: HTMLTableRowElement) => void;
   numRows: number;
+  pinnedRowIds?: string[];
   row: MRT_Row<TData>;
   rowIndex: number;
   table: MRT_TableInstance<TData>;
@@ -23,6 +31,7 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
   columnVirtualizer,
   measureElement,
   numRows,
+  pinnedRowIds,
   row,
   rowIndex,
   table,
@@ -31,24 +40,70 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
   virtualPaddingRight,
   virtualRow,
 }: Props<TData>) => {
+  const theme = useTheme();
+
   const {
     getState,
     options: {
       enableRowOrdering,
+      enableRowPinning,
+      enableStickyFooter,
+      enableStickyHeader,
       layoutMode,
+      rowPinningDisplayMode,
       memoMode,
       muiTableBodyRowProps,
       renderDetailPanel,
     },
+    refs: { tableHeadRef, tableFooterRef },
     setHoveredRow,
   } = table;
-  const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } =
-    getState();
+  const {
+    density,
+    draggingColumn,
+    draggingRow,
+    editingCell,
+    editingRow,
+    hoveredRow,
+    isFullScreen,
+    rowPinning,
+  } = getState();
+
+  const isPinned = enableRowPinning && row.getIsPinned();
+
+  const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
+    row,
+    staticRowIndex: rowIndex,
+    table,
+  });
+
+  const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
+    if (
+      !enableRowPinning ||
+      !rowPinningDisplayMode?.includes('sticky') ||
+      !pinnedRowIds ||
+      !row.getIsPinned()
+    )
+      return [];
+    return [
+      [...pinnedRowIds].reverse().indexOf(row.id),
+      pinnedRowIds.indexOf(row.id),
+    ];
+  }, [pinnedRowIds, rowPinning]);
+
+  const tableHeadHeight =
+    ((enableStickyHeader || isFullScreen) &&
+      tableHeadRef.current?.clientHeight) ||
+    0;
+  const tableFooterHeight =
+    (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
+
+  const sx = parseFromValuesOrFunc(tableRowProps?.sx, theme as any);
 
-  const tableRowProps =
-    muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps({ row, staticRowIndex: rowIndex, table })
-      : muiTableBodyRowProps;
+  const rowHeight =
+    // @ts-ignore
+    parseInt(tableRowProps?.style?.height ?? sx?.height, 10) ||
+    (density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69);
 
   const handleDragEnter = (_e: DragEvent) => {
     if (enableRowOrdering && draggingRow) {
@@ -72,15 +127,50 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
         }}
         {...tableRowProps}
         sx={(theme: Theme) => ({
-          backgroundColor: lighten(theme.palette.background.default, 0.06),
+          backgroundColor: `${lighten(
+            theme.palette.background.default,
+            0.06,
+          )} !important`,
           boxSizing: 'border-box',
+          bottom:
+            bottomPinnedIndex !== undefined && isPinned
+              ? `${
+                  bottomPinnedIndex * rowHeight +
+                  (enableStickyFooter ? tableFooterHeight - 1 : 0)
+                }px`
+              : undefined,
           display: layoutMode === 'grid' ? 'flex' : 'table-row',
-          opacity:
-            draggingRow?.id === row.id || hoveredRow?.id === row.id ? 0.5 : 1,
-          position: virtualRow ? 'absolute' : undefined,
+          opacity: isPinned
+            ? 0.98
+            : draggingRow?.id === row.id || hoveredRow?.id === row.id
+            ? 0.5
+            : 1,
+          position: virtualRow
+            ? 'absolute'
+            : rowPinningDisplayMode?.includes('sticky') && isPinned
+            ? 'sticky'
+            : undefined,
           transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
-          top: virtualRow ? 0 : undefined,
+          top: virtualRow
+            ? 0
+            : topPinnedIndex !== undefined && isPinned
+            ? `${
+                topPinnedIndex * rowHeight +
+                (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
+              }px`
+            : undefined,
           width: '100%',
+          zIndex:
+            rowPinningDisplayMode?.includes('sticky') && isPinned
+              ? 1
+              : undefined,
+          td: {
+            backgroundColor: row.getIsSelected()
+              ? alpha(theme.palette.primary.main, 0.2)
+              : isPinned
+              ? alpha(theme.palette.primary.main, 0.1)
+              : undefined,
+          },
           '&:hover td': {
             backgroundColor:
               tableRowProps?.hover !== false
@@ -91,9 +181,7 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
                   : `${darken(theme.palette.background.default, 0.05)}`
                 : undefined,
           },
-          ...(tableRowProps?.sx instanceof Function
-            ? tableRowProps.sx(theme)
-            : (tableRowProps?.sx as any)),
+          ...(sx as any),
         })}
         style={{
           transform: virtualRow

package/src/body/MRT_TableBodyRowGrabHandle.tsx

@@ -1,6 +1,7 @@
 import { type DragEvent, type RefObject } from 'react';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   row: MRT_Row<TData>;
@@ -17,10 +18,10 @@ export const MRT_TableBodyRowGrabHandle = <TData extends Record<string, any>>({
     options: { muiRowDragHandleProps },
   } = table;
 
-  const iconButtonProps =
-    muiRowDragHandleProps instanceof Function
-      ? muiRowDragHandleProps({ row, table })
-      : muiRowDragHandleProps;
+  const iconButtonProps = parseFromValuesOrFunc(muiRowDragHandleProps, {
+    row,
+    table,
+  });
 
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
     iconButtonProps?.onDragStart?.(event);

package/src/body/MRT_TableBodyRowPinButton.tsx

@@ -0,0 +1,46 @@
+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';
+
+interface Props<TData extends Record<string, any>> {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableBodyRowPinButton = <TData extends Record<string, any>>({
+  row,
+  table,
+}: Props<TData>) => {
+  const {
+    getState,
+    options: { enableRowPinning, rowPinningDisplayMode },
+  } = table;
+  const { density } = getState();
+
+  const canPin = parseFromValuesOrFunc(enableRowPinning, row as any);
+
+  if (!canPin) return null;
+
+  if (rowPinningDisplayMode === 'top-and-bottom' && !row.getIsPinned()) {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: density === 'compact' ? 'row' : 'column',
+        }}
+      >
+        <MRT_RowPinButton row={row} table={table} pinningPosition="top" />
+        <MRT_RowPinButton row={row} table={table} pinningPosition="bottom" />
+      </Box>
+    );
+  }
+
+  return (
+    <MRT_RowPinButton
+      row={row}
+      table={table}
+      pinningPosition={rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top'}
+    />
+  );
+};