Skip to content

Commit 3d3b968

Browse files
KevinVandyKevinVandy
committed
update to TanStack Table v8.12.0
1 parent b3be685 commit 3d3b968

File tree

11 files changed

+957
-908
lines changed

11 files changed

+957
-908
lines changed

‎apps/material-react-table-docs/examples/enable-column-virtualization/sandbox/src/TS.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@ const Example = () => {
1515
columnVirtualizerOptions: { overscan: 4 }, //optionally customize the virtualizer
1616
columns: fakeColumns, //500 columns
1717
data: fakeData,
18-
enableColumnVirtualization: true,
1918
enableColumnPinning: true,
19+
enableColumnResizing: true,
20+
enableColumnVirtualization: true,
2021
enableRowNumbers: true,
2122
});
2223

‎apps/material-react-table-docs/package.json‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,24 +16,24 @@
1616
"@docsearch/js": "3.5.2",
1717
"@emotion/react": "^11.11.3",
1818
"@emotion/styled": "^11.11.0",
19-
"@faker-js/faker": "^8.4.0",
19+
"@faker-js/faker": "^8.4.1",
2020
"@fortawesome/fontawesome-svg-core": "^6.5.1",
2121
"@fortawesome/free-solid-svg-icons": "^6.5.1",
2222
"@fortawesome/react-fontawesome": "^0.2.0",
23-
"@mdx-js/loader": "^3.0.0",
24-
"@mdx-js/react": "^3.0.0",
25-
"@mui/icons-material": "^5.15.7",
26-
"@mui/material": "^5.15.7",
27-
"@mui/x-charts": "^6.19.3",
28-
"@mui/x-date-pickers": "^6.19.3",
23+
"@mdx-js/loader": "^3.0.1",
24+
"@mdx-js/react": "^3.0.1",
25+
"@mui/icons-material": "^5.15.10",
26+
"@mui/material": "^5.15.10",
27+
"@mui/x-charts": "^6.19.4",
28+
"@mui/x-date-pickers": "^6.19.4",
2929
"@next/mdx": "^14.1.0",
30-
"@tanstack/react-query": "^5.18.1",
31-
"@tanstack/react-table-devtools": "^8.11.8",
30+
"@tanstack/react-query": "^5.20.5",
31+
"@tanstack/react-table-devtools": "^8.12.0",
3232
"@types/mdx": "^2.0.11",
3333
"dayjs": "^1.11.10",
3434
"export-to-csv": "^1.2.2",
3535
"jspdf": "^2.5.1",
36-
"jspdf-autotable": "^3.8.1",
36+
"jspdf-autotable": "^3.8.2",
3737
"material-react-table": "workspace:*",
3838
"next": "14.1.0",
3939
"next-sitemap": "^4.2.3",
@@ -43,12 +43,12 @@
4343
"zod": "^3.22.4"
4444
},
4545
"devDependencies": {
46-
"@tanstack/eslint-plugin-query": "^5.18.1",
47-
"@types/node": "^20.11.16",
48-
"@types/react": "^18.2.52",
49-
"@types/react-dom": "^18.2.18",
50-
"@typescript-eslint/eslint-plugin": "^6.20.0",
51-
"@typescript-eslint/parser": "^6.20.0",
46+
"@tanstack/eslint-plugin-query": "^5.20.1",
47+
"@types/node": "^20.11.17",
48+
"@types/react": "^18.2.55",
49+
"@types/react-dom": "^18.2.19",
50+
"@typescript-eslint/eslint-plugin": "^7.0.1",
51+
"@typescript-eslint/parser": "^7.0.1",
5252
"eslint": "8.56.0",
5353
"eslint-config-next": "14.1.0",
5454
"next-plausible": "^3.12.0",

‎apps/test-cra/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
"dependencies": {
66
"@emotion/react": "^11.11.3",
77
"@emotion/styled": "^11.11.0",
8-
"@mui/icons-material": "^5.15.7",
9-
"@mui/material": "^5.15.7",
10-
"@mui/x-date-pickers": "^6.19.3",
11-
"@testing-library/jest-dom": "^6.4.1",
8+
"@mui/icons-material": "^5.15.10",
9+
"@mui/material": "^5.15.10",
10+
"@mui/x-date-pickers": "^6.19.4",
11+
"@testing-library/jest-dom": "^6.4.2",
1212
"@testing-library/react": "^14.2.1",
1313
"@testing-library/user-event": "^14.5.2",
1414
"material-react-table": "workspace:*",

‎apps/test-remix/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212
"dependencies": {
1313
"@emotion/react": "^11.11.3",
1414
"@emotion/styled": "^11.11.0",
15-
"@mui/icons-material": "^5.15.7",
16-
"@mui/material": "^5.15.7",
17-
"@mui/x-date-pickers": "^6.19.3",
15+
"@mui/icons-material": "^5.15.10",
16+
"@mui/material": "^5.15.10",
17+
"@mui/x-date-pickers": "^6.19.4",
1818
"@remix-run/css-bundle": "^2.6.0",
1919
"@remix-run/node": "^2.6.0",
2020
"@remix-run/react": "^2.6.0",
@@ -27,8 +27,8 @@
2727
"devDependencies": {
2828
"@remix-run/dev": "^2.6.0",
2929
"@remix-run/eslint-config": "^2.6.0",
30-
"@types/react": "^18.2.52",
31-
"@types/react-dom": "^18.2.18",
30+
"@types/react": "^18.2.55",
31+
"@types/react-dom": "^18.2.19",
3232
"eslint": "^8.56.0",
3333
"typescript": "^5.3.3"
3434
},

‎apps/test-vite/package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,23 @@
1212
"dependencies": {
1313
"@emotion/react": "^11.11.3",
1414
"@emotion/styled": "^11.11.0",
15-
"@mui/icons-material": "^5.15.7",
16-
"@mui/material": "^5.15.7",
17-
"@mui/x-date-pickers": "^6.19.3",
15+
"@mui/icons-material": "^5.15.10",
16+
"@mui/material": "^5.15.10",
17+
"@mui/x-date-pickers": "^6.19.4",
1818
"material-react-table": "workspace:*",
1919
"react": "^18.2.0",
2020
"react-dom": "^18.2.0"
2121
},
2222
"devDependencies": {
23-
"@types/react": "^18.2.52",
24-
"@types/react-dom": "^18.2.18",
25-
"@typescript-eslint/eslint-plugin": "^6.20.0",
26-
"@typescript-eslint/parser": "^6.20.0",
23+
"@types/react": "^18.2.55",
24+
"@types/react-dom": "^18.2.19",
25+
"@typescript-eslint/eslint-plugin": "^7.0.1",
26+
"@typescript-eslint/parser": "^7.0.1",
2727
"@vitejs/plugin-react": "^4.2.1",
2828
"eslint": "^8.56.0",
2929
"eslint-plugin-react-hooks": "^4.6.0",
3030
"eslint-plugin-react-refresh": "^0.4.5",
3131
"typescript": "^5.3.3",
32-
"vite": "^5.0.12"
32+
"vite": "^5.1.1"
3333
}
3434
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
},
2727
"devDependencies": {
2828
"prettier": "^3.2.5",
29-
"turbo": "^1.12.2"
29+
"turbo": "^1.12.3"
3030
},
3131
"engines": {
3232
"node": ">=16.0.0"

‎packages/material-react-table/package.json‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -65,26 +65,26 @@
6565
"@babel/preset-react": "^7.23.3",
6666
"@emotion/react": "^11.11.3",
6767
"@emotion/styled": "^11.11.0",
68-
"@faker-js/faker": "^8.4.0",
69-
"@mui/icons-material": "^5.15.7",
70-
"@mui/material": "^5.15.7",
71-
"@mui/x-date-pickers": "^6.19.3",
68+
"@faker-js/faker": "^8.4.1",
69+
"@mui/icons-material": "^5.15.10",
70+
"@mui/material": "^5.15.10",
71+
"@mui/x-date-pickers": "^6.19.4",
7272
"@rollup/plugin-typescript": "^11.1.6",
7373
"@size-limit/preset-small-lib": "^11.0.2",
74-
"@storybook/addon-a11y": "^7.6.12",
75-
"@storybook/addon-essentials": "^7.6.12",
76-
"@storybook/addon-interactions": "^7.6.12",
77-
"@storybook/addon-links": "^7.6.12",
78-
"@storybook/addon-storysource": "^7.6.12",
79-
"@storybook/blocks": "^7.6.12",
80-
"@storybook/react": "^7.6.12",
81-
"@storybook/react-vite": "^7.6.12",
74+
"@storybook/addon-a11y": "^7.6.15",
75+
"@storybook/addon-essentials": "^7.6.15",
76+
"@storybook/addon-interactions": "^7.6.15",
77+
"@storybook/addon-links": "^7.6.15",
78+
"@storybook/addon-storysource": "^7.6.15",
79+
"@storybook/blocks": "^7.6.15",
80+
"@storybook/react": "^7.6.15",
81+
"@storybook/react-vite": "^7.6.15",
8282
"@storybook/testing-library": "^0.2.2",
83-
"@types/node": "^20.11.16",
84-
"@types/react": "^18.2.52",
85-
"@types/react-dom": "^18.2.18",
86-
"@typescript-eslint/eslint-plugin": "^6.20.0",
87-
"@typescript-eslint/parser": "^6.20.0",
83+
"@types/node": "^20.11.17",
84+
"@types/react": "^18.2.55",
85+
"@types/react-dom": "^18.2.19",
86+
"@typescript-eslint/eslint-plugin": "^7.0.1",
87+
"@typescript-eslint/parser": "^7.0.1",
8888
"@vitejs/plugin-react": "^4.2.1",
8989
"eslint": "^8.56.0",
9090
"eslint-plugin-mui-path-imports": "^0.0.15",
@@ -99,11 +99,11 @@
9999
"rollup-plugin-dts": "^6.1.0",
100100
"rollup-plugin-peer-deps-external": "^2.2.4",
101101
"size-limit": "^11.0.2",
102-
"storybook": "^7.6.12",
102+
"storybook": "^7.6.15",
103103
"storybook-dark-mode": "^3.0.3",
104104
"tslib": "^2.6.2",
105105
"typescript": "^5.3.3",
106-
"vite": "^5.0.12"
106+
"vite": "^5.1.1"
107107
},
108108
"peerDependencies": {
109109
"@emotion/react": ">=11.11",
@@ -116,7 +116,7 @@
116116
},
117117
"dependencies": {
118118
"@tanstack/match-sorter-utils": "8.11.8",
119-
"@tanstack/react-table": "8.11.8",
119+
"@tanstack/react-table": "8.12.0",
120120
"@tanstack/react-virtual": "3.0.4",
121121
"highlight-words": "1.2.2"
122122
}

‎packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import {
1717
type MRT_TableInstance,
1818
} from '../../types';
1919
import { isCellEditable, openEditingCell } from '../../utils/cell.utils';
20-
import { getIsFirstColumn, getIsLastColumn } from '../../utils/column.utils';
2120
import { getCommonMRTCellStyles } from '../../utils/style.utils';
2221
import { parseFromValuesOrFunc } from '../../utils/utils';
2322
import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
@@ -110,8 +109,8 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
110109
const isHoveredColumn = hoveredColumn?.id === column.id;
111110
const isDraggingRow = draggingRow?.id === row.id;
112111
const isHoveredRow = hoveredRow?.id === row.id;
113-
const isFirstColumn = getIsFirstColumn(column, table);
114-
const isLastColumn = getIsLastColumn(column, table);
112+
const isFirstColumn = column.getIsFirstColumn();
113+
const isLastColumn = column.getIsLastColumn();
115114
const isLastRow = numRows && staticRowIndex === numRows - 1;
116115
const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
117116
const showResizeBorder =

‎packages/material-react-table/src/utils/column.utils.ts‎

Lines changed: 0 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
type MRT_DefinedTableOptions,
88
type MRT_FilterOption,
99
type MRT_RowData,
10-
type MRT_TableInstance,
1110
} from '../types';
1211

1312
export const getColumnId = <TData extends MRT_RowData>(
@@ -122,50 +121,3 @@ export const getDefaultColumnFilterFn = <TData extends MRT_RowData>(
122121
return 'equals';
123122
return 'fuzzy';
124123
};
125-
126-
export const getIsFirstColumn = <TData extends MRT_RowData>(
127-
column: MRT_Column<TData>,
128-
table: MRT_TableInstance<TData>,
129-
) => {
130-
const leftColumns = table.getLeftVisibleLeafColumns();
131-
return leftColumns.length
132-
? leftColumns[0].id === column.id
133-
: table.getVisibleLeafColumns()[0].id === column.id;
134-
};
135-
136-
export const getIsLastColumn = <TData extends MRT_RowData>(
137-
column: MRT_Column<TData>,
138-
table: MRT_TableInstance<TData>,
139-
) => {
140-
const rightColumns = table.getRightVisibleLeafColumns();
141-
const columns = table.getVisibleLeafColumns();
142-
return rightColumns.length
143-
? rightColumns[rightColumns.length - 1].id === column.id
144-
: columns[columns.length - 1].id === column.id;
145-
};
146-
147-
export const getIsLastLeftPinnedColumn = <TData extends MRT_RowData>(
148-
table: MRT_TableInstance<TData>,
149-
column: MRT_Column<TData>,
150-
) => {
151-
return (
152-
column.getIsPinned() === 'left' &&
153-
table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
154-
);
155-
};
156-
157-
export const getIsFirstRightPinnedColumn = <TData extends MRT_RowData>(
158-
column: MRT_Column<TData>,
159-
) => {
160-
return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
161-
};
162-
163-
export const getTotalRight = <TData extends MRT_RowData>(
164-
table: MRT_TableInstance<TData>,
165-
column: MRT_Column<TData>,
166-
) => {
167-
return table
168-
.getRightLeafHeaders()
169-
.slice(column.getPinnedIndex() + 1)
170-
.reduce((acc, col) => acc + col.getSize(), 0);
171-
};

‎packages/material-react-table/src/utils/style.utils.ts‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,6 @@ import {
1111
type MRT_TableOptions,
1212
type MRT_Theme,
1313
} from '../types';
14-
import {
15-
getIsFirstRightPinnedColumn,
16-
getIsLastLeftPinnedColumn,
17-
getTotalRight,
18-
} from '../utils/column.utils';
1914
import { parseFromValuesOrFunc } from './utils';
2015

2116
export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
@@ -64,6 +59,8 @@ export const getCommonPinnedCellStyles = <TData extends MRT_RowData>({
6459
theme: Theme;
6560
}) => {
6661
const { baseBackgroundColor } = table.options.mrtTheme;
62+
const isPinned = column?.getIsPinned();
63+
6764
return {
6865
'&[data-pinned="true"]': {
6966
'&:before': {
@@ -75,9 +72,9 @@ export const getCommonPinnedCellStyles = <TData extends MRT_RowData>({
7572
0.97,
7673
),
7774
boxShadow: column
78-
? getIsLastLeftPinnedColumn(table, column)
75+
? isPinned === 'left' && column.getIsLastColumn(isPinned)
7976
? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
80-
: getIsFirstRightPinnedColumn(column)
77+
: isPinned === 'right' && column.getIsFirstColumn(isPinned)
8178
? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
8279
: undefined
8380
: undefined,
@@ -143,7 +140,7 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
143140
position: 'sticky',
144141
right:
145142
isColumnPinned === 'right'
146-
? `${getTotalRight(table, column)}px`
143+
? `${column.getAfter('right')}px`
147144
: undefined,
148145
}
149146
: {};

0 commit comments

Comments
 (0)