@cutting/material-react-table 4.0.5 → 5.0.0-beta.1

package/locales/zh-Hans/index.mjs

@@ -0,0 +1,97 @@
+//#region src/locales/zh-Hans.ts
+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: "全部取消固定"
+};
+//#endregion
+export { MRT_Localization_ZH_HANS };

package/locales/zh-Hans/package.json

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

package/locales/zh-Hant/index.mjs

@@ -0,0 +1,97 @@
+//#region src/locales/zh-Hant.ts
+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: "全部取消固定"
+};
+//#endregion
+export { MRT_Localization_ZH_HANT };

package/locales/zh-Hant/package.json

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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.5",
+  "version": "5.0.0-beta.1",
   "license": "MIT",
   "name": "@cutting/material-react-table",
   "description": "Maintenance fork of material-react-table updated for Material UI v9. A fully featured Material UI implementation of TanStack React Table V8.",
@@ -29,9 +29,9 @@
     "access": "public"
   },
   "sideEffects": false,
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "typings": "dist/index.d.ts",
+  "type": "module",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist",
     "locales",
@@ -40,62 +40,54 @@
   "size-limit": [
     {
       "path": "dist/index.js",
-      "limit": "56 KB"
-    },
-    {
-      "path": "dist/index.esm.js",
-      "limit": "53 KB"
+      "limit": "65 KB"
     }
   ],
   "engines": {
-    "node": ">=24"
+    "node": ">=22"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/eslintrc": "^3.3.7",
     "@eslint/js": "^10.0.1",
-    "@faker-js/faker": "^10.5.0",
-    "@mui/icons-material": "^9.1.1",
-    "@mui/material": "^9.1.1",
-    "@mui/x-date-pickers": "^9.6.0",
-    "@rollup/plugin-typescript": "^12.3.0",
-    "@size-limit/preset-small-lib": "^12.1.0",
-    "@storybook/addon-a11y": "^10.4.6",
-    "@storybook/addon-docs": "^10.4.6",
-    "@storybook/addon-links": "^10.4.6",
-    "@storybook/react-vite": "^10.4.6",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^26.0.0",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.61.1",
-    "@typescript-eslint/parser": "^8.61.1",
-    "@vitejs/plugin-react": "^6.0.2",
-    "dayjs": "^1.11.21",
-    "eslint": "^10.5.0",
+    "@faker-js/faker": "^10.6.0",
+    "@mui/icons-material": "^9.4.0",
+    "@mui/material": "^9.4.0",
+    "@mui/x-date-pickers": "^9.13.0",
+    "@size-limit/preset-small-lib": "^13.0.3",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-links": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/node": "^26.5.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "@typescript-eslint/eslint-plugin": "^8.70.0",
+    "@typescript-eslint/parser": "^8.70.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "dayjs": "^1.11.23",
+    "eslint": "^10.10.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
-    "eslint-plugin-perfectionist": "^5.9.1",
-    "eslint-plugin-storybook": "^10.4.6",
-    "globals": "^17.6.0",
-    "jsdom": "^29.1.1",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "react-is": "^19.2.7",
-    "rollup": "^4.62.0",
-    "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-delete": "^3.0.2",
-    "rollup-plugin-dts": "^6.4.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "size-limit": "^12.1.0",
-    "storybook": "^10.4.6",
+    "eslint-plugin-perfectionist": "^5.11.0",
+    "eslint-plugin-storybook": "^10.6.0",
+    "globals": "^17.12.0",
+    "jsdom": "^30.0.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-is": "^19.2.8",
+    "rolldown": "^1.2.7",
+    "size-limit": "^13.0.3",
+    "storybook": "^10.6.0",
     "storybook-dark-mode": "^5.0.0",
+    "tsdown": "^0.23.0",
     "tslib": "^2.8.1",
     "typescript": "6.0.3",
-    "vite": "^8.0.16",
-    "vitest": "^4.1.9"
+    "vite": "^8.2.2",
+    "vitest": "^5.0.0"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.13",
@@ -107,11 +99,23 @@
     "react-dom": ">=19.0"
   },
   "dependencies": {
-    "@tanstack/match-sorter-utils": "8.19.4",
-    "@tanstack/react-table": "8.21.3",
-    "@tanstack/react-virtual": "3.14.3",
+    "@tanstack/match-sorter-utils": "9.1.2",
+    "@tanstack/react-table": "9.2.4",
+    "@tanstack/react-virtual": "3.14.11",
+    "@tanstack/table-core": "9.2.4",
     "highlight-words": "2.0.0"
   },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./locales/*": {
+      "types": "./locales/*/index.d.mts",
+      "default": "./locales/*/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "build": "pnpm lib:build",
     "build-locales": "pnpm lib:build-locales",
@@ -119,8 +123,8 @@
     "dev": "pnpm lib:dev",
     "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",
+    "lib:build-lib": "tsdown && size-limit",
+    "lib:dev": "tsdown --watch",
     "lint": "eslint .",
     "size": "size-limit",
     "test": "vitest run",

package/src/components/body/MRT_TableBody.tsx

@@ -29,7 +29,6 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
     getBottomRows,
     getIsSomeRowsPinned,
     getRowModel,
-    getState,
     getTopRows,
     options: {
       enableStickyFooter,
@@ -44,7 +43,7 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
     },
     refs: { tableFooterRef, tableHeadRef, tablePaperRef },
   } = table;
-  const { columnFilters, globalFilter, isFullScreen, rowPinning } = getState();
+  const { columnFilters, globalFilter, isFullScreen, rowPinning } = table.state;
 
   const tableBodyProps = {
     ...parseFromValuesOrFunc(muiTableBodyProps, { table }),

package/src/components/body/MRT_TableBodyCell.tsx

@@ -48,7 +48,6 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
 }: MRT_TableBodyCellProps<TData>) => {
   const theme = useTheme();
   const {
-    getState,
     options: {
       columnResizeDirection,
       columnResizeMode,
@@ -69,7 +68,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   } = table;
   const {
     actionCell,
-    columnSizingInfo,
+    columnResizing,
     creatingRow,
     density,
     draggingColumn,
@@ -80,7 +79,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     hoveredRow,
     isLoading,
     showSkeletons,
-  } = getState();
+  } = table.state;
   const { column, row } = cell;
   const { columnDef } = column;
   const { columnDefType } = columnDef;
@@ -118,7 +117,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     const isFirstColumn = column.getIsFirstColumn();
     const isLastColumn = column.getIsLastColumn();
     const isLastRow = numRows && staticRowIndex === numRows - 1;
-    const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
+    const isResizingColumn = columnResizing.isResizingColumn === column.id;
     const showResizeBorder =
       isResizingColumn && columnResizeMode === 'onChange';
 
@@ -158,7 +157,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
         }
       : undefined;
   }, [
-    columnSizingInfo.isResizingColumn,
+    columnResizing.isResizingColumn,
     draggingColumn,
     draggingRow,
     hoveredColumn,

package/src/components/body/MRT_TableBodyCellValue.tsx

@@ -26,7 +26,6 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
   table,
 }: MRT_TableBodyCellValueProps<TData>) => {
   const {
-    getState,
     options: {
       enableFilterMatchHighlighting,
       mrtTheme: { matchHighlightColor },
@@ -34,7 +33,7 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
   } = table;
   const { column, row } = cell;
   const { columnDef } = column;
-  const { globalFilter, globalFilterFn } = getState();
+  const { globalFilter, globalFilterFn } = table.state;
   const filterValue = column.getFilterValue();
 
   let renderedCellValue =

package/src/components/body/MRT_TableBodyRow.tsx

@@ -47,7 +47,6 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
   const theme = useTheme();
 
   const {
-    getState,
     options: {
       enableRowOrdering,
       enableRowPinning,
@@ -76,7 +75,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
     hoveredRow,
     isFullScreen,
     rowPinning,
-  } = getState();
+  } = table.state;
 
   const visibleCells = row.getVisibleCells();
 

package/src/components/body/MRT_TableBodyRowGrabHandle.test.tsx

@@ -0,0 +1,42 @@
+import { fireEvent, render } from '@testing-library/react';
+import { describe, expect, test, vi } from 'vitest';
+
+import { type MRT_ColumnDef } from '../../types';
+import { MaterialReactTable } from '../MaterialReactTable';
+
+interface Person {
+  name: string;
+}
+
+const data: Person[] = [{ name: 'Alice' }, { name: 'Bob' }];
+
+const columns = (): MRT_ColumnDef<Person>[] => [
+  { accessorKey: 'name', header: 'Name' },
+];
+
+describe('row ordering', () => {
+  test('dragging a row over another reports both rows to the drop handler', () => {
+    const muiRowDragHandleProps = { onDragEnd: vi.fn() };
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns()}
+        data={data}
+        enableRowOrdering
+        muiRowDragHandleProps={muiRowDragHandleProps}
+      />,
+    );
+
+    const handles = container.querySelectorAll<HTMLElement>(
+      'tbody button[aria-label="Move"]',
+    );
+    const rows = container.querySelectorAll<HTMLElement>('tbody tr');
+
+    fireEvent.dragStart(handles[0], {
+      dataTransfer: { setDragImage: () => {} },
+    });
+    fireEvent.dragEnter(rows[1]);
+    fireEvent.dragEnd(handles[0]);
+
+    expect(muiRowDragHandleProps.onDragEnd).toHaveBeenCalled();
+  });
+});

package/src/components/body/MRT_TableBodyRowPinButton.tsx

@@ -21,10 +21,9 @@ export const MRT_TableBodyRowPinButton = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableBodyRowPinButtonProps<TData>) => {
   const {
-    getState,
     options: { enableRowPinning, rowPinningDisplayMode },
   } = table;
-  const { density } = getState();
+  const { density } = table.state;
 
   const canPin = parseFromValuesOrFunc(enableRowPinning, row as any);
 

package/src/components/body/MRT_TableDetailPanel.test.tsx

@@ -0,0 +1,40 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test } from 'vitest';
+
+import { type MRT_ColumnDef } from '../../types';
+import { MaterialReactTable } from '../MaterialReactTable';
+
+interface Person {
+  city: string;
+  name: string;
+}
+
+const data: Person[] = [{ city: 'Glasgow', name: 'Alice' }];
+
+const columns = (): MRT_ColumnDef<Person>[] => [
+  { accessorKey: 'name', header: 'Name' },
+];
+
+describe('detail panel', () => {
+  test('reveals the panel content when the expand button is clicked', async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns()}
+        data={data}
+        renderDetailPanel={({ row }) => (
+          <span>Lives in {row.original.city}</span>
+        )}
+      />,
+    );
+
+    expect(container.textContent).not.toContain('Lives in Glasgow');
+
+    await user.click(
+      container.querySelector('tbody button[aria-label="Expand"]') as HTMLElement,
+    );
+
+    expect(container.textContent).toContain('Lives in Glasgow');
+  });
+});

package/src/components/body/MRT_TableDetailPanel.tsx

@@ -32,7 +32,6 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableDetailPanelProps<TData>) => {
   const {
-    getState,
     getVisibleLeafColumns,
     options: {
       layoutMode,
@@ -42,7 +41,7 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
       renderDetailPanel,
     },
   } = table;
-  const { isLoading } = getState();
+  const { isLoading } = table.state;
 
   const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
     isDetailPanel: true,

package/src/components/buttons/MRT_ColumnPinningButtons.test.tsx

@@ -0,0 +1,69 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test } from 'vitest';
+
+import { type MRT_ColumnDef } from '../../types';
+import { MaterialReactTable } from '../MaterialReactTable';
+
+interface Person {
+  city: string;
+  name: string;
+}
+
+const data: Person[] = [{ city: 'Glasgow', name: 'Alice' }];
+
+const columns = (): MRT_ColumnDef<Person>[] => [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'city', header: 'City' },
+];
+
+const headerOrder = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll('thead th')).map((th) =>
+    th.textContent?.replace(/[^A-Za-z]/g, ''),
+  );
+
+describe('column pinning', () => {
+  test('pinning to start moves the column to the front', async () => {
+    const user = userEvent.setup();
+    const { baseElement, container } = render(
+      <MaterialReactTable
+        columns={columns()}
+        data={data}
+        enableColumnPinning
+      />,
+    );
+
+    expect(headerOrder(container)).toEqual(['Name', 'City']);
+
+    const cityHeader = Array.from(
+      container.querySelectorAll<HTMLElement>('thead th'),
+    ).find((th) => th.textContent?.includes('City'));
+
+    await user.click(
+      cityHeader?.querySelector(
+        'button[aria-label="Column Actions"]',
+      ) as HTMLElement,
+    );
+
+    await user.click(
+      Array.from(baseElement.querySelectorAll<HTMLElement>('li')).find((li) =>
+        li.textContent?.includes('Pin to left'),
+      ) as HTMLElement,
+    );
+
+    expect(headerOrder(container)).toEqual(['City', 'Name']);
+  });
+
+  test('start and end pinning both apply from initial state', () => {
+    const { container } = render(
+      <MaterialReactTable
+        columns={columns()}
+        data={data}
+        enableColumnPinning
+        initialState={{ columnPinning: { end: ['name'], start: ['city'] } }}
+      />,
+    );
+
+    expect(headerOrder(container)).toEqual(['City', 'Name']);
+  });
+});