material-react-table 2.8.0 → 2.9.0

package/locales/ja/index.esm.js

@@ -75,10 +75,10 @@ const MRT_Localization_JA = {
     showHideColumns: '列の表示状態',
     showHideFilters: '検索バーを表示',
     showHideSearch: '検索',
-    sortByColumnAsc: '{column}を昇順でを並べ替え',
-    sortByColumnDesc: '{column}を降順でを並べ替え',
-    sortedByColumnAsc: '{column}を昇順でを並べ替え',
-    sortedByColumnDesc: '{column}を降順でを並べ替え',
+    sortByColumnAsc: '{column}を昇順で並べ替え',
+    sortByColumnDesc: '{column}を降順で並べ替え',
+    sortedByColumnAsc: '{column}を昇順で並べ替え',
+    sortedByColumnDesc: '{column}を降順で並べ替え',
     thenBy: 'さらに',
     toggleDensity: 'テーブルの高さを変更',
     toggleFullScreen: 'フルスクリーン切り替え',

package/locales/ja/index.js

@@ -79,10 +79,10 @@ const MRT_Localization_JA = {
     showHideColumns: '列の表示状態',
     showHideFilters: '検索バーを表示',
     showHideSearch: '検索',
-    sortByColumnAsc: '{column}を昇順でを並べ替え',
-    sortByColumnDesc: '{column}を降順でを並べ替え',
-    sortedByColumnAsc: '{column}を昇順でを並べ替え',
-    sortedByColumnDesc: '{column}を降順でを並べ替え',
+    sortByColumnAsc: '{column}を昇順で並べ替え',
+    sortByColumnDesc: '{column}を降順で並べ替え',
+    sortedByColumnAsc: '{column}を昇順で並べ替え',
+    sortedByColumnDesc: '{column}を降順で並べ替え',
     thenBy: 'さらに',
     toggleDensity: 'テーブルの高さを変更',
     toggleFullScreen: 'フルスクリーン切り替え',

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.8.0",
+  "version": "2.9.0",
   "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.",
@@ -50,8 +50,8 @@
     "build-locales": "pnpm lib:build-locales",
     "build-lib": "pnpm lib:build-lib",
     "dev": "pnpm lib:dev",
-    "lib:build": "rm -rf dist && pnpm build-lib && pnpm build-locales && rm -rf dist/types",
-    "lib:build-locales": "rm -rf locales && node build-locales.mjs",
+    "lib:build": "pnpm build-lib && pnpm build-locales",
+    "lib:build-locales": "node build-locales.mjs",
     "lib:build-lib": "rm -rf dist && rollup -c rollup.config.mjs && size-limit",
     "lib:dev": "rollup -c rollup.config.mjs --watch",
     "lint": "eslint .",
@@ -94,6 +94,8 @@
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rollup": "^2.79.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^11.0.2",
@@ -118,4 +120,4 @@
     "@tanstack/react-virtual": "3.0.2",
     "highlight-words": "1.2.2"
   }
-} 
+}

package/src/components/body/MRT_TableBody.tsx

@@ -151,6 +151,7 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
           ) : (
             <>
               {(virtualRows ?? rows).map((rowOrVirtualRow, staticRowIndex) => {
+                let row = rowOrVirtualRow as MRT_Row<TData>;
                 if (rowVirtualizer) {
                   if (renderDetailPanel) {
                     if (rowOrVirtualRow.index % 2 === 1) {
@@ -161,10 +162,8 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
                   } else {
                     staticRowIndex = rowOrVirtualRow.index;
                   }
+                  row = rows[staticRowIndex];
                 }
-                const row = rowVirtualizer
-                  ? rows[staticRowIndex]
-                  : (rowOrVirtualRow as MRT_Row<TData>);
                 const props = {
                   ...commonRowProps,
                   pinnedRowIds,

package/src/components/body/MRT_TableBodyCell.tsx

@@ -27,9 +27,9 @@ interface Props<TData extends MRT_RowData> extends TableCellProps {
   measureElement?: (element: HTMLTableCellElement) => void;
   numRows?: number;
   rowRef: RefObject<HTMLTableRowElement>;
+  staticColumnIndex?: number;
   staticRowIndex: number;
   table: MRT_TableInstance<TData>;
-  virtualColumnIndex?: number;
 }
 
 export const MRT_TableBodyCell = <TData extends MRT_RowData>({
@@ -37,9 +37,9 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   measureElement,
   numRows,
   rowRef,
+  staticColumnIndex,
   staticRowIndex,
   table,
-  virtualColumnIndex,
   ...rest
 }: Props<TData>) => {
   const theme = useTheme();
@@ -52,6 +52,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       editDisplayMode,
       enableClickToCopy,
       enableColumnOrdering,
+      enableColumnPinning,
       enableEditing,
       enableGrouping,
       layoutMode,
@@ -162,6 +163,11 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     staticRowIndex,
   ]);
 
+  const isColumnPinned =
+    enableColumnPinning &&
+    columnDef.columnDefType !== 'group' &&
+    column.getIsPinned();
+
   const isEditable =
     !cell.getIsPlaceholder() &&
     parseFromValuesOrFunc(enableEditing, row) &&
@@ -212,7 +218,8 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   return (
     <TableCell
       align={theme.direction === 'rtl' ? 'right' : 'left'}
-      data-index={virtualColumnIndex}
+      data-index={staticColumnIndex}
+      data-pinned={!!isColumnPinned || undefined}
       ref={(node: HTMLTableCellElement) => {
         if (node) {
           measureElement?.(node);

package/src/components/body/MRT_TableBodyRow.tsx

@@ -17,8 +17,14 @@ import {
   type MRT_RowData,
   type MRT_RowVirtualizer,
   type MRT_TableInstance,
+  type MRT_VirtualItem,
 } from '../../types';
-import { getMRTTheme } from '../../utils/style.utils';
+import { getIsRowSelected } from '../../utils/row.utils';
+import {
+  getCommonPinnedCellStyles,
+  getMRTTheme,
+  pinnedBeforeAfterStyles,
+} from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> {
@@ -71,10 +77,13 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
     rowPinning,
   } = getState();
 
+  const visibleCells = row.getVisibleCells();
+
   const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
     columnVirtualizer ?? {};
 
-  const isPinned = enableRowPinning && row.getIsPinned();
+  const isRowSelected = getIsRowSelected({ row, table });
+  const isRowPinned = enableRowPinning && row.getIsPinned();
   const isDraggingRow = draggingRow?.id === row.id;
   const isHoveredRow = hoveredRow?.id === row.id;
 
@@ -130,16 +139,27 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
     selectedRowBackgroundColor,
   } = getMRTTheme(table, theme);
 
+  const cellHighlightColor = isRowSelected
+    ? selectedRowBackgroundColor
+    : isRowPinned
+      ? pinnedRowBackgroundColor
+      : undefined;
+
+  const cellHighlightColorHover =
+    tableRowProps?.hover !== false
+      ? isRowSelected
+        ? cellHighlightColor
+        : theme.palette.mode === 'dark'
+          ? `${lighten(baseBackgroundColor, 0.3)}`
+          : `${darken(baseBackgroundColor, 0.3)}`
+      : undefined;
+
   return (
     <>
       <TableRow
         data-index={renderDetailPanel ? staticRowIndex * 2 : staticRowIndex}
-        data-pinned={!!isPinned || undefined}
-        data-selected={
-          row?.getIsSelected() ||
-          (row?.getIsAllSubRowsSelected() && row.getCanSelectSubRows()) ||
-          undefined
-        }
+        data-pinned={!!isRowPinned || undefined}
+        data-selected={isRowSelected || undefined}
         onDragEnter={handleDragEnter}
         ref={(node: HTMLTableRowElement) => {
           if (node) {
@@ -147,7 +167,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
             rowVirtualizer?.measureElement(node);
           }
         }}
-        selected={row.getIsSelected()}
+        selected={isRowSelected}
         {...tableRowProps}
         style={{
           transform: virtualRow
@@ -157,18 +177,16 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
         }}
         sx={(theme: Theme) => ({
           '&:hover td': {
-            backgroundColor:
-              tableRowProps?.hover !== false
-                ? row.getIsSelected()
-                  ? `${alpha(selectedRowBackgroundColor, 0.3)}`
-                  : theme.palette.mode === 'dark'
-                    ? `${lighten(baseBackgroundColor, 0.05)}`
-                    : `${darken(baseBackgroundColor, 0.05)}`
+            '&:after': {
+              backgroundColor: cellHighlightColorHover
+                ? alpha(cellHighlightColorHover, 0.3)
                 : undefined,
+              ...pinnedBeforeAfterStyles,
+            },
           },
           backgroundColor: `${baseBackgroundColor} !important`,
           bottom:
-            !virtualRow && bottomPinnedIndex !== undefined && isPinned
+            !virtualRow && bottomPinnedIndex !== undefined && isRowPinned
               ? `${
                   bottomPinnedIndex * rowHeight +
                   (enableStickyFooter ? tableFooterHeight - 1 : 0)
@@ -176,22 +194,22 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
               : undefined,
           boxSizing: 'border-box',
           display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
-          opacity: isPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1,
+          opacity: isRowPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1,
           position: virtualRow
             ? 'absolute'
-            : rowPinningDisplayMode?.includes('sticky') && isPinned
+            : rowPinningDisplayMode?.includes('sticky') && isRowPinned
               ? 'sticky'
               : undefined,
           td: {
-            backgroundColor: row.getIsSelected()
-              ? selectedRowBackgroundColor
-              : isPinned
-                ? pinnedRowBackgroundColor
-                : undefined,
+            '&:after': {
+              backgroundColor: cellHighlightColor,
+              ...pinnedBeforeAfterStyles,
+            },
+            ...getCommonPinnedCellStyles({ table, theme }),
           },
           top: virtualRow
             ? 0
-            : topPinnedIndex !== undefined && isPinned
+            : topPinnedIndex !== undefined && isRowPinned
               ? `${
                   topPinnedIndex * rowHeight +
                   (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
@@ -200,7 +218,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
           transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
           width: '100%',
           zIndex:
-            rowPinningDisplayMode?.includes('sticky') && isPinned
+            rowPinningDisplayMode?.includes('sticky') && isRowPinned
               ? 2
               : undefined,
           ...(sx as any),
@@ -209,37 +227,39 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
         {virtualPaddingLeft ? (
           <td style={{ display: 'flex', width: virtualPaddingLeft }} />
         ) : null}
-        {(virtualColumns ?? row.getVisibleCells()).map((cellOrVirtualCell) => {
-          const cell = columnVirtualizer
-            ? row.getVisibleCells()[(cellOrVirtualCell as VirtualItem).index]
-            : (cellOrVirtualCell as MRT_Cell<TData>);
-          const props = {
-            cell,
-            measureElement:
-              !isDraggingRow && !isHoveredRow
-                ? columnVirtualizer?.measureElement
-                : undefined,
-            numRows,
-            rowRef,
-            staticRowIndex,
-            table,
-            virtualColumnIndex: columnVirtualizer
-              ? (cellOrVirtualCell as VirtualItem).index
-              : undefined,
-          };
-          return cell ? (
-            memoMode === 'cells' &&
-            cell.column.columnDef.columnDefType === 'data' &&
-            !draggingColumn &&
-            !draggingRow &&
-            editingCell?.id !== cell.id &&
-            editingRow?.id !== row.id ? (
-              <Memo_MRT_TableBodyCell key={cell.id} {...props} />
-            ) : (
-              <MRT_TableBodyCell key={cell.id} {...props} />
-            )
-          ) : null;
-        })}
+        {(virtualColumns ?? visibleCells).map(
+          (cellOrVirtualCell, staticColumnIndex) => {
+            let cell = cellOrVirtualCell as MRT_Cell<TData>;
+            if (columnVirtualizer) {
+              staticColumnIndex = (cellOrVirtualCell as MRT_VirtualItem).index;
+              cell = visibleCells[staticColumnIndex];
+            }
+            const props = {
+              cell,
+              measureElement:
+                !isDraggingRow && !isHoveredRow
+                  ? columnVirtualizer?.measureElement
+                  : undefined,
+              numRows,
+              rowRef,
+              staticColumnIndex,
+              staticRowIndex,
+              table,
+            };
+            return cell ? (
+              memoMode === 'cells' &&
+              cell.column.columnDef.columnDefType === 'data' &&
+              !draggingColumn &&
+              !draggingRow &&
+              editingCell?.id !== cell.id &&
+              editingRow?.id !== row.id ? (
+                <Memo_MRT_TableBodyCell key={cell.id} {...props} />
+              ) : (
+                <MRT_TableBodyCell key={cell.id} {...props} />
+              )
+            ) : null;
+          },
+        )}
         {virtualPaddingRight ? (
           <td style={{ display: 'flex', width: virtualPaddingRight }} />
         ) : null}

package/src/components/footer/MRT_TableFooterCell.tsx

@@ -10,24 +10,31 @@ import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends TableCellProps {
   footer: MRT_Header<TData>;
+  staticColumnIndex?: number;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TableFooterCell = <TData extends MRT_RowData>({
   footer,
+  staticColumnIndex,
   table,
   ...rest
 }: Props<TData>) => {
   const theme = useTheme();
   const {
     getState,
-    options: { layoutMode, muiTableFooterCellProps },
+    options: { enableColumnPinning, layoutMode, muiTableFooterCellProps },
   } = table;
   const { density } = getState();
   const { column } = footer;
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
+  const isColumnPinned =
+    enableColumnPinning &&
+    columnDef.columnDefType !== 'group' &&
+    column.getIsPinned();
+
   const args = { column, table };
   const tableCellProps = {
     ...parseFromValuesOrFunc(muiTableFooterCellProps, args),
@@ -45,6 +52,8 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
             : 'left'
       }
       colSpan={footer.colSpan}
+      data-index={staticColumnIndex}
+      data-pinned={!!isColumnPinned || undefined}
       variant="footer"
       {...tableCellProps}
       sx={(theme) => ({

package/src/components/footer/MRT_TableFooterRow.tsx

@@ -6,6 +6,7 @@ import {
   type MRT_HeaderGroup,
   type MRT_RowData,
   type MRT_TableInstance,
+  type MRT_VirtualItem,
 } from '../../types';
 import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
@@ -61,15 +62,25 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
       {virtualPaddingLeft ? (
         <th style={{ display: 'flex', width: virtualPaddingLeft }} />
       ) : null}
-      {(virtualColumns ?? footerGroup.headers).map((footerOrVirtualFooter) => {
-        const footer = virtualColumns
-          ? footerGroup.headers[footerOrVirtualFooter.index]
-          : (footerOrVirtualFooter as MRT_Header<TData>);
+      {(virtualColumns ?? footerGroup.headers).map(
+        (footerOrVirtualFooter, staticColumnIndex) => {
+          let footer = footerOrVirtualFooter as MRT_Header<TData>;
+          if (columnVirtualizer) {
+            staticColumnIndex = (footerOrVirtualFooter as MRT_VirtualItem)
+              .index;
+            footer = footerGroup.headers[staticColumnIndex];
+          }
 
-        return footer ? (
-          <MRT_TableFooterCell footer={footer} key={footer.id} table={table} />
-        ) : null;
-      })}
+          return footer ? (
+            <MRT_TableFooterCell
+              footer={footer}
+              key={footer.id}
+              staticColumnIndex={staticColumnIndex}
+              table={table}
+            />
+          ) : null;
+        },
+      )}
       {virtualPaddingRight ? (
         <th style={{ display: 'flex', width: virtualPaddingRight }} />
       ) : null}

package/src/components/head/MRT_TableHeadCell.tsx

@@ -19,11 +19,13 @@ import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends TableCellProps {
   header: MRT_Header<TData>;
+  staticColumnIndex?: number;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TableHeadCell = <TData extends MRT_RowData>({
   header,
+  staticColumnIndex,
   table,
   ...rest
 }: Props<TData>) => {
@@ -37,6 +39,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
       enableColumnActions,
       enableColumnDragging,
       enableColumnOrdering,
+      enableColumnPinning,
       enableGrouping,
       enableMultiSort,
       layoutMode,
@@ -68,6 +71,11 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
 
   const { draggingBorderColor } = getMRTTheme(table, theme);
 
+  const isColumnPinned =
+    enableColumnPinning &&
+    columnDef.columnDefType !== 'group' &&
+    column.getIsPinned();
+
   const showColumnActions =
     (enableColumnActions || columnDef.enableColumnActions) &&
     columnDef.enableColumnActions !== false;
@@ -147,6 +155,8 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
             : 'left'
       }
       colSpan={header.colSpan}
+      data-index={staticColumnIndex}
+      data-pinned={!!isColumnPinned || undefined}
       onDragEnter={handleDragEnter}
       ref={(node: HTMLTableCellElement) => {
         if (node) {

package/src/components/head/MRT_TableHeadCellResizeHandle.tsx

@@ -25,6 +25,8 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
   const { density } = getState();
   const { column } = header;
 
+  const handler = header.getResizeHandler();
+
   const mx =
     density === 'compact'
       ? '-8px'
@@ -44,8 +46,8 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
         }));
         column.resetSize();
       }}
-      onMouseDown={header.getResizeHandler()}
-      onTouchStart={header.getResizeHandler()}
+      onMouseDown={handler}
+      onTouchStart={handler}
       style={{
         transform:
           column.getIsResizing() && columnResizeMode === 'onEnd'

package/src/components/head/MRT_TableHeadRow.tsx

@@ -7,6 +7,7 @@ import {
   type MRT_HeaderGroup,
   type MRT_RowData,
   type MRT_TableInstance,
+  type MRT_VirtualItem,
 } from '../../types';
 import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
@@ -52,15 +53,25 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
       {virtualPaddingLeft ? (
         <th style={{ display: 'flex', width: virtualPaddingLeft }} />
       ) : null}
-      {(virtualColumns ?? headerGroup.headers).map((headerOrVirtualHeader) => {
-        const header = virtualColumns
-          ? headerGroup.headers[headerOrVirtualHeader.index]
-          : (headerOrVirtualHeader as MRT_Header<TData>);
+      {(virtualColumns ?? headerGroup.headers).map(
+        (headerOrVirtualHeader, staticColumnIndex) => {
+          let header = headerOrVirtualHeader as MRT_Header<TData>;
+          if (columnVirtualizer) {
+            staticColumnIndex = (headerOrVirtualHeader as MRT_VirtualItem)
+              .index;
+            header = headerGroup.headers[staticColumnIndex];
+          }
 
-        return header ? (
-          <MRT_TableHeadCell header={header} key={header.id} table={table} />
-        ) : null;
-      })}
+          return header ? (
+            <MRT_TableHeadCell
+              header={header}
+              key={header.id}
+              staticColumnIndex={staticColumnIndex}
+              table={table}
+            />
+          ) : null;
+        },
+      )}
       {virtualPaddingRight ? (
         <th style={{ display: 'flex', width: virtualPaddingRight }} />
       ) : null}

package/src/components/inputs/MRT_EditCellTextField.tsx

@@ -35,11 +35,10 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
   const { column, row } = cell;
   const { columnDef } = column;
   const { creatingRow, editingRow } = getState();
-  const { editSelectOptions } = columnDef;
+  const { editSelectOptions, editVariant } = columnDef;
 
   const isCreating = creatingRow?.id === row.id;
   const isEditing = editingRow?.id === row.id;
-  const isSelectEdit = columnDef.editVariant === 'select';
 
   const [value, setValue] = useState(() => cell.getValue<string>());
 
@@ -66,6 +65,8 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
     table,
   });
 
+  const isSelectEdit = editVariant === 'select' || textFieldProps?.select;
+
   const saveInputValueToRowCache = (newValue: string) => {
     //@ts-ignore
     row._valuesCache[column.id] = newValue;
@@ -79,7 +80,7 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     textFieldProps.onChange?.(event);
     setValue(event.target.value);
-    if (textFieldProps?.select) {
+    if (isSelectEdit) {
       saveInputValueToRowCache(event.target.value);
     }
   };

package/src/components/inputs/MRT_SelectCheckbox.tsx

@@ -8,19 +8,18 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
+import { getIsRowSelected } from '../../utils/row.utils';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends CheckboxProps {
   row?: MRT_Row<TData>;
-  selectAll?: boolean;
   staticRowIndex?: number;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
   row,
-  selectAll,
   staticRowIndex,
   table,
   ...rest
@@ -39,6 +38,8 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
   } = table;
   const { density, isLoading } = getState();
 
+  const selectAll = !row;
+
   const checkboxProps = {
     ...(!row
       ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
@@ -92,10 +93,7 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
     'aria-label': selectAll
       ? localization.toggleSelectAll
       : localization.toggleSelectRow,
-    checked: selectAll
-      ? allRowsSelected
-      : row?.getIsSelected() ||
-        (row?.getIsAllSubRowsSelected() && row.getCanSelectSubRows()),
+    checked: selectAll ? allRowsSelected : getIsRowSelected({ row, table }),
     disabled:
       isLoading || (row && !row.getCanSelect()) || row?.id === 'mrt-row-create',
     inputProps: {

package/src/components/table/MRT_Table.tsx

@@ -27,6 +27,7 @@ export const MRT_Table = <TData extends MRT_RowData>({
       layoutMode,
       memoMode,
       muiTableProps,
+      renderCaption,
     },
   } = table;
   const { columnSizing, columnSizingInfo, columnVisibility, isFullScreen } =
@@ -37,6 +38,8 @@ export const MRT_Table = <TData extends MRT_RowData>({
     ...rest,
   };
 
+  const Caption = parseFromValuesOrFunc(renderCaption, { table });
+
   const columnSizeVars = useMemo(() => {
     const headers = getFlatHeaders();
     const colSizes: { [key: string]: number } = {};
@@ -67,6 +70,7 @@ export const MRT_Table = <TData extends MRT_RowData>({
         ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
       })}
     >
+      {!!Caption && <caption>{Caption}</caption>}
       {enableTableHead && <MRT_TableHead {...commonTableGroupProps} />}
       {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
         <Memo_MRT_TableBody {...commonTableGroupProps} />

package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -139,7 +139,7 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
                 {enableRowSelection &&
                   enableSelectAll &&
                   positionToolbarAlertBanner === 'head-overlay' && (
-                    <MRT_SelectCheckbox selectAll table={table} />
+                    <MRT_SelectCheckbox table={table} />
                   )}{' '}
                 {selectedAlert}
               </Box>

package/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx

@@ -28,6 +28,7 @@ export const getMRT_RowActionsColumnDef = <TData extends MRT_RowData>(
     ...defaultDisplayColumnProps({
       header: 'actions',
       id: 'mrt-row-actions',
+      size: 70,
       tableOptions,
     }),
   };

package/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx

@@ -29,6 +29,7 @@ export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
     ...defaultDisplayColumnProps({
       header: 'move',
       id: 'mrt-row-drag',
+      size: 60,
       tableOptions,
     }),
   };