material-react-table 1.3.9 → 1.3.11
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +15 -10
- package/dist/cjs/MaterialReactTable.d.ts +21 -21
- package/dist/cjs/_locales/cs.d.ts +1 -1
- package/dist/cjs/_locales/de.d.ts +1 -1
- package/dist/cjs/_locales/en.d.ts +1 -1
- package/dist/cjs/_locales/es.d.ts +1 -1
- package/dist/cjs/_locales/fa.d.ts +1 -1
- package/dist/cjs/_locales/fr.d.ts +2 -0
- package/dist/cjs/_locales/it.d.ts +1 -1
- package/dist/cjs/_locales/ja.d.ts +1 -1
- package/dist/cjs/_locales/pl.d.ts +1 -1
- package/dist/cjs/_locales/pt-BR.d.ts +1 -1
- package/dist/cjs/_locales/pt.d.ts +1 -1
- package/dist/cjs/_locales/ru.d.ts +1 -1
- package/dist/cjs/_locales/tr.d.ts +1 -1
- package/dist/cjs/_locales/vi.d.ts +2 -0
- package/dist/cjs/index.js +3 -3
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/table/MRT_TableRoot.d.ts +1 -1
- package/dist/esm/MaterialReactTable.d.ts +21 -21
- package/dist/esm/_locales/cs.d.ts +1 -1
- package/dist/esm/_locales/de.d.ts +1 -1
- package/dist/esm/_locales/en.d.ts +1 -1
- package/dist/esm/_locales/es.d.ts +1 -1
- package/dist/esm/_locales/fa.d.ts +1 -1
- package/dist/esm/_locales/fr.d.ts +2 -0
- package/dist/esm/_locales/it.d.ts +1 -1
- package/dist/esm/_locales/ja.d.ts +1 -1
- package/dist/esm/_locales/pl.d.ts +1 -1
- package/dist/esm/_locales/pt-BR.d.ts +1 -1
- package/dist/esm/_locales/pt.d.ts +1 -1
- package/dist/esm/_locales/ru.d.ts +1 -1
- package/dist/esm/_locales/tr.d.ts +1 -1
- package/dist/esm/_locales/vi.d.ts +2 -0
- package/dist/esm/material-react-table.esm.js +3 -3
- package/dist/esm/material-react-table.esm.js.map +1 -1
- package/dist/esm/table/MRT_TableRoot.d.ts +1 -1
- package/dist/index.d.ts +21 -21
- package/locales/cs.d.ts +1 -1
- package/locales/cs.esm.d.ts +1 -1
- package/locales/de.d.ts +1 -1
- package/locales/de.esm.d.ts +1 -1
- package/locales/en.d.ts +1 -1
- package/locales/en.esm.d.ts +1 -1
- package/locales/es.d.ts +1 -1
- package/locales/es.esm.d.ts +1 -1
- package/locales/fa.d.ts +1 -1
- package/locales/fa.esm.d.ts +1 -1
- package/locales/fr.d.ts +2 -0
- package/locales/fr.esm.d.ts +2 -0
- package/locales/fr.esm.js +92 -0
- package/locales/fr.esm.js.map +1 -0
- package/locales/fr.js +96 -0
- package/locales/fr.js.map +1 -0
- package/locales/it.d.ts +1 -1
- package/locales/it.esm.d.ts +1 -1
- package/locales/ja.d.ts +1 -1
- package/locales/ja.esm.d.ts +1 -1
- package/locales/pl.d.ts +1 -1
- package/locales/pl.esm.d.ts +1 -1
- package/locales/pt-BR.d.ts +1 -1
- package/locales/pt-BR.esm.d.ts +1 -1
- package/locales/pt.d.ts +1 -1
- package/locales/pt.esm.d.ts +1 -1
- package/locales/ru.d.ts +1 -1
- package/locales/ru.esm.d.ts +1 -1
- package/locales/tr.d.ts +1 -1
- package/locales/tr.esm.d.ts +1 -1
- package/locales/tr.esm.js +86 -86
- package/locales/tr.js +86 -86
- package/locales/vi.d.ts +2 -0
- package/locales/vi.esm.d.ts +2 -0
- package/locales/vi.esm.js +92 -0
- package/locales/vi.esm.js.map +1 -0
- package/locales/vi.js +96 -0
- package/locales/vi.js.map +1 -0
- package/package.json +29 -22
- package/src/_locales/cs.ts +1 -1
- package/src/_locales/de.ts +1 -1
- package/src/_locales/en.ts +1 -1
- package/src/_locales/es.ts +1 -1
- package/src/_locales/fa.ts +1 -1
- package/src/_locales/fr.ts +92 -1
- package/src/_locales/it.ts +1 -1
- package/src/_locales/ja.ts +1 -1
- package/src/_locales/pl.ts +1 -1
- package/src/_locales/pt-BR.ts +1 -1
- package/src/_locales/pt.ts +1 -1
- package/src/_locales/ru.ts +1 -1
- package/src/_locales/tr.ts +87 -87
- package/src/_locales/vi.ts +92 -1
- package/src/body/MRT_TableBody.tsx +1 -1
package/README.md
CHANGED
@@ -3,13 +3,13 @@
|
|
3
3
|
<a href="https://npmjs.com/package/material-react-table" target="_blank">
|
4
4
|
<img alt="" src="https://badgen.net/npm/v/material-react-table?color=blue" />
|
5
5
|
</a>
|
6
|
-
<a href="https://npmtrends.com/material-react-
|
6
|
+
<a href="https://npmtrends.com/material-react-table" target="_blank">
|
7
7
|
<img alt="" src="https://badgen.net/npm/dt/material-react-table?label=installs&icon=npm&color=blue" />
|
8
8
|
</a>
|
9
9
|
<a href="https://bundlephobia.com/result?p=material-react-table" target="_blank">
|
10
10
|
<img alt="" src="https://badgen.net/bundlephobia/minzip/material-react-table@latest?color=blue" />
|
11
11
|
</a>
|
12
|
-
<a href="https://
|
12
|
+
<a href="https://star-history.com/#kevinvandy/material-react-table&Date" target="_blank">
|
13
13
|
<img alt="" src="https://badgen.net/github/stars/KevinVandy/material-react-table?color=blue" />
|
14
14
|
</a>
|
15
15
|
<a href="https://github.com/KevinVandy/material-react-table/blob/main/LICENSE" target="_blank">
|
@@ -21,17 +21,21 @@
|
|
21
21
|
|
22
22
|
## About
|
23
23
|
|
24
|
-
__Built with [Material UI <sup>V5</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)__
|
24
|
+
### __Built with [Material UI <sup>V5</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)__
|
25
25
|
|
26
|
-
_Quickly Create React Data Tables with Material Design_
|
26
|
+
### _Quickly Create React Data Tables with Material Design_
|
27
27
|
|
28
|
-
|
28
|
+
A good table library should offer you powerful features, with an easy way to customize them, or even opt out and turn them off. It should also offer a bunch of advanced features to take your tables to the next level, but without sacrificing too bundle size bloat. MRT attempts to find that happy balance.
|
29
29
|
|
30
|
-
|
30
|
+
MRT is built on top of [TanStack Table's](https://tanstack.com/table/v8) react hooks to build upon it's high performance and flexibility.
|
31
31
|
|
32
|
-
|
32
|
+
## Learn More
|
33
33
|
|
34
|
-
|
34
|
+
- Join the [Discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion or ask questions
|
35
|
+
- View the [Docs Website](https://www.material-react-table.com/)
|
36
|
+
- See all [Props, Options, and APIs](https://www.material-react-table.com/docs/api)
|
37
|
+
|
38
|
+
### Quick Examples
|
35
39
|
|
36
40
|
- [Basic Table](https://www.material-react-table.com/docs/examples/basic/) (See Default Features)
|
37
41
|
- [Minimal Table](https://www.material-react-table.com/docs/examples/minimal/) (Turn off Features like Pagination, Sorting, Filtering, and Toolbars)
|
@@ -40,9 +44,10 @@ See all [Props, Options, and APIs](https://www.material-react-table.com/docs/api
|
|
40
44
|
- [Data Export Table](https://www.material-react-table.com/docs/examples/data-export/) (Export to CSV, Excel, etc.)
|
41
45
|
- [Editing CRUD Table](https://www.material-react-table.com/docs/examples/editing-crud/) (Create, Edit, and Delete Rows)
|
42
46
|
- [Remote Data](https://www.material-react-table.com/docs/examples/remote/) (Server-side Pagination, Sorting, and Filtering)
|
43
|
-
- [React Query](https://www.material-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering)
|
47
|
+
- [React Query](https://www.material-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering, simplified)
|
44
48
|
- [Virtualized Rows](https://www.material-react-table.com/docs/examples/virtualized/) (10,000 rows at once!)
|
45
49
|
- [Infinite Scrolling](https://www.material-react-table.com/docs/examples/infinite-scrolling/) (Fetch data as you scroll)
|
50
|
+
- [Localization (i18n)](https://www.material-react-table.com/docs/guides/localization#built-in-locale-examples) (Over a dozen languages built-in)
|
46
51
|
|
47
52
|
View additional [storybook examples](https://www.material-react-table.dev/)
|
48
53
|
|
@@ -104,7 +109,7 @@ npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
|
|
104
109
|
npm install material-react-table
|
105
110
|
```
|
106
111
|
|
107
|
-
> _`@tanstack/react-table`, `@tanstack/react-virtual`, and `@tanstack/match-sorter-utils`_ are internal dependencies, so you
|
112
|
+
> _`@tanstack/react-table`, `@tanstack/react-virtual`, and `@tanstack/match-sorter-utils`_ are internal dependencies, so you do NOT need to install them yourself.
|
108
113
|
|
109
114
|
### Usage
|
110
115
|
|
@@ -27,8 +27,8 @@ import { MRT_SortingFns } from './sortingFns';
|
|
27
27
|
/**
|
28
28
|
* Most of this file is just TypeScript types
|
29
29
|
*/
|
30
|
-
export
|
31
|
-
|
30
|
+
export type DensityState = 'comfortable' | 'compact' | 'spacious';
|
31
|
+
type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
|
32
32
|
export interface MRT_Localization {
|
33
33
|
actions: string;
|
34
34
|
and: string;
|
@@ -125,7 +125,7 @@ export interface MRT_RowModel<TData extends Record<string, any> = {}> {
|
|
125
125
|
[key: string]: MRT_Row<TData>;
|
126
126
|
};
|
127
127
|
}
|
128
|
-
export
|
128
|
+
export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<Table<TData>, 'getAllColumns' | 'getAllFlatColumns' | 'getAllLeafColumns' | 'getCenterLeafColumns' | 'getColumn' | 'getExpandedRowModel' | 'getFlatHeaders' | 'getLeftLeafColumns' | 'getPaginationRowModel' | 'getPreFilteredRowModel' | 'getPrePaginationRowModel' | 'getRightLeafColumns' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'options'> & {
|
129
129
|
getAllColumns: () => MRT_Column<TData>[];
|
130
130
|
getAllFlatColumns: () => MRT_Column<TData>[];
|
131
131
|
getAllLeafColumns: () => MRT_Column<TData>[];
|
@@ -175,7 +175,7 @@ export declare type MRT_TableInstance<TData extends Record<string, any> = {}> =
|
|
175
175
|
setShowFilters: Dispatch<SetStateAction<boolean>>;
|
176
176
|
setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
|
177
177
|
};
|
178
|
-
export
|
178
|
+
export type MRT_TableState<TData extends Record<string, any> = {}> = TableState & {
|
179
179
|
columnFilterFns: Record<string, MRT_FilterOption>;
|
180
180
|
density: DensityState;
|
181
181
|
draggingColumn: MRT_Column<TData> | null;
|
@@ -197,7 +197,7 @@ export declare type MRT_TableState<TData extends Record<string, any> = {}> = Tab
|
|
197
197
|
showProgressBars: boolean;
|
198
198
|
showSkeletons: boolean;
|
199
199
|
};
|
200
|
-
export
|
200
|
+
export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TData, unknown>, 'accessorKey' | 'aggregatedCell' | 'aggregationFn' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
|
201
201
|
AggregatedCell?: ({ cell, column, row, table, }: {
|
202
202
|
cell: MRT_Cell<TData>;
|
203
203
|
column: MRT_Column<TData>;
|
@@ -352,47 +352,47 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
|
|
352
352
|
}) => ReactNode[];
|
353
353
|
sortingFn?: MRT_SortingFn<TData>;
|
354
354
|
};
|
355
|
-
export
|
355
|
+
export type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id' | 'defaultDisplayColumn'> & {
|
356
356
|
defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
|
357
357
|
id: string;
|
358
358
|
_filterFn: MRT_FilterOption;
|
359
359
|
};
|
360
|
-
export
|
360
|
+
export type MRT_Column<TData extends Record<string, any> = {}> = Omit<Column<TData, unknown>, 'header' | 'footer' | 'columns' | 'columnDef' | 'filterFn'> & {
|
361
361
|
columnDef: MRT_DefinedColumnDef<TData>;
|
362
362
|
columns?: MRT_Column<TData>[];
|
363
363
|
filterFn?: MRT_FilterFn<TData>;
|
364
364
|
footer: string;
|
365
365
|
header: string;
|
366
366
|
};
|
367
|
-
export
|
367
|
+
export type MRT_Header<TData extends Record<string, any> = {}> = Omit<Header<TData, unknown>, 'column'> & {
|
368
368
|
column: MRT_Column<TData>;
|
369
369
|
};
|
370
|
-
export
|
370
|
+
export type MRT_HeaderGroup<TData extends Record<string, any> = {}> = Omit<HeaderGroup<TData>, 'headers'> & {
|
371
371
|
headers: MRT_Header<TData>[];
|
372
372
|
};
|
373
|
-
export
|
373
|
+
export type MRT_Row<TData extends Record<string, any> = {}> = Omit<Row<TData>, 'getVisibleCells' | 'getAllCells' | 'subRows' | '_valuesCache'> & {
|
374
374
|
getAllCells: () => MRT_Cell<TData>[];
|
375
375
|
getVisibleCells: () => MRT_Cell<TData>[];
|
376
376
|
subRows?: MRT_Row<TData>[];
|
377
377
|
_valuesCache: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
|
378
378
|
};
|
379
|
-
export
|
379
|
+
export type MRT_Cell<TData extends Record<string, any> = {}> = Omit<Cell<TData, unknown>, 'column' | 'row'> & {
|
380
380
|
column: MRT_Column<TData>;
|
381
381
|
row: MRT_Row<TData>;
|
382
382
|
};
|
383
|
-
export
|
384
|
-
export
|
385
|
-
export
|
386
|
-
export
|
387
|
-
export
|
388
|
-
export
|
389
|
-
export
|
383
|
+
export type MRT_AggregationOption = string & keyof typeof MRT_AggregationFns;
|
384
|
+
export type MRT_AggregationFn<TData extends Record<string, any> = {}> = AggregationFn<TData> | MRT_AggregationOption;
|
385
|
+
export type MRT_SortingOption = LiteralUnion<string & keyof typeof MRT_SortingFns>;
|
386
|
+
export type MRT_SortingFn<TData extends Record<string, any> = {}> = SortingFn<TData> | MRT_SortingOption;
|
387
|
+
export type MRT_FilterOption = LiteralUnion<string & keyof typeof MRT_FilterFns>;
|
388
|
+
export type MRT_FilterFn<TData extends Record<string, any> = {}> = FilterFn<TData> | MRT_FilterOption;
|
389
|
+
export type MRT_InternalFilterOption = {
|
390
390
|
option: string;
|
391
391
|
symbol: string;
|
392
392
|
label: string;
|
393
393
|
divider: boolean;
|
394
394
|
};
|
395
|
-
export
|
395
|
+
export type MRT_DisplayColumnIds = 'mrt-row-actions' | 'mrt-row-drag' | 'mrt-row-expand' | 'mrt-row-numbers' | 'mrt-row-select';
|
396
396
|
/**
|
397
397
|
* `columns` and `data` props are the only required props, but there are over 150 other optional props.
|
398
398
|
*
|
@@ -402,7 +402,7 @@ export declare type MRT_DisplayColumnIds = 'mrt-row-actions' | 'mrt-row-drag' |
|
|
402
402
|
* See the full props list on the official docs site:
|
403
403
|
* @link https://www.material-react-table.com/docs/api/props
|
404
404
|
*/
|
405
|
-
export
|
405
|
+
export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'defaultColumn' | 'enableRowSelection' | 'expandRowsFn' | 'getRowId' | 'globalFilterFn' | 'initialState' | 'onStateChange' | 'state'> & {
|
406
406
|
columnFilterModeOptions?: (MRT_FilterOption | string)[] | null;
|
407
407
|
/**
|
408
408
|
* The columns to display in the table. `accessorKey`s or `accessorFn`s must match keys in the `data` prop.
|
@@ -685,7 +685,7 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
685
685
|
}) => Partial<VirtualizerOptions<HTMLDivElement>>);
|
686
686
|
virtualizerInstanceRef?: MutableRefObject<Virtualizer | null>;
|
687
687
|
};
|
688
|
-
export
|
688
|
+
export type Virtualizer = {
|
689
689
|
virtualItems: VirtualItem[];
|
690
690
|
totalSize: number;
|
691
691
|
scrollToOffset: (index: number, options?: any | undefined) => void;
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import { MRT_Localization } from '../MaterialReactTable';
|
1
|
+
import type { MRT_Localization } from '../MaterialReactTable';
|
2
2
|
export declare const MRT_Localization_CS: MRT_Localization;
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import { MRT_Localization } from '../MaterialReactTable';
|
1
|
+
import type { MRT_Localization } from '../MaterialReactTable';
|
2
2
|
export declare const MRT_Localization_DE: MRT_Localization;
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import { MRT_Localization } from '../MaterialReactTable';
|
1
|
+
import type { MRT_Localization } from '../MaterialReactTable';
|
2
2
|
export declare const MRT_Localization_EN: MRT_Localization;
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import { MRT_Localization } from '..';
|
1
|
+
import type { MRT_Localization } from '..';
|
2
2
|
export declare const MRT_Localization_ES: MRT_Localization;
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import { MRT_Localization } from '../MaterialReactTable';
|
1
|
+
import type { MRT_Localization } from '../MaterialReactTable';
|
2
2
|
export declare const MRT_Localization_FA: MRT_Localization;
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import { MRT_Localization } from '../MaterialReactTable';
|
1
|
+
import type { MRT_Localization } from '../MaterialReactTable';
|
2
2
|
export declare const MRT_Localization_IT: MRT_Localization;
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import { MRT_Localization } from '../MaterialReactTable';
|
1
|
+
import type { MRT_Localization } from '../MaterialReactTable';
|
2
2
|
export declare const MRT_Localization_JA: MRT_Localization;
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import { MRT_Localization } from '../MaterialReactTable';
|
1
|
+
import type { MRT_Localization } from '../MaterialReactTable';
|
2
2
|
export declare const MRT_Localization_PL: MRT_Localization;
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import { MRT_Localization } from '../MaterialReactTable';
|
1
|
+
import type { MRT_Localization } from '../MaterialReactTable';
|
2
2
|
export declare const MRT_Localization_PT_BR: MRT_Localization;
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import { MRT_Localization } from '../MaterialReactTable';
|
1
|
+
import type { MRT_Localization } from '../MaterialReactTable';
|
2
2
|
export declare const MRT_Localization_PT: MRT_Localization;
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import { MRT_Localization } from '../MaterialReactTable';
|
1
|
+
import type { MRT_Localization } from '../MaterialReactTable';
|
2
2
|
export declare const MRT_Localization_RU: MRT_Localization;
|
@@ -1,2 +1,2 @@
|
|
1
|
-
import { MRT_Localization } from
|
1
|
+
import type { MRT_Localization } from '../MaterialReactTable';
|
2
2
|
export declare const MRT_Localization_TR: MRT_Localization;
|
package/dist/cjs/index.js
CHANGED
@@ -2384,7 +2384,7 @@ const MRT_TableBodyRow = ({ numRows, row, rowIndex, table, virtualRow, }) => {
|
|
2384
2384
|
const Memo_MRT_TableBodyRow = React.memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row);
|
2385
2385
|
|
2386
2386
|
const MRT_TableBody = ({ table }) => {
|
2387
|
-
var _a;
|
2387
|
+
var _a, _b;
|
2388
2388
|
const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, localization, manualFiltering, manualSorting, memoMode, muiTableBodyProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef, tablePaperRef }, } = table;
|
2389
2389
|
const { columnFilters, globalFilter, pagination, sorting } = getState();
|
2390
2390
|
const tableBodyProps = muiTableBodyProps instanceof Function
|
@@ -2451,12 +2451,12 @@ const MRT_TableBody = ({ table }) => {
|
|
2451
2451
|
// ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
|
2452
2452
|
// : 0;
|
2453
2453
|
// }
|
2454
|
-
return (React__default["default"].createElement(TableBody__default["default"], Object.assign({}, tableBodyProps), !rows.length ? (React__default["default"].createElement("tr", null,
|
2454
|
+
return (React__default["default"].createElement(TableBody__default["default"], Object.assign({}, tableBodyProps), ((_a = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _a !== void 0 ? _a : !rows.length) ? (React__default["default"].createElement("tr", null,
|
2455
2455
|
React__default["default"].createElement("td", { colSpan: table.getVisibleLeafColumns().length },
|
2456
2456
|
React__default["default"].createElement(Typography__default["default"], { sx: {
|
2457
2457
|
color: 'text.secondary',
|
2458
2458
|
fontStyle: 'italic',
|
2459
|
-
maxWidth: `min(100vw, ${(
|
2459
|
+
maxWidth: `min(100vw, ${(_b = tablePaperRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth}px)`,
|
2460
2460
|
py: '2rem',
|
2461
2461
|
textAlign: 'center',
|
2462
2462
|
width: '100%',
|