material-react-table 1.3.8 → 1.3.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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-tablee" target="_blank">
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://github.com/KevinVandy/material-react-table" target="_blank">
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
- Join the [Discord](https://discord.gg/5wqyRx6fnm) server to join in on the development discussion or ask questions
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
- View the [Docs Website](https://www.material-react-table.com/)
30
+ MRT is built on top of [TanStack Table's](https://tanstack.com/table/v8) efficient and powerful react hooks to bring
31
31
 
32
- See all [Props, Options, and APIs](https://www.material-react-table.com/docs/api)
32
+ ## Learn More
33
33
 
34
- ## Quick Examples
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
 
@@ -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 declare type DensityState = 'comfortable' | 'compact' | 'spacious';
31
- declare type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
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 declare 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'> & {
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 declare type MRT_TableState<TData extends Record<string, any> = {}> = TableState & {
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 declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TData, unknown>, 'accessorKey' | 'aggregatedCell' | 'aggregationFn' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
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 declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id' | 'defaultDisplayColumn'> & {
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 declare type MRT_Column<TData extends Record<string, any> = {}> = Omit<Column<TData, unknown>, 'header' | 'footer' | 'columns' | 'columnDef' | 'filterFn'> & {
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 declare type MRT_Header<TData extends Record<string, any> = {}> = Omit<Header<TData, unknown>, 'column'> & {
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 declare type MRT_HeaderGroup<TData extends Record<string, any> = {}> = Omit<HeaderGroup<TData>, 'headers'> & {
370
+ export type MRT_HeaderGroup<TData extends Record<string, any> = {}> = Omit<HeaderGroup<TData>, 'headers'> & {
371
371
  headers: MRT_Header<TData>[];
372
372
  };
373
- export declare type MRT_Row<TData extends Record<string, any> = {}> = Omit<Row<TData>, 'getVisibleCells' | 'getAllCells' | 'subRows' | '_valuesCache'> & {
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 declare type MRT_Cell<TData extends Record<string, any> = {}> = Omit<Cell<TData, unknown>, 'column' | 'row'> & {
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 declare type MRT_AggregationOption = string & keyof typeof MRT_AggregationFns;
384
- export declare type MRT_AggregationFn<TData extends Record<string, any> = {}> = AggregationFn<TData> | MRT_AggregationOption;
385
- export declare type MRT_SortingOption = LiteralUnion<string & keyof typeof MRT_SortingFns>;
386
- export declare type MRT_SortingFn<TData extends Record<string, any> = {}> = SortingFn<TData> | MRT_SortingOption;
387
- export declare type MRT_FilterOption = LiteralUnion<string & keyof typeof MRT_FilterFns>;
388
- export declare type MRT_FilterFn<TData extends Record<string, any> = {}> = FilterFn<TData> | MRT_FilterOption;
389
- export declare type MRT_InternalFilterOption = {
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 declare type MRT_DisplayColumnIds = 'mrt-row-actions' | 'mrt-row-drag' | 'mrt-row-expand' | 'mrt-row-numbers' | 'mrt-row-select';
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 declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'defaultColumn' | 'enableRowSelection' | 'expandRowsFn' | 'getRowId' | 'globalFilterFn' | 'initialState' | 'onStateChange' | 'state'> & {
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 declare type Virtualizer = {
688
+ export type Virtualizer = {
689
689
  virtualItems: VirtualItem[];
690
690
  totalSize: number;
691
691
  scrollToOffset: (index: number, options?: any | undefined) => void;
@@ -0,0 +1,2 @@
1
+ import { MRT_Localization } from '../MaterialReactTable';
2
+ export declare const MRT_Localization_FR: 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, ${(_a = tablePaperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth}px)`,
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%',