Skip to content

Commit 792222e

Browse files
KevinVandyKevinVandy
committed
release v3.0.0-beta.1 improve accessibility on display columns
1 parent d49a09c commit 792222e

File tree

13 files changed

+286
-150
lines changed

13 files changed

+286
-150
lines changed

‎apps/material-react-table-docs/examples/minimal/sandbox/src/TS.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const Example = () => {
3838
const table = useMaterialReactTable({
3939
columns,
4040
data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
41+
enableCellNavigation: false,
4142
enableColumnActions: false,
4243
enableColumnFilters: false,
4344
enablePagination: false,

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@
2727
"@mui/x-charts": "^7.15.0",
2828
"@mui/x-date-pickers": "^7.15.0",
2929
"@next/mdx": "^14.2.7",
30-
"@tanstack/react-query": "^5.53.1",
30+
"@tanstack/react-query": "^5.53.3",
3131
"@tanstack/react-table-devtools": "^8.20.5",
3232
"@types/mdx": "^2.0.13",
3333
"dayjs": "^1.11.13",
34-
"export-to-csv": "^1.3.0",
34+
"export-to-csv": "^1.4.0",
3535
"jspdf": "^2.5.1",
3636
"jspdf-autotable": "^3.8.3",
3737
"material-react-table": "workspace:*",
@@ -44,11 +44,11 @@
4444
},
4545
"devDependencies": {
4646
"@tanstack/eslint-plugin-query": "^5.53.0",
47-
"@types/node": "^22.5.1",
47+
"@types/node": "^22.5.2",
4848
"@types/react": "^18.3.5",
4949
"@types/react-dom": "^18.3.0",
50-
"@typescript-eslint/eslint-plugin": "^8.3.0",
51-
"@typescript-eslint/parser": "^8.3.0",
50+
"@typescript-eslint/eslint-plugin": "^8.4.0",
51+
"@typescript-eslint/parser": "^8.4.0",
5252
"eslint": "9.9.1",
5353
"eslint-config-next": "14.2.7",
5454
"next-plausible": "^3.12.2",

‎apps/material-react-table-docs/pages/docs/getting-started/migrating-to-v3.mdx

-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,6 @@ You should now be on Material React Table V3! Look for any code or type errors i
6969
- `muiFilterSliderProps`
7070
- `muiFilterTextFieldProps`
7171
- `muiFilterTimePickerProps`
72-
- `muiSkeletonProps`
7372
- `muiTableBodyCellProps`
7473
- `muiTableHeadCellProps`
7574
- `renderCellActionMenuItems`

‎apps/test-vite/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
"devDependencies": {
2323
"@types/react": "^18.3.5",
2424
"@types/react-dom": "^18.3.0",
25-
"@typescript-eslint/eslint-plugin": "^8.3.0",
26-
"@typescript-eslint/parser": "^8.3.0",
25+
"@typescript-eslint/eslint-plugin": "^8.4.0",
26+
"@typescript-eslint/parser": "^8.4.0",
2727
"@vitejs/plugin-react": "^4.3.1",
2828
"eslint": "^9.9.1",
2929
"eslint-plugin-react-hooks": "^4.6.2",

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": "3.0.0-beta.0",
2+
"version": "3.0.0-beta.1",
33
"license": "MIT",
44
"name": "material-react-table",
55
"description": "A fully featured Material UI V6 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -35,11 +35,11 @@
3535
"size-limit": [
3636
{
3737
"path": "dist/index.js",
38-
"limit": "53 KB"
38+
"limit": "55 KB"
3939
},
4040
{
4141
"path": "dist/index.esm.js",
42-
"limit": "50 KB"
42+
"limit": "51 KB"
4343
}
4444
],
4545
"engines": {
@@ -78,11 +78,11 @@
7878
"@storybook/preview-api": "^8.2.9",
7979
"@storybook/react": "^8.2.9",
8080
"@storybook/react-vite": "^8.2.9",
81-
"@types/node": "^22.5.1",
81+
"@types/node": "^22.5.2",
8282
"@types/react": "^18.3.5",
8383
"@types/react-dom": "^18.3.0",
84-
"@typescript-eslint/eslint-plugin": "^8.3.0",
85-
"@typescript-eslint/parser": "^8.3.0",
84+
"@typescript-eslint/eslint-plugin": "^8.4.0",
85+
"@typescript-eslint/parser": "^8.4.0",
8686
"@vitejs/plugin-react": "^4.3.1",
8787
"eslint": "^9.9.1",
8888
"eslint-plugin-mui-path-imports": "^0.0.15",

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

+6-1
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,12 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
234234

235235
const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
236236
if (enableCellNavigation) {
237-
cellNavigation({ event, cellValue: cell.getValue<string>() });
237+
cellNavigation({
238+
cell,
239+
cellValue: cell.getValue<string>(),
240+
event,
241+
table,
242+
});
238243
}
239244
tableCellProps?.onKeyDown?.(event);
240245
};

‎packages/material-react-table/src/components/footer/MRT_TableFooterCell.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,11 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
5050

5151
const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
5252
if (enableCellNavigation) {
53-
cellNavigation({ event, cellValue: footer.column.footer });
53+
cellNavigation({
54+
event,
55+
cellValue: footer.column.columnDef.footer,
56+
table,
57+
});
5458
}
5559
tableCellProps?.onKeyDown?.(event);
5660
};

‎packages/material-react-table/src/components/head/MRT_TableHeadCell.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,12 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
151151

152152
const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
153153
if (enableCellNavigation) {
154-
cellNavigation({ event, cellValue: header.column.header });
154+
cellNavigation({
155+
event,
156+
cellValue: header.column.columnDef.header,
157+
table,
158+
header,
159+
});
155160
}
156161
tableCellProps?.onKeyDown?.(event);
157162
};

‎packages/material-react-table/src/components/inputs/MRT_FilterTextField.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -338,6 +338,10 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
338338
: filterPlaceholder,
339339
variant: 'standard',
340340
...textFieldProps,
341+
onKeyDown: (e) => {
342+
e.stopPropagation();
343+
textFieldProps.onKeyDown?.(e);
344+
},
341345
sx: (theme) => ({
342346
minWidth: isDateFilter
343347
? '160px'

‎packages/material-react-table/src/types.ts

-3
Original file line numberDiff line numberDiff line change
@@ -1099,9 +1099,6 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
10991099
table: MRT_TableInstance<TData>;
11001100
}) => CheckboxProps | RadioProps)
11011101
| (CheckboxProps | RadioProps);
1102-
/**
1103-
* @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
1104-
*/
11051102
muiSkeletonProps?:
11061103
| ((props: {
11071104
cell: MRT_Cell<TData>;

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

+54-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
import {
2+
MRT_Header,
23
type MRT_Cell,
34
type MRT_RowData,
45
type MRT_TableInstance,
56
} from '../types';
7+
import {
8+
getMRT_RowSelectionHandler,
9+
getMRT_SelectAllHandler,
10+
} from './row.utils';
611
import { parseFromValuesOrFunc } from './utils';
712

813
export const isCellEditable = <TData extends MRT_RowData>({
@@ -49,23 +54,65 @@ export const openEditingCell = <TData extends MRT_RowData>({
4954
}
5055
};
5156

52-
export const cellNavigation = ({
57+
export const cellNavigation = <TData extends MRT_RowData = MRT_RowData>({
58+
cell,
5359
cellElements,
5460
cellValue,
5561
containerElement,
5662
event,
63+
header,
5764
parentElement,
65+
table,
5866
}: {
59-
cellElements?: Array<HTMLTableCellElement | HTMLDivElement>;
67+
cell?: MRT_Cell<TData>;
68+
header?: MRT_Header<TData>;
69+
cellElements?: Array<HTMLTableCellElement>;
6070
cellValue?: string;
61-
containerElement?: HTMLDivElement | HTMLTableElement;
62-
event: React.KeyboardEvent<HTMLTableCellElement | HTMLDivElement>;
63-
parentElement?: HTMLTableRowElement | HTMLDivElement;
71+
containerElement?: HTMLTableElement;
72+
event: React.KeyboardEvent<HTMLTableCellElement>;
73+
parentElement?: HTMLTableRowElement;
74+
table: MRT_TableInstance<TData>;
6475
}) => {
6576
if (cellValue && (event.ctrlKey || event.metaKey) && event.key === 'c') {
6677
navigator.clipboard.writeText(cellValue);
67-
}
68-
if (
78+
} else if (['Enter', ' '].includes(event.key)) {
79+
if (cell?.column?.id === 'mrt-row-select') {
80+
getMRT_RowSelectionHandler({
81+
row: cell.row,
82+
table,
83+
//@ts-ignore
84+
staticRowIndex: +event.target.getAttribute('data-index'),
85+
})(event as any);
86+
} else if (
87+
header?.column?.id === 'mrt-row-select' &&
88+
table.options.enableSelectAll
89+
) {
90+
getMRT_SelectAllHandler({
91+
table,
92+
})(event as any);
93+
} else if (
94+
cell?.column?.id === 'mrt-row-expand' &&
95+
(cell.row.getCanExpand() ||
96+
table.options.renderDetailPanel?.({ row: cell.row, table }))
97+
) {
98+
cell.row.toggleExpanded();
99+
} else if (
100+
header?.column?.id === 'mrt-row-expand' &&
101+
table.options.enableExpandAll
102+
) {
103+
table.toggleAllRowsExpanded();
104+
} else if (header?.column?.getCanSort()) {
105+
header.column.toggleSorting();
106+
} else if (cell?.column.id === 'mrt-row-pin') {
107+
cell.row.getIsPinned()
108+
? cell.row.pin(false)
109+
: cell.row.pin(
110+
table.options.rowPinningDisplayMode?.includes('bottom')
111+
? 'bottom'
112+
: 'top',
113+
);
114+
}
115+
} else if (
69116
['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(
70117
event.key,
71118
)

‎packages/material-react-table/stories/features/Selection.stories.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,15 @@ export const SelectionEnabled = () => (
5454
/>
5555
);
5656

57+
export const DisableSelectAll = () => (
58+
<MaterialReactTable
59+
columns={columns}
60+
data={data}
61+
enableSelectAll={false}
62+
enableRowSelection
63+
/>
64+
);
65+
5766
export const SelectionEnabledGrid = () => (
5867
<MaterialReactTable
5968
columns={columns}

0 commit comments

Comments
 (0)