Skip to content

Commit

Permalink
update to TanStack Table v8.12.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@KevinVandy
KevinVandy committed Feb 14, 2024
1 parent b3be685 commit 3d3b968
Show file tree
Hide file tree
Showing 11 changed files with 957 additions and 908 deletions.
3 changes: 2 additions & 1 deletion apps/material-react-table-docs/examples/enable-column-virtualization/sandbox/src/TS.tsx
View file
Expand Up @@ -15,8 +15,9 @@ const Example = () => {
columnVirtualizerOptions: { overscan: 4 }, //optionally customize the virtualizer
columns: fakeColumns, //500 columns
data: fakeData,
enableColumnVirtualization: true,
enableColumnPinning: true,
enableColumnResizing: true,
enableColumnVirtualization: true,
enableRowNumbers: true,
});

Expand Down
32 changes: 16 additions & 16 deletions apps/material-react-table-docs/package.json
View file
Expand Up @@ -16,24 +16,24 @@
"@docsearch/js": "3.5.2",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@faker-js/faker": "^8.4.0",
"@faker-js/faker": "^8.4.1",
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@mdx-js/loader": "^3.0.0",
"@mdx-js/react": "^3.0.0",
"@mui/icons-material": "^5.15.7",
"@mui/material": "^5.15.7",
"@mui/x-charts": "^6.19.3",
"@mui/x-date-pickers": "^6.19.3",
"@mdx-js/loader": "^3.0.1",
"@mdx-js/react": "^3.0.1",
"@mui/icons-material": "^5.15.10",
"@mui/material": "^5.15.10",
"@mui/x-charts": "^6.19.4",
"@mui/x-date-pickers": "^6.19.4",
"@next/mdx": "^14.1.0",
"@tanstack/react-query": "^5.18.1",
"@tanstack/react-table-devtools": "^8.11.8",
"@tanstack/react-query": "^5.20.5",
"@tanstack/react-table-devtools": "^8.12.0",
"@types/mdx": "^2.0.11",
"dayjs": "^1.11.10",
"export-to-csv": "^1.2.2",
"jspdf": "^2.5.1",
"jspdf-autotable": "^3.8.1",
"jspdf-autotable": "^3.8.2",
"material-react-table": "workspace:*",
"next": "14.1.0",
"next-sitemap": "^4.2.3",
Expand All @@ -43,12 +43,12 @@
"zod": "^3.22.4"
},
"devDependencies": {
"@tanstack/eslint-plugin-query": "^5.18.1",
"@types/node": "^20.11.16",
"@types/react": "^18.2.52",
"@types/react-dom": "^18.2.18",
"@typescript-eslint/eslint-plugin": "^6.20.0",
"@typescript-eslint/parser": "^6.20.0",
"@tanstack/eslint-plugin-query": "^5.20.1",
"@types/node": "^20.11.17",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@typescript-eslint/eslint-plugin": "^7.0.1",
"@typescript-eslint/parser": "^7.0.1",
"eslint": "8.56.0",
"eslint-config-next": "14.1.0",
"next-plausible": "^3.12.0",
Expand Down
8 changes: 4 additions & 4 deletions apps/test-cra/package.json
View file
Expand Up @@ -5,10 +5,10 @@
"dependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.7",
"@mui/material": "^5.15.7",
"@mui/x-date-pickers": "^6.19.3",
"@testing-library/jest-dom": "^6.4.1",
"@mui/icons-material": "^5.15.10",
"@mui/material": "^5.15.10",
"@mui/x-date-pickers": "^6.19.4",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^14.2.1",
"@testing-library/user-event": "^14.5.2",
"material-react-table": "workspace:*",
Expand Down
10 changes: 5 additions & 5 deletions apps/test-remix/package.json
View file
Expand Up @@ -12,9 +12,9 @@
"dependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.7",
"@mui/material": "^5.15.7",
"@mui/x-date-pickers": "^6.19.3",
"@mui/icons-material": "^5.15.10",
"@mui/material": "^5.15.10",
"@mui/x-date-pickers": "^6.19.4",
"@remix-run/css-bundle": "^2.6.0",
"@remix-run/node": "^2.6.0",
"@remix-run/react": "^2.6.0",
Expand All @@ -27,8 +27,8 @@
"devDependencies": {
"@remix-run/dev": "^2.6.0",
"@remix-run/eslint-config": "^2.6.0",
"@types/react": "^18.2.52",
"@types/react-dom": "^18.2.18",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"eslint": "^8.56.0",
"typescript": "^5.3.3"
},
Expand Down
16 changes: 8 additions & 8 deletions apps/test-vite/package.json
View file
Expand Up @@ -12,23 +12,23 @@
"dependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.7",
"@mui/material": "^5.15.7",
"@mui/x-date-pickers": "^6.19.3",
"@mui/icons-material": "^5.15.10",
"@mui/material": "^5.15.10",
"@mui/x-date-pickers": "^6.19.4",
"material-react-table": "workspace:*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.52",
"@types/react-dom": "^18.2.18",
"@typescript-eslint/eslint-plugin": "^6.20.0",
"@typescript-eslint/parser": "^6.20.0",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@typescript-eslint/eslint-plugin": "^7.0.1",
"@typescript-eslint/parser": "^7.0.1",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.56.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"typescript": "^5.3.3",
"vite": "^5.0.12"
"vite": "^5.1.1"
}
}
2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -26,7 +26,7 @@
},
"devDependencies": {
"prettier": "^3.2.5",
"turbo": "^1.12.2"
"turbo": "^1.12.3"
},
"engines": {
"node": ">=16.0.0"
Expand Down
40 changes: 20 additions & 20 deletions packages/material-react-table/package.json
View file
Expand Up @@ -65,26 +65,26 @@
"@babel/preset-react": "^7.23.3",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@faker-js/faker": "^8.4.0",
"@mui/icons-material": "^5.15.7",
"@mui/material": "^5.15.7",
"@mui/x-date-pickers": "^6.19.3",
"@faker-js/faker": "^8.4.1",
"@mui/icons-material": "^5.15.10",
"@mui/material": "^5.15.10",
"@mui/x-date-pickers": "^6.19.4",
"@rollup/plugin-typescript": "^11.1.6",
"@size-limit/preset-small-lib": "^11.0.2",
"@storybook/addon-a11y": "^7.6.12",
"@storybook/addon-essentials": "^7.6.12",
"@storybook/addon-interactions": "^7.6.12",
"@storybook/addon-links": "^7.6.12",
"@storybook/addon-storysource": "^7.6.12",
"@storybook/blocks": "^7.6.12",
"@storybook/react": "^7.6.12",
"@storybook/react-vite": "^7.6.12",
"@storybook/addon-a11y": "^7.6.15",
"@storybook/addon-essentials": "^7.6.15",
"@storybook/addon-interactions": "^7.6.15",
"@storybook/addon-links": "^7.6.15",
"@storybook/addon-storysource": "^7.6.15",
"@storybook/blocks": "^7.6.15",
"@storybook/react": "^7.6.15",
"@storybook/react-vite": "^7.6.15",
"@storybook/testing-library": "^0.2.2",
"@types/node": "^20.11.16",
"@types/react": "^18.2.52",
"@types/react-dom": "^18.2.18",
"@typescript-eslint/eslint-plugin": "^6.20.0",
"@typescript-eslint/parser": "^6.20.0",
"@types/node": "^20.11.17",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@typescript-eslint/eslint-plugin": "^7.0.1",
"@typescript-eslint/parser": "^7.0.1",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.56.0",
"eslint-plugin-mui-path-imports": "^0.0.15",
Expand All @@ -99,11 +99,11 @@
"rollup-plugin-dts": "^6.1.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"size-limit": "^11.0.2",
"storybook": "^7.6.12",
"storybook": "^7.6.15",
"storybook-dark-mode": "^3.0.3",
"tslib": "^2.6.2",
"typescript": "^5.3.3",
"vite": "^5.0.12"
"vite": "^5.1.1"
},
"peerDependencies": {
"@emotion/react": ">=11.11",
Expand All @@ -116,7 +116,7 @@
},
"dependencies": {
"@tanstack/match-sorter-utils": "8.11.8",
"@tanstack/react-table": "8.11.8",
"@tanstack/react-table": "8.12.0",
"@tanstack/react-virtual": "3.0.4",
"highlight-words": "1.2.2"
}
Expand Down
5 changes: 2 additions & 3 deletions packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx
View file
Expand Up @@ -17,7 +17,6 @@ import {
type MRT_TableInstance,
} from '../../types';
import { isCellEditable, openEditingCell } from '../../utils/cell.utils';
import { getIsFirstColumn, getIsLastColumn } from '../../utils/column.utils';
import { getCommonMRTCellStyles } from '../../utils/style.utils';
import { parseFromValuesOrFunc } from '../../utils/utils';
import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
Expand Down Expand Up @@ -110,8 +109,8 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
const isHoveredColumn = hoveredColumn?.id === column.id;
const isDraggingRow = draggingRow?.id === row.id;
const isHoveredRow = hoveredRow?.id === row.id;
const isFirstColumn = getIsFirstColumn(column, table);
const isLastColumn = getIsLastColumn(column, table);
const isFirstColumn = column.getIsFirstColumn();
const isLastColumn = column.getIsLastColumn();
const isLastRow = numRows && staticRowIndex === numRows - 1;
const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
const showResizeBorder =
Expand Down
48 changes: 0 additions & 48 deletions packages/material-react-table/src/utils/column.utils.ts
View file
Expand Up @@ -7,7 +7,6 @@ import {
type MRT_DefinedTableOptions,
type MRT_FilterOption,
type MRT_RowData,
type MRT_TableInstance,
} from '../types';

export const getColumnId = <TData extends MRT_RowData>(
Expand Down Expand Up @@ -122,50 +121,3 @@ export const getDefaultColumnFilterFn = <TData extends MRT_RowData>(
return 'equals';
return 'fuzzy';
};

export const getIsFirstColumn = <TData extends MRT_RowData>(
column: MRT_Column<TData>,
table: MRT_TableInstance<TData>,
) => {
const leftColumns = table.getLeftVisibleLeafColumns();
return leftColumns.length
? leftColumns[0].id === column.id
: table.getVisibleLeafColumns()[0].id === column.id;
};

export const getIsLastColumn = <TData extends MRT_RowData>(
column: MRT_Column<TData>,
table: MRT_TableInstance<TData>,
) => {
const rightColumns = table.getRightVisibleLeafColumns();
const columns = table.getVisibleLeafColumns();
return rightColumns.length
? rightColumns[rightColumns.length - 1].id === column.id
: columns[columns.length - 1].id === column.id;
};

export const getIsLastLeftPinnedColumn = <TData extends MRT_RowData>(
table: MRT_TableInstance<TData>,
column: MRT_Column<TData>,
) => {
return (
column.getIsPinned() === 'left' &&
table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
);
};

export const getIsFirstRightPinnedColumn = <TData extends MRT_RowData>(
column: MRT_Column<TData>,
) => {
return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
};

export const getTotalRight = <TData extends MRT_RowData>(
table: MRT_TableInstance<TData>,
column: MRT_Column<TData>,
) => {
return table
.getRightLeafHeaders()
.slice(column.getPinnedIndex() + 1)
.reduce((acc, col) => acc + col.getSize(), 0);
};
13 changes: 5 additions & 8 deletions packages/material-react-table/src/utils/style.utils.ts
View file
Expand Up @@ -11,11 +11,6 @@ import {
type MRT_TableOptions,
type MRT_Theme,
} from '../types';
import {
getIsFirstRightPinnedColumn,
getIsLastLeftPinnedColumn,
getTotalRight,
} from '../utils/column.utils';
import { parseFromValuesOrFunc } from './utils';

export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
Expand Down Expand Up @@ -64,6 +59,8 @@ export const getCommonPinnedCellStyles = <TData extends MRT_RowData>({
theme: Theme;
}) => {
const { baseBackgroundColor } = table.options.mrtTheme;
const isPinned = column?.getIsPinned();

return {
'&[data-pinned="true"]': {
'&:before': {
Expand All @@ -75,9 +72,9 @@ export const getCommonPinnedCellStyles = <TData extends MRT_RowData>({
0.97,
),
boxShadow: column
? getIsLastLeftPinnedColumn(table, column)
? isPinned === 'left' && column.getIsLastColumn(isPinned)
? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
: getIsFirstRightPinnedColumn(column)
: isPinned === 'right' && column.getIsFirstColumn(isPinned)
? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
: undefined
: undefined,
Expand Down Expand Up @@ -143,7 +140,7 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
position: 'sticky',
right:
isColumnPinned === 'right'
? `${getTotalRight(table, column)}px`
? `${column.getAfter('right')}px`
: undefined,
}
: {};
Expand Down

0 comments on commit 3d3b968

Please sign in to comment.