Skip to content

Commit

Permalink
batch row selection feature, export
Browse files Browse the repository at this point in the history
  • Loading branch information
@KevinVandy
KevinVandy committed Feb 5, 2024
1 parent fe782f0 commit 9b085d5
Show file tree
Hide file tree
Showing 111 changed files with 1,498 additions and 1,204 deletions.
27 changes: 20 additions & 7 deletions apps/material-react-table-docs/components/prop-tables/tableOptions.ts
View file
Expand Up @@ -300,7 +300,8 @@ export const tableOptions: TableOption[] = [
{
tableOption: 'enableColumnVirtualization',
defaultValue: '',
description: '',
description:
'Enables column virtualization and creates an MRT_ColumnVirtualizer instance internally. This option CANNOT be enabled conditionally. Other side effects include layoutMode will be set either to "grid" or "grid-no-grow"',
link: '/docs/guides/virtualization#enable-column-virtualization',
linkText: 'MRT Virtualization Docs',
required: false,
Expand Down Expand Up @@ -581,21 +582,33 @@ export const tableOptions: TableOption[] = [
source: '',
type: "'sticky' | 'top' | 'bottom' | 'top-and-bottom' | 'select-sticky' | 'select-top' | 'select-bottom'",
},

{
tableOption: 'enableBatchRowSelection',
defaultValue: 'true',
description:
'If true, the user can select multiple rows at once by holding down the shift key while clicking.',
link: '/docs/guides/row-selection#batch-row-selection',
linkText: 'MRT Row Selection Docs',
required: false,
source: 'MRT',
type: 'boolean',
},
{
tableOption: 'enableRowSelection',
defaultValue: '',
description: '',
link: '',
linkText: '',
description:
'Enables row selection either for every row, or on a per-row basis using a function.',
link: '/docs/guides/row-selection#enable-row-selection',
linkText: 'MRT Row Selection Docs',
required: false,
source: '',
source: 'MRT',
type: 'boolean | (row: MRT_Row) => boolean',
},
{
tableOption: 'enableRowVirtualization',
defaultValue: '',
description: '',
description:
'Enables row virtualization and creates an MRT_RowVirtualizer instance internally. This option CANNOT be enabled conditionally. Other side effects include layoutMode will be set either to "grid" or "grid-no-grow"',
link: '/docs/guides/virtualization#enable-row-virtualization',
linkText: 'MRT Virtualization Docs',
required: false,
Expand Down
1 change: 1 addition & 0 deletions apps/material-react-table-docs/examples/enable-column-virtualization/sandbox/src/makeData.ts
View file
Expand Up @@ -4,6 +4,7 @@ export const fakeColumns = [...Array(500)].map((_, i) => {
return {
accessorKey: i.toString(),
header: 'Column ' + i.toString(),
size: Math.floor(Math.random() * 100) + 150,
};
});

Expand Down
20 changes: 10 additions & 10 deletions apps/material-react-table-docs/package.json
View file
Expand Up @@ -22,14 +22,14 @@
"@fortawesome/react-fontawesome": "^0.2.0",
"@mdx-js/loader": "^3.0.0",
"@mdx-js/react": "^3.0.0",
"@mui/icons-material": "^5.15.6",
"@mui/material": "^5.15.6",
"@mui/x-charts": "^6.19.1",
"@mui/x-date-pickers": "^6.19.2",
"@mui/icons-material": "^5.15.7",
"@mui/material": "^5.15.7",
"@mui/x-charts": "^6.19.3",
"@mui/x-date-pickers": "^6.19.3",
"@next/mdx": "^14.1.0",
"@tanstack/react-query": "^5.17.19",
"@tanstack/react-table-devtools": "^8.11.7",
"@types/mdx": "^2.0.10",
"@tanstack/react-query": "^5.18.1",
"@tanstack/react-table-devtools": "^8.11.8",
"@types/mdx": "^2.0.11",
"dayjs": "^1.11.10",
"export-to-csv": "^1.2.2",
"jspdf": "^2.5.1",
Expand All @@ -43,9 +43,9 @@
"zod": "^3.22.4"
},
"devDependencies": {
"@tanstack/eslint-plugin-query": "^5.17.22",
"@types/node": "^20.11.10",
"@types/react": "^18.2.48",
"@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",
Expand Down
16 changes: 16 additions & 0 deletions apps/material-react-table-docs/pages/docs/guides/row-selection.mdx
View file
Expand Up @@ -24,6 +24,7 @@ Material React Table has a built-in row selection feature and makes it easy to m
<TableOptionsTable
onlyOptions={
new Set([
'enableBatchRowSelection',
'enableMultiRowSelection',
'enableRowSelection',
'enableSelectAll',
Expand Down Expand Up @@ -57,6 +58,21 @@ const table = useMaterialReactTable({
return <MaterialReactTable table={table} />;
```

### Batch Row Selection

> New in v2.11.0
By default, when the user holds down the <kbd>Shift</kbd> key and clicks a row, all rows between the last selected row and the clicked row will be selected. This can be disabled with the `enableBatchRowSelection` table option.

```jsx
const table = useMantineReactTable({
columns,
data,
enableRowSelection: true,
enableBatchRowSelection: false, //disable batch row selection with shift key
});
```

#### Enable Row Selection Conditionally Per Row

You can also enable row selection conditionally per row with the same `enableRowSelection` table option, but with a callback function instead of a boolean.
Expand Down
10 changes: 5 additions & 5 deletions apps/test-cra/package.json
View file
Expand Up @@ -5,11 +5,11 @@
"dependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.6",
"@mui/material": "^5.15.6",
"@mui/x-date-pickers": "^6.19.2",
"@testing-library/jest-dom": "^6.3.0",
"@testing-library/react": "^14.1.2",
"@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",
"@testing-library/react": "^14.2.1",
"@testing-library/user-event": "^14.5.2",
"material-react-table": "workspace:*",
"react": "^18.2.0",
Expand Down
20 changes: 10 additions & 10 deletions apps/test-remix/package.json
View file
Expand Up @@ -12,22 +12,22 @@
"dependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.6",
"@mui/material": "^5.15.6",
"@mui/x-date-pickers": "^6.19.2",
"@remix-run/css-bundle": "^2.5.1",
"@remix-run/node": "^2.5.1",
"@remix-run/react": "^2.5.1",
"@remix-run/serve": "^2.5.1",
"@mui/icons-material": "^5.15.7",
"@mui/material": "^5.15.7",
"@mui/x-date-pickers": "^6.19.3",
"@remix-run/css-bundle": "^2.6.0",
"@remix-run/node": "^2.6.0",
"@remix-run/react": "^2.6.0",
"@remix-run/serve": "^2.6.0",
"isbot": "^4.4.0",
"material-react-table": "workspace:*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@remix-run/dev": "^2.5.1",
"@remix-run/eslint-config": "^2.5.1",
"@types/react": "^18.2.48",
"@remix-run/dev": "^2.6.0",
"@remix-run/eslint-config": "^2.6.0",
"@types/react": "^18.2.52",
"@types/react-dom": "^18.2.18",
"eslint": "^8.56.0",
"typescript": "^5.3.3"
Expand Down
8 changes: 4 additions & 4 deletions apps/test-vite/package.json
View file
Expand Up @@ -12,15 +12,15 @@
"dependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.6",
"@mui/material": "^5.15.6",
"@mui/x-date-pickers": "^6.19.2",
"@mui/icons-material": "^5.15.7",
"@mui/material": "^5.15.7",
"@mui/x-date-pickers": "^6.19.3",
"material-react-table": "workspace:*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.48",
"@types/react": "^18.2.52",
"@types/react-dom": "^18.2.18",
"@typescript-eslint/eslint-plugin": "^6.20.0",
"@typescript-eslint/parser": "^6.20.0",
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Expand Up @@ -25,8 +25,8 @@
"storybook:dev": "turbo run storybook"
},
"devDependencies": {
"prettier": "^3.2.4",
"turbo": "^1.11.3"
"prettier": "^3.2.5",
"turbo": "^1.12.2"
},
"engines": {
"node": ">=16.0.0"
Expand Down
34 changes: 17 additions & 17 deletions packages/material-react-table/package.json
View file
Expand Up @@ -66,22 +66,22 @@
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@faker-js/faker": "^8.4.0",
"@mui/icons-material": "^5.15.6",
"@mui/material": "^5.15.6",
"@mui/x-date-pickers": "^6.19.2",
"@mui/icons-material": "^5.15.7",
"@mui/material": "^5.15.7",
"@mui/x-date-pickers": "^6.19.3",
"@rollup/plugin-typescript": "^11.1.6",
"@size-limit/preset-small-lib": "^11.0.2",
"@storybook/addon-a11y": "^7.6.10",
"@storybook/addon-essentials": "^7.6.10",
"@storybook/addon-interactions": "^7.6.10",
"@storybook/addon-links": "^7.6.10",
"@storybook/addon-storysource": "^7.6.10",
"@storybook/blocks": "^7.6.10",
"@storybook/react": "^7.6.10",
"@storybook/react-vite": "^7.6.10",
"@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/testing-library": "^0.2.2",
"@types/node": "^20.11.10",
"@types/react": "^18.2.48",
"@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",
Expand All @@ -99,7 +99,7 @@
"rollup-plugin-dts": "^6.1.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"size-limit": "^11.0.2",
"storybook": "^7.6.10",
"storybook": "^7.6.12",
"storybook-dark-mode": "^3.0.3",
"tslib": "^2.6.2",
"typescript": "^5.3.3",
Expand All @@ -115,9 +115,9 @@
"react-dom": ">=18.0"
},
"dependencies": {
"@tanstack/match-sorter-utils": "8.11.7",
"@tanstack/react-table": "8.11.7",
"@tanstack/react-virtual": "3.0.2",
"@tanstack/match-sorter-utils": "8.11.8",
"@tanstack/react-table": "8.11.8",
"@tanstack/react-virtual": "3.0.4",
"highlight-words": "1.2.2"
}
}
6 changes: 3 additions & 3 deletions packages/material-react-table/src/components/MaterialReactTable.tsx
View file
Expand Up @@ -11,18 +11,18 @@ type TableInstanceProp<TData extends MRT_RowData> = {
table: MRT_TableInstance<TData>;
};

type Props<TData extends MRT_RowData> = Xor<
export type MaterialReactTableProps<TData extends MRT_RowData> = Xor<
TableInstanceProp<TData>,
MRT_TableOptions<TData>
>;

const isTableInstanceProp = <TData extends MRT_RowData>(
props: Props<TData>,
props: MaterialReactTableProps<TData>,
): props is TableInstanceProp<TData> =>
(props as TableInstanceProp<TData>).table !== undefined;

export const MaterialReactTable = <TData extends MRT_RowData>(
props: Props<TData>,
props: MaterialReactTableProps<TData>,
) => {
let table: MRT_TableInstance<TData>;

Expand Down
5 changes: 3 additions & 2 deletions packages/material-react-table/src/components/body/MRT_TableBody.tsx
View file
Expand Up @@ -13,7 +13,8 @@ import {
} from '../../types';
import { parseFromValuesOrFunc } from '../../utils/utils';

interface Props<TData extends MRT_RowData> extends TableBodyProps {
export interface MRT_TableBodyProps<TData extends MRT_RowData>
extends TableBodyProps {
columnVirtualizer?: MRT_ColumnVirtualizer;
table: MRT_TableInstance<TData>;
}
Expand All @@ -22,7 +23,7 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
columnVirtualizer,
table,
...rest
}: Props<TData>) => {
}: MRT_TableBodyProps<TData>) => {
const {
getBottomRows,
getIsSomeRowsPinned,
Expand Down
5 changes: 3 additions & 2 deletions packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx
View file
Expand Up @@ -23,7 +23,8 @@ import { parseFromValuesOrFunc } from '../../utils/utils';
import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';

interface Props<TData extends MRT_RowData> extends TableCellProps {
export interface MRT_TableBodyCellProps<TData extends MRT_RowData>
extends TableCellProps {
cell: MRT_Cell<TData>;
numRows?: number;
rowRef: RefObject<HTMLTableRowElement>;
Expand All @@ -40,7 +41,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
staticRowIndex,
table,
...rest
}: Props<TData>) => {
}: MRT_TableBodyCellProps<TData>) => {
const theme = useTheme();
const {
getState,
Expand Down
4 changes: 2 additions & 2 deletions packages/material-react-table/src/components/body/MRT_TableBodyCellValue.tsx
View file
Expand Up @@ -10,7 +10,7 @@ import highlightWords from 'highlight-words';

const allowedTypes = ['string', 'number'];

interface Props<TData extends MRT_RowData> {
export interface MRT_TableBodyCellValueProps<TData extends MRT_RowData> {
cell: MRT_Cell<TData>;
rowRef?: RefObject<HTMLTableRowElement>;
staticRowIndex?: number;
Expand All @@ -22,7 +22,7 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
rowRef,
staticRowIndex,
table,
}: Props<TData>) => {
}: MRT_TableBodyCellValueProps<TData>) => {
const {
getState,
options: { enableFilterMatchHighlighting },
Expand Down
21 changes: 13 additions & 8 deletions packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx
View file
@@ -1,6 +1,6 @@
import { type DragEvent, memo, useMemo, useRef } from 'react';
import { type VirtualItem } from '@tanstack/react-virtual';
import TableRow from '@mui/material/TableRow';
import TableRow, { type TableRowProps } from '@mui/material/TableRow';
import {
type Theme,
alpha,
Expand All @@ -27,7 +27,8 @@ import {
} from '../../utils/style.utils';
import { parseFromValuesOrFunc } from '../../utils/utils';

interface Props<TData extends MRT_RowData> {
export interface MRT_TableBodyRowProps<TData extends MRT_RowData>
extends TableRowProps {
columnVirtualizer?: MRT_ColumnVirtualizer;
numRows?: number;
pinnedRowIds?: string[];
Expand All @@ -47,7 +48,8 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
staticRowIndex,
table,
virtualRow,
}: Props<TData>) => {
...rest
}: MRT_TableBodyRowProps<TData>) => {
const theme = useTheme();

const {
Expand Down Expand Up @@ -87,11 +89,14 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
const isDraggingRow = draggingRow?.id === row.id;
const isHoveredRow = hoveredRow?.id === row.id;

const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
row,
staticRowIndex,
table,
});
const tableRowProps = {
...parseFromValuesOrFunc(muiTableBodyRowProps, {
row,
staticRowIndex,
table,
}),
...rest,
};

const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
if (
Expand Down

0 comments on commit 9b085d5

Please sign in to comment.