material-react-table 0.22.1 → 0.23.1

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/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.22.1",
2
+ "version": "0.23.1",
3
3
  "license": "MIT",
4
4
  "name": "material-react-table",
5
5
  "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -68,6 +68,7 @@
68
68
  "@storybook/addon-essentials": "^6.5.9",
69
69
  "@storybook/addon-info": "^5.3.21",
70
70
  "@storybook/addon-links": "^6.5.9",
71
+ "@storybook/addon-storysource": "^6.5.9",
71
72
  "@storybook/addons": "^6.5.9",
72
73
  "@storybook/react": "^6.5.9",
73
74
  "@types/react": "^18.0.15",
@@ -98,7 +99,7 @@
98
99
  },
99
100
  "dependencies": {
100
101
  "@tanstack/match-sorter-utils": "8.1.1",
101
- "@tanstack/react-table": "8.1.4",
102
+ "@tanstack/react-table": "8.2.2",
102
103
  "react-virtual": "^2.10.4"
103
104
  }
104
105
  }
@@ -131,7 +131,7 @@ export type MRT_TableState<TData extends Record<string, any> = {}> =
131
131
  isLoading: boolean;
132
132
  isFullScreen: boolean;
133
133
  showAlertBanner: boolean;
134
- showFilters: boolean;
134
+ showColumnFilters: boolean;
135
135
  showGlobalFilter: boolean;
136
136
  showProgressBars: boolean;
137
137
  showSkeletons: boolean;
@@ -338,7 +338,7 @@ export type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<
338
338
  };
339
339
 
340
340
  export type MRT_Column<TData extends Record<string, any> = {}> = Omit<
341
- Column<TData>,
341
+ Column<TData, unknown>,
342
342
  'header' | 'footer' | 'columns' | 'columnDef' | 'filterFn'
343
343
  > & {
344
344
  columnDef: MRT_DefinedColumnDef<TData>;
@@ -349,7 +349,7 @@ export type MRT_Column<TData extends Record<string, any> = {}> = Omit<
349
349
  };
350
350
 
351
351
  export type MRT_Header<TData extends Record<string, any> = {}> = Omit<
352
- Header<TData>,
352
+ Header<TData, unknown>,
353
353
  'column'
354
354
  > & {
355
355
  column: MRT_Column<TData>;
@@ -374,7 +374,7 @@ export type MRT_Row<TData extends Record<string, any> = {}> = Omit<
374
374
  };
375
375
 
376
376
  export type MRT_Cell<TData extends Record<string, any> = {}> = Omit<
377
- Cell<TData>,
377
+ Cell<TData, unknown>,
378
378
  'column' | 'row'
379
379
  > & {
380
380
  column: MRT_Column<TData>;
@@ -50,7 +50,6 @@ export const MRT_CopyButton: FC<Props> = ({ cell, children, table }) => {
50
50
  title={copied ? localization.copiedToClipboard : localization.clickToCopy}
51
51
  >
52
52
  <Button
53
- aria-label={localization.clickToCopy}
54
53
  onClick={() => handleCopy(cell.getValue())}
55
54
  size="small"
56
55
  type="button"
@@ -15,10 +15,10 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({ table, ...rest }) => {
15
15
  },
16
16
  setShowFilters,
17
17
  } = table;
18
- const { showFilters } = getState();
18
+ const { showColumnFilters } = getState();
19
19
 
20
20
  const handleToggleShowFilters = () => {
21
- setShowFilters(!showFilters);
21
+ setShowFilters(!showColumnFilters);
22
22
  };
23
23
 
24
24
  return (
@@ -28,7 +28,7 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({ table, ...rest }) => {
28
28
  onClick={handleToggleShowFilters}
29
29
  {...rest}
30
30
  >
31
- {showFilters ? <FilterListOffIcon /> : <FilterListIcon />}
31
+ {showColumnFilters ? <FilterListOffIcon /> : <FilterListIcon />}
32
32
  </IconButton>
33
33
  </Tooltip>
34
34
  );
package/src/filtersFns.ts CHANGED
@@ -4,10 +4,10 @@ import { filterFns, Row } from '@tanstack/react-table';
4
4
  export const fuzzy = <TData extends Record<string, any> = {}>(
5
5
  row: Row<TData>,
6
6
  columnId: string,
7
- filterValue: string,
7
+ filterValue: string | number,
8
8
  addMeta: (item: RankingInfo) => void,
9
9
  ) => {
10
- const itemRank = rankItem(row.getValue(columnId), filterValue, {
10
+ const itemRank = rankItem(row.getValue(columnId), filterValue as string, {
11
11
  threshold: rankings.MATCHES,
12
12
  });
13
13
  addMeta(itemRank);
@@ -22,7 +22,7 @@ export const contains = <TData extends Record<string, any> = {}>(
22
22
  filterValue: string | number,
23
23
  ) =>
24
24
  row
25
- .getValue(id)
25
+ .getValue<string | number>(id)
26
26
  .toString()
27
27
  .toLowerCase()
28
28
  .trim()
@@ -36,7 +36,7 @@ export const startsWith = <TData extends Record<string, any> = {}>(
36
36
  filterValue: string | number,
37
37
  ) =>
38
38
  row
39
- .getValue(id)
39
+ .getValue<string | number>(id)
40
40
  .toString()
41
41
  .toLowerCase()
42
42
  .trim()
@@ -50,7 +50,7 @@ export const endsWith = <TData extends Record<string, any> = {}>(
50
50
  filterValue: string | number,
51
51
  ) =>
52
52
  row
53
- .getValue(id)
53
+ .getValue<string | number>(id)
54
54
  .toString()
55
55
  .toLowerCase()
56
56
  .trim()
@@ -63,7 +63,7 @@ export const equals = <TData extends Record<string, any> = {}>(
63
63
  id: string,
64
64
  filterValue: string | number,
65
65
  ) =>
66
- row.getValue(id).toString().toLowerCase().trim() ===
66
+ row.getValue<string | number>(id).toString().toLowerCase().trim() ===
67
67
  filterValue.toString().toLowerCase().trim();
68
68
 
69
69
  equals.autoRemove = (val: any) => !val;
@@ -73,7 +73,7 @@ export const notEquals = <TData extends Record<string, any> = {}>(
73
73
  id: string,
74
74
  filterValue: string | number,
75
75
  ) =>
76
- row.getValue(id).toString().toLowerCase().trim() !==
76
+ row.getValue<string | number>(id).toString().toLowerCase().trim() !==
77
77
  filterValue.toString().toLowerCase().trim();
78
78
 
79
79
  notEquals.autoRemove = (val: any) => !val;
@@ -83,9 +83,9 @@ export const greaterThan = <TData extends Record<string, any> = {}>(
83
83
  id: string,
84
84
  filterValue: string | number,
85
85
  ) =>
86
- !isNaN(+filterValue) && !isNaN(+row.getValue(id))
87
- ? +row.getValue(id) >= +filterValue
88
- : row.getValue(id).toString().toLowerCase().trim() >
86
+ !isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
87
+ ? +row.getValue<string | number>(id) >= +filterValue
88
+ : row.getValue<string | number>(id).toString().toLowerCase().trim() >
89
89
  filterValue.toString().toLowerCase().trim();
90
90
 
91
91
  greaterThan.autoRemove = (val: any) => !val;
@@ -95,9 +95,9 @@ export const lessThan = <TData extends Record<string, any> = {}>(
95
95
  id: string,
96
96
  filterValue: string | number,
97
97
  ) =>
98
- !isNaN(+filterValue) && !isNaN(+row.getValue(id))
99
- ? +row.getValue(id) <= +filterValue
100
- : row.getValue(id).toString().toLowerCase().trim() <
98
+ !isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
99
+ ? +row.getValue<string | number>(id) <= +filterValue
100
+ : row.getValue<string | number>(id).toString().toLowerCase().trim() <
101
101
  filterValue.toString().toLowerCase().trim();
102
102
 
103
103
  lessThan.autoRemove = (val: any) => !val;
@@ -121,7 +121,7 @@ export const empty = <TData extends Record<string, any> = {}>(
121
121
  row: Row<TData>,
122
122
  id: string,
123
123
  _filterValue: string | number,
124
- ) => !row.getValue(id).toString().trim();
124
+ ) => !row.getValue<string | number>(id).toString().trim();
125
125
 
126
126
  empty.autoRemove = (val: any) => !val;
127
127
 
@@ -129,7 +129,7 @@ export const notEmpty = <TData extends Record<string, any> = {}>(
129
129
  row: Row<TData>,
130
130
  id: string,
131
131
  _filterValue: string | number,
132
- ) => !!row.getValue(id).toString().trim();
132
+ ) => !!row.getValue<string | number>(id).toString().trim();
133
133
 
134
134
  notEmpty.autoRemove = (val: any) => !val;
135
135
 
@@ -14,11 +14,11 @@ export const MRT_TableHeadCellFilterContainer: FC<Props> = ({
14
14
  table,
15
15
  }) => {
16
16
  const { getState } = table;
17
- const { currentFilterFns, showFilters } = getState();
17
+ const { currentFilterFns, showColumnFilters } = getState();
18
18
  const { column } = header;
19
19
 
20
20
  return (
21
- <Collapse in={showFilters} mountOnEnter unmountOnExit>
21
+ <Collapse in={showColumnFilters} mountOnEnter unmountOnExit>
22
22
  {currentFilterFns[column.id] === 'between' ? (
23
23
  <MRT_FilterRangeFields header={header} table={table} />
24
24
  ) : (
@@ -12,7 +12,7 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({ header, table }) => {
12
12
  getState,
13
13
  options: { columnResizeMode },
14
14
  } = table;
15
- const { density, showFilters } = getState();
15
+ const { density, showColumnFilters } = getState();
16
16
  const { column } = header;
17
17
  const { columnDef } = column;
18
18
  const { columnDefType } = columnDef;
@@ -26,7 +26,7 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({ header, table }) => {
26
26
  borderRadius: '2px',
27
27
  borderRightWidth: '2px',
28
28
  cursor: 'col-resize',
29
- height: showFilters && columnDefType === 'data' ? '4rem' : '2rem',
29
+ height: showColumnFilters && columnDefType === 'data' ? '4rem' : '2rem',
30
30
  mr: density === 'compact' ? '-0.5rem' : '-1rem',
31
31
  opacity: 0.8,
32
32
  position: 'absolute',
@@ -29,7 +29,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
29
29
  const { column, row } = cell;
30
30
  const { columnDef } = column;
31
31
 
32
- const [value, setValue] = useState(cell.getValue());
32
+ const [value, setValue] = useState(cell.getValue<string>());
33
33
 
34
34
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
35
35
  setValue(event.target.value);
@@ -65,8 +65,8 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
65
65
  const [showAlertBanner, setShowAlertBanner] = useState(
66
66
  props.initialState?.showAlertBanner ?? false,
67
67
  );
68
- const [showFilters, setShowFilters] = useState(
69
- initialState?.showFilters ?? false,
68
+ const [showColumnFilters, setShowFilters] = useState(
69
+ initialState?.showColumnFilters ?? false,
70
70
  );
71
71
  const [showGlobalFilter, setShowGlobalFilter] = useState(
72
72
  initialState?.showGlobalFilter ?? false,
@@ -230,7 +230,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
230
230
  density,
231
231
  isFullScreen,
232
232
  showAlertBanner,
233
- showFilters,
233
+ showColumnFilters,
234
234
  showGlobalFilter,
235
235
  ...props.state,
236
236
  } as TableState,
package/src/utils.ts CHANGED
@@ -85,7 +85,10 @@ export const getLeadingDisplayColumnIds = <
85
85
  ((props.positionActionsColumn === 'first' && props.enableRowActions) ||
86
86
  (props.enableEditing && props.editingMode === 'row')) &&
87
87
  'mrt-row-actions',
88
- (props.enableExpanding || props.enableGrouping) && 'mrt-expand',
88
+ (props.enableExpanding ||
89
+ props.enableGrouping ||
90
+ props.renderDetailPanel) &&
91
+ 'mrt-expand',
89
92
  props.enableRowSelection && 'mrt-select',
90
93
  props.enableRowNumbers && 'mrt-row-numbers',
91
94
  ].filter(Boolean) as string[];