@novastera-oss/material-react-table 4.0.0-beta.11

package/locales/zh-Hans/index.js

@@ -0,0 +1,98 @@
+'use strict';
+
+const MRT_Localization_ZH_HANS = {
+    language: 'zh-Hans',
+    actions: '操作',
+    and: '与',
+    cancel: '取消',
+    changeFilterMode: '更改过滤模式',
+    changeSearchMode: '更改搜索模式',
+    clearFilter: '清除过滤',
+    clearSearch: '清除搜索',
+    clearSelection: '清除选择',
+    clearSort: '清除排序',
+    clickToCopy: '点击以复制',
+    copy: '复制',
+    collapse: '折叠',
+    collapseAll: '全部折叠',
+    columnActions: '列操作',
+    copiedToClipboard: '已复制至剪贴板',
+    dropToGroupBy: '拖放以按 {column} 分组',
+    edit: '编辑',
+    expand: '展开',
+    expandAll: '全部展开',
+    filterArrIncludes: '包括',
+    filterArrIncludesAll: '包括所有',
+    filterArrIncludesSome: '包括',
+    filterBetween: '介于首尾',
+    filterBetweenInclusive: '介于首尾之间',
+    filterByColumn: '以 {column} 过滤',
+    filterContains: '包含',
+    filterEmpty: '是空字串',
+    filterEndsWith: '结尾为',
+    filterEquals: '等于',
+    filterEqualsString: '等于',
+    filterFuzzy: '模糊搜索',
+    filterGreaterThan: '大于',
+    filterGreaterThanOrEqualTo: '大于等于',
+    filterInNumberRange: '介于',
+    filterIncludesString: '包含',
+    filterIncludesStringSensitive: '包含',
+    filterLessThan: '小于',
+    filterLessThanOrEqualTo: '小于等于',
+    filterMode: '过滤模式：{filterType}',
+    filterNotEmpty: '非空字串',
+    filterNotEquals: '不等于',
+    filterStartsWith: '开首为',
+    filterWeakEquals: '等于',
+    filteringByColumn: '以 {column} 过滤：{filterType} {filterValue}',
+    goToFirstPage: '到第一页',
+    goToLastPage: '到最后一页',
+    goToNextPage: '下一页',
+    goToPreviousPage: '上一页',
+    grab: '拖曳',
+    groupByColumn: '按 {column} 分组',
+    groupedBy: '分组依据 ',
+    hideAll: '隐藏全部',
+    hideColumn: '隐藏 {column} 列',
+    max: '最大',
+    min: '最小',
+    move: '移动',
+    noRecordsToDisplay: '无记录可显示',
+    noResultsFound: '未找到结果',
+    of: '/',
+    or: '或',
+    pin: '固定',
+    pinToLeft: '固定至左边',
+    pinToRight: '固定至右边',
+    resetColumnSize: '重置列大小',
+    resetOrder: '重置排序',
+    rowActions: '行操作',
+    rowNumber: '#',
+    rowNumbers: '行号码',
+    rowsPerPage: '每页行数',
+    save: '保存',
+    search: '搜索',
+    selectedCountOfRowCountRowsSelected: '已选择行：{selectedCount}/{rowCount}',
+    select: '选择',
+    showAll: '显示全部',
+    showAllColumns: '显示全部列',
+    showHideColumns: '显示/隐藏 列',
+    showHideFilters: '显示/隐藏 过滤条件',
+    showHideSearch: '显示/隐藏 搜索条件',
+    sortByColumnAsc: '按 {column} 升序排序',
+    sortByColumnDesc: '按 {column} 倒序排序',
+    sortedByColumnAsc: '已按 {column} 升序排序',
+    sortedByColumnDesc: '已按 {column} 倒序排序',
+    thenBy: '，然后以',
+    toggleDensity: '切换间距',
+    toggleFullScreen: '切换全屏',
+    toggleSelectAll: '切换选择全部',
+    toggleSelectRow: '切换选择行',
+    toggleVisibility: '切换可见度',
+    ungroupByColumn: '取消按 {column} 分组',
+    unpin: '取消固定',
+    unpinAll: '全部取消固定',
+};
+
+exports.MRT_Localization_ZH_HANS = MRT_Localization_ZH_HANS;

package/locales/zh-Hans/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "index.js",
+  "module": "index.esm.js",
+  "sideEffects": false,
+  "types": "index.d.ts"
+}

package/locales/zh-Hant/index.d.ts

@@ -0,0 +1,3 @@
+import { type MRT_Localization } from '../..';
+export declare const MRT_Localization_ZH_HANT: MRT_Localization;
+  

package/locales/zh-Hant/index.esm.d.ts

@@ -0,0 +1,3 @@
+import { type MRT_Localization } from '../..';
+export declare const MRT_Localization_ZH_HANT: MRT_Localization;
+  

package/locales/zh-Hant/index.esm.js

@@ -0,0 +1,96 @@
+const MRT_Localization_ZH_HANT = {
+    language: 'zh-Hant',
+    actions: '動作',
+    and: '與',
+    cancel: '取消',
+    changeFilterMode: '更改過濾模式',
+    changeSearchMode: '更改搜尋模式',
+    clearFilter: '清除過濾',
+    clearSearch: '清除搜尋',
+    clearSelection: '清除選擇',
+    clearSort: '清除排序',
+    clickToCopy: '點擊以複製',
+    copy: '複製',
+    collapse: '折疊',
+    collapseAll: '全部折疊',
+    columnActions: '欄位動作',
+    copiedToClipboard: '已複製至剪貼簿',
+    dropToGroupBy: '拖放以按 {column} 分組',
+    edit: '編輯',
+    expand: '展開',
+    expandAll: '全部展開',
+    filterArrIncludes: '包括',
+    filterArrIncludesAll: '包括所有',
+    filterArrIncludesSome: '包括',
+    filterBetween: '介於首尾',
+    filterBetweenInclusive: '介於首尾之間',
+    filterByColumn: '以 {column} 過濾',
+    filterContains: '包含',
+    filterEmpty: '是空字串',
+    filterEndsWith: '結尾為',
+    filterEquals: '等於',
+    filterEqualsString: '等於',
+    filterFuzzy: '模糊搜索',
+    filterGreaterThan: '大於',
+    filterGreaterThanOrEqualTo: '大於等於',
+    filterInNumberRange: '介於',
+    filterIncludesString: '包含',
+    filterIncludesStringSensitive: '包含',
+    filterLessThan: '小於',
+    filterLessThanOrEqualTo: '小於等於',
+    filterMode: '過濾模式：{filterType}',
+    filterNotEmpty: '非空字串',
+    filterNotEquals: '不等於',
+    filterStartsWith: '開首為',
+    filterWeakEquals: '等於',
+    filteringByColumn: '正以 {column} 過濾：{filterType} {filterValue}',
+    goToFirstPage: '到第一頁',
+    goToLastPage: '到最後一頁',
+    goToNextPage: '下一頁',
+    goToPreviousPage: '上一頁',
+    grab: '拖曳',
+    groupByColumn: '按 {column} 分組',
+    groupedBy: '分組依據 ',
+    hideAll: '隱藏全部',
+    hideColumn: '隱藏 {column} 欄位',
+    max: '最大',
+    min: '最小',
+    move: '移動',
+    noRecordsToDisplay: '無紀錄可顯示',
+    noResultsFound: '未找到結果',
+    of: '/',
+    or: '或',
+    pin: '固定',
+    pinToLeft: '固定至左邊',
+    pinToRight: '固定至右邊',
+    resetColumnSize: '重置欄位大小',
+    resetOrder: '重置排序',
+    rowActions: '橫列動作',
+    rowNumber: '#',
+    rowNumbers: '橫列編號',
+    rowsPerPage: '每頁數量',
+    save: '儲存',
+    search: '搜尋',
+    selectedCountOfRowCountRowsSelected: '已選擇橫列：{selectedCount}/{rowCount}',
+    select: '選擇',
+    showAll: '顯示全部',
+    showAllColumns: '顯示全部欄位',
+    showHideColumns: '顯示/隱藏 欄位',
+    showHideFilters: '顯示/隱藏 過濾條件',
+    showHideSearch: '顯示/隱藏 搜尋條件',
+    sortByColumnAsc: '按 {column} 順序排序',
+    sortByColumnDesc: '按 {column} 倒序排序',
+    sortedByColumnAsc: '已按 {column} 順序排序',
+    sortedByColumnDesc: '已按 {column} 倒序排序',
+    thenBy: '，然後以',
+    toggleDensity: '切換密度',
+    toggleFullScreen: '切換全螢幕',
+    toggleSelectAll: '切換選擇全部',
+    toggleSelectRow: '切換選擇橫列',
+    toggleVisibility: '切換可見度',
+    ungroupByColumn: '取消按 {column} 分組',
+    unpin: '取消固定',
+    unpinAll: '全部取消固定',
+};
+
+export { MRT_Localization_ZH_HANT };

package/locales/zh-Hant/index.js

@@ -0,0 +1,98 @@
+'use strict';
+
+const MRT_Localization_ZH_HANT = {
+    language: 'zh-Hant',
+    actions: '動作',
+    and: '與',
+    cancel: '取消',
+    changeFilterMode: '更改過濾模式',
+    changeSearchMode: '更改搜尋模式',
+    clearFilter: '清除過濾',
+    clearSearch: '清除搜尋',
+    clearSelection: '清除選擇',
+    clearSort: '清除排序',
+    clickToCopy: '點擊以複製',
+    copy: '複製',
+    collapse: '折疊',
+    collapseAll: '全部折疊',
+    columnActions: '欄位動作',
+    copiedToClipboard: '已複製至剪貼簿',
+    dropToGroupBy: '拖放以按 {column} 分組',
+    edit: '編輯',
+    expand: '展開',
+    expandAll: '全部展開',
+    filterArrIncludes: '包括',
+    filterArrIncludesAll: '包括所有',
+    filterArrIncludesSome: '包括',
+    filterBetween: '介於首尾',
+    filterBetweenInclusive: '介於首尾之間',
+    filterByColumn: '以 {column} 過濾',
+    filterContains: '包含',
+    filterEmpty: '是空字串',
+    filterEndsWith: '結尾為',
+    filterEquals: '等於',
+    filterEqualsString: '等於',
+    filterFuzzy: '模糊搜索',
+    filterGreaterThan: '大於',
+    filterGreaterThanOrEqualTo: '大於等於',
+    filterInNumberRange: '介於',
+    filterIncludesString: '包含',
+    filterIncludesStringSensitive: '包含',
+    filterLessThan: '小於',
+    filterLessThanOrEqualTo: '小於等於',
+    filterMode: '過濾模式：{filterType}',
+    filterNotEmpty: '非空字串',
+    filterNotEquals: '不等於',
+    filterStartsWith: '開首為',
+    filterWeakEquals: '等於',
+    filteringByColumn: '正以 {column} 過濾：{filterType} {filterValue}',
+    goToFirstPage: '到第一頁',
+    goToLastPage: '到最後一頁',
+    goToNextPage: '下一頁',
+    goToPreviousPage: '上一頁',
+    grab: '拖曳',
+    groupByColumn: '按 {column} 分組',
+    groupedBy: '分組依據 ',
+    hideAll: '隱藏全部',
+    hideColumn: '隱藏 {column} 欄位',
+    max: '最大',
+    min: '最小',
+    move: '移動',
+    noRecordsToDisplay: '無紀錄可顯示',
+    noResultsFound: '未找到結果',
+    of: '/',
+    or: '或',
+    pin: '固定',
+    pinToLeft: '固定至左邊',
+    pinToRight: '固定至右邊',
+    resetColumnSize: '重置欄位大小',
+    resetOrder: '重置排序',
+    rowActions: '橫列動作',
+    rowNumber: '#',
+    rowNumbers: '橫列編號',
+    rowsPerPage: '每頁數量',
+    save: '儲存',
+    search: '搜尋',
+    selectedCountOfRowCountRowsSelected: '已選擇橫列：{selectedCount}/{rowCount}',
+    select: '選擇',
+    showAll: '顯示全部',
+    showAllColumns: '顯示全部欄位',
+    showHideColumns: '顯示/隱藏 欄位',
+    showHideFilters: '顯示/隱藏 過濾條件',
+    showHideSearch: '顯示/隱藏 搜尋條件',
+    sortByColumnAsc: '按 {column} 順序排序',
+    sortByColumnDesc: '按 {column} 倒序排序',
+    sortedByColumnAsc: '已按 {column} 順序排序',
+    sortedByColumnDesc: '已按 {column} 倒序排序',
+    thenBy: '，然後以',
+    toggleDensity: '切換密度',
+    toggleFullScreen: '切換全螢幕',
+    toggleSelectAll: '切換選擇全部',
+    toggleSelectRow: '切換選擇橫列',
+    toggleVisibility: '切換可見度',
+    ungroupByColumn: '取消按 {column} 分組',
+    unpin: '取消固定',
+    unpinAll: '全部取消固定',
+};
+
+exports.MRT_Localization_ZH_HANT = MRT_Localization_ZH_HANT;

package/locales/zh-Hant/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "index.js",
+  "module": "index.esm.js",
+  "sideEffects": false,
+  "types": "index.d.ts"
+}

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "@novastera-oss/material-react-table",
+  "version": "4.0.0-beta.11",
+  "description": "Material UI V9 Material React Table",
+  "author": "Novastera",
+  "license": "MIT",
+  "keywords": [
+    "material-ui",
+    "mui",
+    "react",
+    "table",
+    "datagrid"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/novastera/material-react-table.git"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./locales/*": {
+      "types": "./locales/*/index.d.ts",
+      "import": "./locales/*/index.esm.js",
+      "require": "./locales/*/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "locales",
+    "src"
+  ],
+  "dependencies": {
+    "@tanstack/match-sorter-utils": "^8.15.1",
+    "@tanstack/react-table": "^8.21.2",
+    "@tanstack/react-virtual": "^3.13.0",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
+    "highlight-words": "^1.1.0"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@faker-js/faker": "^9.3.0",
+    "@mui/material": "^9.0.0",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/x-date-pickers": "^9.0.0",
+    "@rollup/plugin-typescript": "^12.0.0",
+    "@size-limit/preset-small-lib": "^12.0.0",
+    "@storybook/react": "10.3.6",
+    "@storybook/react-vite": "10.3.6",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@typescript-eslint/eslint-plugin": "^8.59.3",
+    "@typescript-eslint/parser": "^8.59.3",
+    "@vitejs/plugin-react": "^6.0.0",
+    "eslint": "^10.3.0",
+    "eslint-plugin-perfectionist": "^5.9.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-is": "^19.0.0",
+    "rimraf": "^6.1.3",
+    "rollup": "^4.0.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^3.0.0",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "size-limit": "^12.1.0",
+    "storybook": "10.3.6",
+    "storybook-dark-mode": "^5.0.0",
+    "typescript": "^6.0.0",
+    "vite": "^8.0.12"
+  },
+  "peerDependencies": {
+    "@emotion/react": ">=11.13",
+    "@emotion/styled": ">=11.13",
+    "@mui/material": ">=9.0",
+    "@mui/icons-material": ">=9.0",
+    "@mui/x-date-pickers": ">=9.0",
+    "react": ">=19.0",
+    "react-dom": ">=19.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "lib:build": "pnpm lib:build-lib && pnpm lib:build-locales",
+    "lib:build-lib": "rollup -c",
+    "lib:build-locales": "node build-locales.mjs",
+    "lib:dev": "rollup -c -w",
+    "lint": "eslint src --ext .ts,.tsx",
+    "size": "size-limit",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "type-check": "tsc --noEmit"
+  }
+}

package/src/components/MaterialReactTable.tsx

@@ -0,0 +1,36 @@
+import { useMaterialReactTable } from '../hooks/useMaterialReactTable';
+import {
+  type MRT_RowData,
+  type MRT_TableInstance,
+  type MRT_TableOptions,
+  type Xor,
+} from '../types';
+import { MRT_TablePaper } from './table/MRT_TablePaper';
+
+type TableInstanceProp<TData extends MRT_RowData> = {
+  table: MRT_TableInstance<TData>;
+};
+
+export type MaterialReactTableProps<TData extends MRT_RowData> = Xor<
+  TableInstanceProp<TData>,
+  MRT_TableOptions<TData>
+>;
+
+const isTableInstanceProp = <TData extends MRT_RowData>(
+  props: MaterialReactTableProps<TData>,
+): props is TableInstanceProp<TData> =>
+  (props as TableInstanceProp<TData>).table !== undefined;
+
+export const MaterialReactTable = <TData extends MRT_RowData>(
+  props: MaterialReactTableProps<TData>,
+) => {
+  let table: MRT_TableInstance<TData>;
+
+  if (isTableInstanceProp(props)) {
+    table = props.table;
+  } else {
+    table = useMaterialReactTable(props);
+  }
+
+  return <MRT_TablePaper table={table} />;
+};

package/src/components/body/MRT_TableBody.tsx

@@ -0,0 +1,233 @@
+import { memo, useMemo } from 'react';
+import { type VirtualItem } from '@tanstack/react-virtual';
+import TableBody, { type TableBodyProps } from '@mui/material/TableBody';
+import Typography from '@mui/material/Typography';
+import { MRT_TableBodyRow, Memo_MRT_TableBodyRow } from './MRT_TableBodyRow';
+import { useMRT_RowVirtualizer } from '../../hooks/useMRT_RowVirtualizer';
+import { useMRT_Rows } from '../../hooks/useMRT_Rows';
+import {
+  type MRT_ColumnVirtualizer,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+export interface MRT_TableBodyProps<TData extends MRT_RowData>
+  extends TableBodyProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableBody = <TData extends MRT_RowData>({
+  columnVirtualizer,
+  table,
+  ...rest
+}: MRT_TableBodyProps<TData>) => {
+  const {
+    getBottomRows,
+    getIsSomeRowsPinned,
+    getRowModel,
+    getState,
+    getTopRows,
+    options: {
+      enableStickyFooter,
+      enableStickyHeader,
+      layoutMode,
+      localization,
+      memoMode,
+      muiTableBodyProps,
+      renderDetailPanel,
+      renderEmptyRowsFallback,
+      rowPinningDisplayMode,
+    },
+    refs: { tableFooterRef, tableHeadRef, tablePaperRef },
+  } = table;
+  const { columnFilters, globalFilter, isFullScreen, rowPinning } = getState();
+
+  const tableBodyProps = {
+    ...parseFromValuesOrFunc(muiTableBodyProps, { table }),
+    ...rest,
+  };
+
+  const tableHeadHeight =
+    ((enableStickyHeader || isFullScreen) &&
+      tableHeadRef.current?.clientHeight) ||
+    0;
+  const tableFooterHeight =
+    (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
+
+  const pinnedRowIds = useMemo(() => {
+    if (!rowPinning.bottom?.length && !rowPinning.top?.length) return [];
+    return getRowModel()
+      .rows.filter((row) => row.getIsPinned())
+      .map((r) => r.id);
+  }, [rowPinning, getRowModel().rows]);
+
+  const rows = useMRT_Rows(table);
+
+  const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
+
+  const { virtualRows } = rowVirtualizer ?? {};
+
+  const commonRowProps = {
+    columnVirtualizer,
+    numRows: rows.length,
+    table,
+  };
+
+  return (
+    <>
+      {!rowPinningDisplayMode?.includes('sticky') &&
+        getIsSomeRowsPinned('top') && (
+          <TableBody
+            {...tableBodyProps}
+            sx={[
+              {
+                display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+                position: 'sticky',
+                top: tableHeadHeight - 1,
+                zIndex: 1,
+              },
+              ...(Array.isArray(tableBodyProps?.sx)
+                ? tableBodyProps.sx
+                : [tableBodyProps?.sx]),
+            ]}
+          >
+            {getTopRows().map((row, staticRowIndex) => {
+              const props = {
+                ...commonRowProps,
+                row,
+                staticRowIndex,
+              };
+              return memoMode === 'rows' ? (
+                <Memo_MRT_TableBodyRow key={row.id} {...props} />
+              ) : (
+                <MRT_TableBodyRow key={row.id} {...props} />
+              );
+            })}
+          </TableBody>
+        )}
+      <TableBody
+        {...tableBodyProps}
+        sx={[
+          {
+            display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+            height: rowVirtualizer
+              ? `${rowVirtualizer.getTotalSize()}px`
+              : undefined,
+            minHeight: !rows.length ? '100px' : undefined,
+            position: 'relative',
+          },
+          ...(Array.isArray(tableBodyProps?.sx)
+            ? tableBodyProps.sx
+            : [tableBodyProps?.sx]),
+        ]}
+      >
+        {tableBodyProps?.children ??
+          (!rows.length ? (
+            <tr
+              style={{
+                display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+              }}
+            >
+              <td
+                colSpan={table.getVisibleLeafColumns().length}
+                style={{
+                  display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+                }}
+              >
+                {renderEmptyRowsFallback?.({ table }) ?? (
+                  <Typography
+                    sx={{
+                      color: 'text.secondary',
+                      fontStyle: 'italic',
+                      maxWidth: `min(100vw, ${
+                        tablePaperRef.current?.clientWidth ? tablePaperRef.current?.clientWidth + "px" : "100%"
+                      })`,
+                      py: '2rem',
+                      textAlign: 'center',
+                      width: '100%',
+                    }}
+                  >
+                    {globalFilter || columnFilters.length
+                      ? localization.noResultsFound
+                      : localization.noRecordsToDisplay}
+                  </Typography>
+                )}
+              </td>
+            </tr>
+          ) : (
+            <>
+              {(virtualRows ?? rows).map((rowOrVirtualRow, staticRowIndex) => {
+                let row = rowOrVirtualRow as MRT_Row<TData>;
+                if (rowVirtualizer) {
+                  if (renderDetailPanel) {
+                    if (rowOrVirtualRow.index % 2 === 1) {
+                      return null;
+                    } else {
+                      staticRowIndex = rowOrVirtualRow.index / 2;
+                    }
+                  } else {
+                    staticRowIndex = rowOrVirtualRow.index;
+                  }
+                  row = rows[staticRowIndex];
+                }
+                const props = {
+                  ...commonRowProps,
+                  pinnedRowIds,
+                  row,
+                  rowVirtualizer,
+                  staticRowIndex,
+                  virtualRow: rowVirtualizer
+                    ? (rowOrVirtualRow as VirtualItem)
+                    : undefined,
+                };
+                const key = `${row.id}-${row.index}`;
+                return memoMode === 'rows' ? (
+                  <Memo_MRT_TableBodyRow key={key} {...props} />
+                ) : (
+                  <MRT_TableBodyRow key={key} {...props} />
+                );
+              })}
+            </>
+          ))}
+      </TableBody>
+      {!rowPinningDisplayMode?.includes('sticky') &&
+        getIsSomeRowsPinned('bottom') && (
+          <TableBody
+            {...tableBodyProps}
+            sx={[
+              {
+                bottom: tableFooterHeight - 1,
+                display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+                position: 'sticky',
+                zIndex: 1,
+              },
+              ...(Array.isArray(tableBodyProps?.sx)
+                ? tableBodyProps.sx
+                : [tableBodyProps?.sx]),
+            ]}
+          >
+            {getBottomRows().map((row, staticRowIndex) => {
+              const props = {
+                ...commonRowProps,
+                row,
+                staticRowIndex,
+              };
+              return memoMode === 'rows' ? (
+                <Memo_MRT_TableBodyRow key={row.id} {...props} />
+              ) : (
+                <MRT_TableBodyRow key={row.id} {...props} />
+              );
+            })}
+          </TableBody>
+        )}
+    </>
+  );
+};
+
+export const Memo_MRT_TableBody = memo(
+  MRT_TableBody,
+  (prev, next) => prev.table.options.data === next.table.options.data,
+) as typeof MRT_TableBody;