material-react-table 2.0.5 → 2.0.6
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/dist/index.d.ts +2 -1
- package/dist/index.esm.js +585 -528
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +584 -527
- package/dist/index.js.map +1 -1
- package/dist/types/hooks/useMRT_DisplayColumns.d.ts +1 -1
- package/dist/types/locales/he.d.ts +2 -0
- package/dist/types/toolbar/MRT_TablePagination.d.ts +1 -0
- package/package.json +23 -23
- package/src/body/MRT_TableBodyCell.tsx +17 -15
- package/src/body/MRT_TableBodyCellValue.tsx +9 -9
- package/src/body/MRT_TableBodyRow.tsx +13 -13
- package/src/buttons/MRT_RowPinButton.tsx +2 -2
- package/src/buttons/MRT_ToggleDensePaddingButton.tsx +2 -2
- package/src/footer/MRT_TableFooterCell.tsx +2 -2
- package/src/head/MRT_TableHeadCell.tsx +21 -19
- package/src/head/MRT_TableHeadCellResizeHandle.tsx +4 -3
- package/src/hooks/useMRT_DisplayColumns.tsx +172 -125
- package/src/inputs/MRT_FilterCheckbox.tsx +2 -2
- package/src/inputs/MRT_FilterTextField.tsx +16 -16
- package/src/inputs/MRT_SelectCheckbox.tsx +2 -2
- package/src/locales/he.ts +94 -0
- package/src/menus/MRT_ShowHideColumnsMenuItems.tsx +2 -2
- package/src/style.utils.ts +2 -2
- package/src/toolbar/MRT_TablePagination.tsx +8 -4
- package/src/toolbar/MRT_ToolbarAlertBanner.tsx +6 -6
- package/src/types.ts +2 -2
@@ -10,21 +10,12 @@ import {
|
|
10
10
|
type MRT_ColumnDef,
|
11
11
|
type MRT_ColumnOrderState,
|
12
12
|
type MRT_DefinedTableOptions,
|
13
|
+
type MRT_DisplayColumnIds,
|
13
14
|
type MRT_GroupingState,
|
15
|
+
type MRT_Localization,
|
14
16
|
type MRT_Row,
|
15
17
|
type MRT_RowData,
|
16
18
|
} from '../types';
|
17
|
-
import { MRT_DefaultDisplayColumn } from './useMRT_TableOptions';
|
18
|
-
|
19
|
-
const blankColProps = {
|
20
|
-
children: null,
|
21
|
-
sx: {
|
22
|
-
flex: '1 0 auto',
|
23
|
-
minWidth: 0,
|
24
|
-
p: 0,
|
25
|
-
width: 0,
|
26
|
-
},
|
27
|
-
};
|
28
19
|
|
29
20
|
interface Params<TData extends MRT_RowData> {
|
30
21
|
columnOrder: MRT_ColumnOrderState;
|
@@ -33,124 +24,28 @@ interface Params<TData extends MRT_RowData> {
|
|
33
24
|
tableOptions: MRT_DefinedTableOptions<TData>;
|
34
25
|
}
|
35
26
|
|
36
|
-
export const useMRT_DisplayColumns = <TData extends MRT_RowData>(
|
37
|
-
|
38
|
-
|
39
|
-
grouping,
|
40
|
-
tableOptions
|
41
|
-
|
27
|
+
export const useMRT_DisplayColumns = <TData extends MRT_RowData>(
|
28
|
+
params: Params<TData>,
|
29
|
+
): MRT_ColumnDef<TData>[] => {
|
30
|
+
const { columnOrder, creatingRow, grouping, tableOptions } = params;
|
31
|
+
const order = tableOptions.state?.columnOrder ?? columnOrder;
|
32
|
+
|
42
33
|
return useMemo(
|
43
34
|
() =>
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
columnDefType: 'display',
|
56
|
-
id: 'mrt-row-pin',
|
57
|
-
},
|
58
|
-
(tableOptions.state?.columnOrder ?? columnOrder).includes(
|
59
|
-
'mrt-row-drag',
|
60
|
-
) && {
|
61
|
-
Cell: ({ row, rowRef, table }) => (
|
62
|
-
<MRT_TableBodyRowGrabHandle
|
63
|
-
row={row}
|
64
|
-
rowRef={rowRef as RefObject<HTMLTableRowElement>}
|
65
|
-
table={table}
|
66
|
-
/>
|
67
|
-
),
|
68
|
-
header: tableOptions.localization.move,
|
69
|
-
size: 60,
|
70
|
-
...tableOptions.displayColumnDefOptions?.['mrt-row-drag'],
|
71
|
-
columnDefType: 'display',
|
72
|
-
id: 'mrt-row-drag',
|
73
|
-
},
|
74
|
-
((tableOptions.state?.columnOrder ?? columnOrder).includes(
|
75
|
-
'mrt-row-actions',
|
76
|
-
) ||
|
77
|
-
(creatingRow && tableOptions.createDisplayMode === 'row')) && {
|
78
|
-
Cell: ({ cell, row, table }) => (
|
79
|
-
<MRT_ToggleRowActionMenuButton
|
80
|
-
cell={cell}
|
81
|
-
row={row}
|
82
|
-
table={table}
|
83
|
-
/>
|
84
|
-
),
|
85
|
-
header: tableOptions.localization.actions,
|
86
|
-
size: 70,
|
87
|
-
...tableOptions.displayColumnDefOptions?.['mrt-row-actions'],
|
88
|
-
columnDefType: 'display',
|
89
|
-
id: 'mrt-row-actions',
|
90
|
-
},
|
91
|
-
(tableOptions.state?.columnOrder ?? columnOrder).includes(
|
92
|
-
'mrt-row-expand',
|
93
|
-
) &&
|
94
|
-
showExpandColumn(
|
95
|
-
tableOptions,
|
96
|
-
tableOptions.state?.grouping ?? grouping,
|
97
|
-
) && {
|
98
|
-
Cell: ({ row, table }) => (
|
99
|
-
<MRT_ExpandButton row={row} table={table} />
|
100
|
-
),
|
101
|
-
Header: tableOptions.enableExpandAll
|
102
|
-
? ({ table }) => <MRT_ExpandAllButton table={table} />
|
103
|
-
: null,
|
104
|
-
header: tableOptions.localization.expand,
|
105
|
-
size: 60,
|
106
|
-
...tableOptions.displayColumnDefOptions?.['mrt-row-expand'],
|
107
|
-
columnDefType: 'display',
|
108
|
-
id: 'mrt-row-expand',
|
109
|
-
},
|
110
|
-
(tableOptions.state?.columnOrder ?? columnOrder).includes(
|
111
|
-
'mrt-row-select',
|
112
|
-
) && {
|
113
|
-
Cell: ({ row, table }) => (
|
114
|
-
<MRT_SelectCheckbox row={row} table={table} />
|
115
|
-
),
|
116
|
-
Header:
|
117
|
-
tableOptions.enableSelectAll &&
|
118
|
-
tableOptions.enableMultiRowSelection
|
119
|
-
? ({ table }) => <MRT_SelectCheckbox selectAll table={table} />
|
120
|
-
: null,
|
121
|
-
header: tableOptions.localization.select,
|
122
|
-
size: 60,
|
123
|
-
...tableOptions.displayColumnDefOptions?.['mrt-row-select'],
|
124
|
-
columnDefType: 'display',
|
125
|
-
id: 'mrt-row-select',
|
126
|
-
},
|
127
|
-
(tableOptions.state?.columnOrder ?? columnOrder).includes(
|
128
|
-
'mrt-row-numbers',
|
129
|
-
) && {
|
130
|
-
Cell: ({ row }) => row.index + 1,
|
131
|
-
Header: () => tableOptions.localization.rowNumber,
|
132
|
-
header: tableOptions.localization.rowNumbers,
|
133
|
-
size: 60,
|
134
|
-
...tableOptions.displayColumnDefOptions?.['mrt-row-numbers'],
|
135
|
-
columnDefType: 'display',
|
136
|
-
id: 'mrt-row-numbers',
|
137
|
-
},
|
138
|
-
(tableOptions.state?.columnOrder ?? columnOrder).includes(
|
139
|
-
'mrt-row-spacer',
|
140
|
-
) && {
|
141
|
-
...tableOptions.displayColumnDefOptions?.['mrt-row-spacer'],
|
142
|
-
...MRT_DefaultDisplayColumn,
|
143
|
-
columnDefType: 'display',
|
144
|
-
header: '',
|
145
|
-
id: 'mrt-row-spacer',
|
146
|
-
muiTableBodyCellProps: blankColProps,
|
147
|
-
muiTableFooterCellProps: blankColProps,
|
148
|
-
muiTableHeadCellProps: blankColProps,
|
149
|
-
},
|
150
|
-
] as MRT_ColumnDef<TData>[]
|
151
|
-
).filter(Boolean),
|
35
|
+
[
|
36
|
+
makeRowPinColumn,
|
37
|
+
makeRowDragColumn,
|
38
|
+
makeRowActionsColumn,
|
39
|
+
makeRowExpandColumn,
|
40
|
+
makeRowSelectColumn,
|
41
|
+
makeRowNumbersColumn,
|
42
|
+
makeSpacerColumn,
|
43
|
+
]
|
44
|
+
.map((makeCol) => makeCol(params, order))
|
45
|
+
.filter(Boolean) as MRT_ColumnDef<TData>[],
|
152
46
|
[
|
153
47
|
columnOrder,
|
48
|
+
creatingRow,
|
154
49
|
grouping,
|
155
50
|
tableOptions.displayColumnDefOptions,
|
156
51
|
tableOptions.editDisplayMode,
|
@@ -177,3 +72,155 @@ export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
|
|
177
72
|
],
|
178
73
|
);
|
179
74
|
};
|
75
|
+
|
76
|
+
function defaultDisplayColumnProps<TData extends MRT_RowData>(
|
77
|
+
{
|
78
|
+
defaultDisplayColumn,
|
79
|
+
displayColumnDefOptions,
|
80
|
+
localization,
|
81
|
+
}: MRT_DefinedTableOptions<TData>,
|
82
|
+
id: MRT_DisplayColumnIds,
|
83
|
+
header?: keyof MRT_Localization,
|
84
|
+
size = 60,
|
85
|
+
) {
|
86
|
+
return {
|
87
|
+
...defaultDisplayColumn,
|
88
|
+
header: header ? localization[header]! : '',
|
89
|
+
size,
|
90
|
+
...displayColumnDefOptions?.[id],
|
91
|
+
id,
|
92
|
+
} as const;
|
93
|
+
}
|
94
|
+
|
95
|
+
function makeRowPinColumn<TData extends MRT_RowData>(
|
96
|
+
{ tableOptions }: Params<TData>,
|
97
|
+
order: MRT_ColumnOrderState,
|
98
|
+
): MRT_ColumnDef<TData> | null {
|
99
|
+
const id: MRT_DisplayColumnIds = 'mrt-row-pin';
|
100
|
+
if (order.includes(id)) {
|
101
|
+
return {
|
102
|
+
Cell: ({ row, table }) => (
|
103
|
+
<MRT_TableBodyRowPinButton row={row} table={table} />
|
104
|
+
),
|
105
|
+
...defaultDisplayColumnProps(tableOptions, id, 'pin'),
|
106
|
+
};
|
107
|
+
}
|
108
|
+
return null;
|
109
|
+
}
|
110
|
+
|
111
|
+
function makeRowDragColumn<TData extends MRT_RowData>(
|
112
|
+
{ tableOptions }: Params<TData>,
|
113
|
+
order: MRT_ColumnOrderState,
|
114
|
+
): MRT_ColumnDef<TData> | null {
|
115
|
+
const id: MRT_DisplayColumnIds = 'mrt-row-drag';
|
116
|
+
if (order.includes(id)) {
|
117
|
+
return {
|
118
|
+
Cell: ({ row, rowRef, table }) => (
|
119
|
+
<MRT_TableBodyRowGrabHandle
|
120
|
+
row={row}
|
121
|
+
rowRef={rowRef as RefObject<HTMLTableRowElement>}
|
122
|
+
table={table}
|
123
|
+
/>
|
124
|
+
),
|
125
|
+
...defaultDisplayColumnProps(tableOptions, id, 'move'),
|
126
|
+
};
|
127
|
+
}
|
128
|
+
return null;
|
129
|
+
}
|
130
|
+
|
131
|
+
function makeRowActionsColumn<TData extends MRT_RowData>(
|
132
|
+
{ creatingRow, tableOptions }: Params<TData>,
|
133
|
+
order: MRT_ColumnOrderState,
|
134
|
+
): MRT_ColumnDef<TData> | null {
|
135
|
+
const id: MRT_DisplayColumnIds = 'mrt-row-actions';
|
136
|
+
if (
|
137
|
+
order.includes(id) ||
|
138
|
+
(creatingRow && tableOptions.createDisplayMode === 'row')
|
139
|
+
) {
|
140
|
+
return {
|
141
|
+
Cell: ({ cell, row, table }) => (
|
142
|
+
<MRT_ToggleRowActionMenuButton cell={cell} row={row} table={table} />
|
143
|
+
),
|
144
|
+
...defaultDisplayColumnProps(tableOptions, id, 'actions'),
|
145
|
+
};
|
146
|
+
}
|
147
|
+
return null;
|
148
|
+
}
|
149
|
+
|
150
|
+
function makeRowExpandColumn<TData extends MRT_RowData>(
|
151
|
+
{ grouping, tableOptions }: Params<TData>,
|
152
|
+
order: MRT_ColumnOrderState,
|
153
|
+
): MRT_ColumnDef<TData> | null {
|
154
|
+
const id: MRT_DisplayColumnIds = 'mrt-row-expand';
|
155
|
+
if (
|
156
|
+
order.includes(id) &&
|
157
|
+
showExpandColumn(tableOptions, tableOptions.state?.grouping ?? grouping)
|
158
|
+
) {
|
159
|
+
return {
|
160
|
+
Cell: ({ row, table }) => <MRT_ExpandButton row={row} table={table} />,
|
161
|
+
Header: tableOptions.enableExpandAll
|
162
|
+
? ({ table }) => <MRT_ExpandAllButton table={table} />
|
163
|
+
: undefined,
|
164
|
+
...defaultDisplayColumnProps(tableOptions, id, 'expand'),
|
165
|
+
};
|
166
|
+
}
|
167
|
+
return null;
|
168
|
+
}
|
169
|
+
|
170
|
+
function makeRowSelectColumn<TData extends MRT_RowData>(
|
171
|
+
{ tableOptions }: Params<TData>,
|
172
|
+
order: MRT_ColumnOrderState,
|
173
|
+
): MRT_ColumnDef<TData> | null {
|
174
|
+
const id: MRT_DisplayColumnIds = 'mrt-row-select';
|
175
|
+
if (order.includes(id)) {
|
176
|
+
return {
|
177
|
+
Cell: ({ row, table }) => <MRT_SelectCheckbox row={row} table={table} />,
|
178
|
+
Header:
|
179
|
+
tableOptions.enableSelectAll && tableOptions.enableMultiRowSelection
|
180
|
+
? ({ table }) => <MRT_SelectCheckbox selectAll table={table} />
|
181
|
+
: undefined,
|
182
|
+
...defaultDisplayColumnProps(tableOptions, id, 'select'),
|
183
|
+
};
|
184
|
+
}
|
185
|
+
return null;
|
186
|
+
}
|
187
|
+
|
188
|
+
function makeRowNumbersColumn<TData extends MRT_RowData>(
|
189
|
+
{ tableOptions }: Params<TData>,
|
190
|
+
order: MRT_ColumnOrderState,
|
191
|
+
): MRT_ColumnDef<TData> | null {
|
192
|
+
const id: MRT_DisplayColumnIds = 'mrt-row-numbers';
|
193
|
+
if (order.includes(id) || tableOptions.enableRowNumbers)
|
194
|
+
return {
|
195
|
+
Cell: ({ row }) => row.index + 1,
|
196
|
+
Header: () => tableOptions.localization.rowNumber,
|
197
|
+
...defaultDisplayColumnProps(tableOptions, id, 'rowNumbers'),
|
198
|
+
};
|
199
|
+
return null;
|
200
|
+
}
|
201
|
+
|
202
|
+
const blankColProps = {
|
203
|
+
children: null,
|
204
|
+
sx: {
|
205
|
+
flex: '1 0 auto',
|
206
|
+
minWidth: 0,
|
207
|
+
p: 0,
|
208
|
+
width: 0,
|
209
|
+
},
|
210
|
+
};
|
211
|
+
|
212
|
+
function makeSpacerColumn<TData extends MRT_RowData>(
|
213
|
+
{ tableOptions }: Params<TData>,
|
214
|
+
order: MRT_ColumnOrderState,
|
215
|
+
): MRT_ColumnDef<TData> | null {
|
216
|
+
const id: MRT_DisplayColumnIds = 'mrt-row-spacer';
|
217
|
+
if (order.includes(id)) {
|
218
|
+
return {
|
219
|
+
...defaultDisplayColumnProps(tableOptions, id, undefined, 0),
|
220
|
+
muiTableBodyCellProps: blankColProps,
|
221
|
+
muiTableFooterCellProps: blankColProps,
|
222
|
+
muiTableHeadCellProps: blankColProps,
|
223
|
+
};
|
224
|
+
}
|
225
|
+
return null;
|
226
|
+
}
|
@@ -63,8 +63,8 @@ export const MRT_FilterCheckbox = <TData extends MRT_RowData>({
|
|
63
63
|
column.getFilterValue() === undefined
|
64
64
|
? 'true'
|
65
65
|
: column.getFilterValue() === 'true'
|
66
|
-
|
67
|
-
|
66
|
+
? 'false'
|
67
|
+
: undefined,
|
68
68
|
);
|
69
69
|
checkboxProps?.onChange?.(e, checked);
|
70
70
|
}}
|
@@ -107,10 +107,10 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
|
|
107
107
|
? textFieldProps?.placeholder ??
|
108
108
|
localization.filterByColumn?.replace('{column}', String(columnDef.header))
|
109
109
|
: rangeFilterIndex === 0
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
110
|
+
? localization.min
|
111
|
+
: rangeFilterIndex === 1
|
112
|
+
? localization.max
|
113
|
+
: '';
|
114
114
|
const allowedColumnFilterOptions =
|
115
115
|
columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
|
116
116
|
const showChangeModeButton =
|
@@ -127,10 +127,10 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
|
|
127
127
|
isMultiSelectFilter
|
128
128
|
? (column.getFilterValue() as string[]) || []
|
129
129
|
: isRangeFilter
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
130
|
+
? (column.getFilterValue() as [string, string])?.[
|
131
|
+
rangeFilterIndex as number
|
132
|
+
] || ''
|
133
|
+
: (column.getFilterValue() as string) ?? '',
|
134
134
|
);
|
135
135
|
|
136
136
|
const handleChangeDebounced = useCallback(
|
@@ -161,8 +161,8 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
|
|
161
161
|
textFieldProps.type === 'date'
|
162
162
|
? event.target.valueAsDate
|
163
163
|
: textFieldProps.type === 'number'
|
164
|
-
|
165
|
-
|
164
|
+
? event.target.valueAsNumber
|
165
|
+
: event.target.value;
|
166
166
|
handleChange(newValue);
|
167
167
|
textFieldProps?.onChange?.(event);
|
168
168
|
};
|
@@ -337,12 +337,12 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
|
|
337
337
|
minWidth: isDateFilter
|
338
338
|
? '160px'
|
339
339
|
: enableColumnFilterModes && rangeFilterIndex === 0
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
340
|
+
? '110px'
|
341
|
+
: isRangeFilter
|
342
|
+
? '100px'
|
343
|
+
: !filterChipLabel
|
344
|
+
? '120px'
|
345
|
+
: 'auto',
|
346
346
|
mx: '-2px',
|
347
347
|
p: 0,
|
348
348
|
width: 'calc(100% + 4px)',
|
@@ -62,8 +62,8 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
|
|
62
62
|
row
|
63
63
|
? row.getToggleSelectedHandler()(event)
|
64
64
|
: selectAllMode === 'all'
|
65
|
-
|
66
|
-
|
65
|
+
? table.getToggleAllRowsSelectedHandler()(event)
|
66
|
+
: table.getToggleAllPageRowsSelectedHandler()(event);
|
67
67
|
if (enableRowPinning && rowPinningDisplayMode?.includes('select')) {
|
68
68
|
if (row) {
|
69
69
|
row.pin(
|
@@ -0,0 +1,94 @@
|
|
1
|
+
import { type MRT_Localization } from '..';
|
2
|
+
|
3
|
+
export const MRT_Localization_HE: MRT_Localization = {
|
4
|
+
actions: 'פעולות',
|
5
|
+
and: 'ו',
|
6
|
+
cancel: 'ביטול',
|
7
|
+
changeFilterMode: 'שינוי מצב סינון',
|
8
|
+
changeSearchMode: 'שינוי מצב חיפוש',
|
9
|
+
clearFilter: 'נקה סינון',
|
10
|
+
clearSearch: 'נקה חיפוש',
|
11
|
+
clearSort: 'נקה מיון',
|
12
|
+
clickToCopy: 'לחץ להעתקה',
|
13
|
+
collapse: 'צמצום',
|
14
|
+
collapseAll: 'צמצום הכל',
|
15
|
+
columnActions: 'פעולות עמודה',
|
16
|
+
copiedToClipboard: 'הועתק ללוח',
|
17
|
+
dropToGroupBy: 'גרור לקיבוץ לפי {column}',
|
18
|
+
edit: 'ערוך',
|
19
|
+
expand: 'הרחב',
|
20
|
+
expandAll: 'הרחב הכל',
|
21
|
+
filterArrIncludes: 'כולל',
|
22
|
+
filterArrIncludesAll: 'כולל הכל',
|
23
|
+
filterArrIncludesSome: 'כולל',
|
24
|
+
filterBetween: 'בין',
|
25
|
+
filterBetweenInclusive: 'בין כולל',
|
26
|
+
filterByColumn: 'סנן לפי {column}',
|
27
|
+
filterContains: 'מכיל',
|
28
|
+
filterEmpty: 'ריק',
|
29
|
+
filterEndsWith: 'מסתיים ב',
|
30
|
+
filterEquals: 'שווה',
|
31
|
+
filterEqualsString: 'שווה',
|
32
|
+
filterFuzzy: 'פעיל',
|
33
|
+
filterGreaterThan: 'גדול מ',
|
34
|
+
filterGreaterThanOrEqualTo: 'גדול או שווה ל',
|
35
|
+
filterInNumberRange: 'בין',
|
36
|
+
filterIncludesString: 'מכיל',
|
37
|
+
filterIncludesStringSensitive: 'מכיל',
|
38
|
+
filterLessThan: 'קטן מ',
|
39
|
+
filterLessThanOrEqualTo: 'קטן או שווה ל',
|
40
|
+
filterMode: 'מצב סינון: {filterType}',
|
41
|
+
filterNotEmpty: 'לא ריק',
|
42
|
+
filterNotEquals: 'לא שווה',
|
43
|
+
filterStartsWith: 'מתחיל ב',
|
44
|
+
filterWeakEquals: 'שווה',
|
45
|
+
filteringByColumn: 'מסנן לפי {column} - {filterType} {filterValue}',
|
46
|
+
goToFirstPage: 'לדף הראשון',
|
47
|
+
goToLastPage: 'לדף האחרון',
|
48
|
+
goToNextPage: 'לדף הבא',
|
49
|
+
goToPreviousPage: 'לדף הקודם',
|
50
|
+
grab: 'תפוס',
|
51
|
+
groupByColumn: 'קיבוץ לפי {column}',
|
52
|
+
groupedBy: 'קובץ לפי',
|
53
|
+
hideAll: 'הסתר הכל',
|
54
|
+
hideColumn: 'הסתר עמודה {column}',
|
55
|
+
max: 'מקסימום',
|
56
|
+
min: 'מינימום',
|
57
|
+
move: 'הזז',
|
58
|
+
noRecordsToDisplay: 'אין רשומות להצגה',
|
59
|
+
noResultsFound: 'לא נמצאו תוצאות',
|
60
|
+
of: 'מתוך',
|
61
|
+
or: 'או',
|
62
|
+
pin: 'נעץ',
|
63
|
+
pinToLeft: 'נעץ לשמאל',
|
64
|
+
pinToRight: 'נעץ לימין',
|
65
|
+
resetColumnSize: 'איפוס גודל עמודה',
|
66
|
+
resetOrder: 'איפוס סדר',
|
67
|
+
rowActions: 'פעולות שורה',
|
68
|
+
rowNumber: '#',
|
69
|
+
rowNumbers: 'מספרי שורות',
|
70
|
+
rowsPerPage: 'שורות לעמוד',
|
71
|
+
save: 'שמור',
|
72
|
+
search: 'חיפוש',
|
73
|
+
selectedCountOfRowCountRowsSelected:
|
74
|
+
'{selectedCount} מתוך {rowCount} שורות נבחרו',
|
75
|
+
select: 'בחר',
|
76
|
+
showAll: 'הצג הכל',
|
77
|
+
showAllColumns: 'הצג את כל העמודות',
|
78
|
+
showHideColumns: 'הצג/הסתר עמודות',
|
79
|
+
showHideFilters: 'הצג/הסתר סינונים',
|
80
|
+
showHideSearch: 'הצג/הסתר חיפוש',
|
81
|
+
sortByColumnAsc: 'מיין לפי {column} בסדר עולה',
|
82
|
+
sortByColumnDesc: 'מיין לפי {column} בסדר יורד',
|
83
|
+
sortedByColumnAsc: 'ממוין לפי {column} בסדר עולה',
|
84
|
+
sortedByColumnDesc: 'ממוין לפי {column} בסדר יורד',
|
85
|
+
thenBy: ', ואז לפי ',
|
86
|
+
toggleDensity: 'שנה צפיפות',
|
87
|
+
toggleFullScreen: 'מסך מלא',
|
88
|
+
toggleSelectAll: 'בחר/בטל בחירת הכל',
|
89
|
+
toggleSelectRow: 'בחר/בטל בחירת שורה',
|
90
|
+
toggleVisibility: 'הצג/הסתר',
|
91
|
+
ungroupByColumn: 'בטל קיבוץ לפי {column}',
|
92
|
+
unpin: 'בטל נעיצה',
|
93
|
+
unpinAll: 'בטל נעיצת הכל',
|
94
|
+
};
|
@@ -106,8 +106,8 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
|
|
106
106
|
outline: isDragging
|
107
107
|
? `2px dashed ${theme.palette.grey[500]}`
|
108
108
|
: hoveredColumn?.id === column.id
|
109
|
-
|
110
|
-
|
109
|
+
? `2px dashed ${getMRTTheme(table, theme).draggingBorderColor}`
|
110
|
+
: 'none',
|
111
111
|
outlineOffset: '-2px',
|
112
112
|
pl: `${(column.depth + 0.5) * 2}rem`,
|
113
113
|
py: '6px',
|
package/src/style.utils.ts
CHANGED
@@ -83,8 +83,8 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
|
|
83
83
|
boxShadow: getIsLastLeftPinnedColumn(table, column)
|
84
84
|
? `-4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
|
85
85
|
: getIsFirstRightPinnedColumn(column)
|
86
|
-
|
87
|
-
|
86
|
+
? `4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
|
87
|
+
: undefined,
|
88
88
|
display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
|
89
89
|
left:
|
90
90
|
column.getIsPinned() === 'left'
|
@@ -14,6 +14,7 @@ const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
|
|
14
14
|
interface Props<TData extends MRT_RowData>
|
15
15
|
extends Partial<
|
16
16
|
PaginationProps & {
|
17
|
+
disabled?: boolean;
|
17
18
|
rowsPerPageOptions?: { label: string; value: number }[] | number[];
|
18
19
|
showRowsPerPage?: boolean;
|
19
20
|
}
|
@@ -61,6 +62,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
|
|
61
62
|
|
62
63
|
const {
|
63
64
|
SelectProps,
|
65
|
+
disabled = false,
|
64
66
|
rowsPerPageOptions = defaultRowsPerPage,
|
65
67
|
showFirstButton = showFirstLastPageButtons,
|
66
68
|
showLastButton = showFirstLastPageButtons,
|
@@ -97,6 +99,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
|
|
97
99
|
</InputLabel>
|
98
100
|
<Select
|
99
101
|
disableUnderline
|
102
|
+
disabled={disabled}
|
100
103
|
id="mrt-rows-per-page"
|
101
104
|
inputProps={{ 'aria-label': localization.rowsPerPage }}
|
102
105
|
label={localization.rowsPerPage}
|
@@ -129,6 +132,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
|
|
129
132
|
{paginationDisplayMode === 'pages' ? (
|
130
133
|
<Pagination
|
131
134
|
count={numberOfPages}
|
135
|
+
disabled={disabled}
|
132
136
|
onChange={(_e, newPageIndex) => setPageIndex(newPageIndex - 1)}
|
133
137
|
page={pageIndex + 1}
|
134
138
|
renderItem={(item) => (
|
@@ -162,7 +166,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
|
|
162
166
|
{showFirstButton && (
|
163
167
|
<IconButton
|
164
168
|
aria-label={localization.goToFirstPage}
|
165
|
-
disabled={pageIndex <= 0}
|
169
|
+
disabled={pageIndex <= 0 || disabled}
|
166
170
|
onClick={() => setPageIndex(0)}
|
167
171
|
size="small"
|
168
172
|
>
|
@@ -171,7 +175,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
|
|
171
175
|
)}
|
172
176
|
<IconButton
|
173
177
|
aria-label={localization.goToPreviousPage}
|
174
|
-
disabled={pageIndex <= 0}
|
178
|
+
disabled={pageIndex <= 0 || disabled}
|
175
179
|
onClick={() => setPageIndex(pageIndex - 1)}
|
176
180
|
size="small"
|
177
181
|
>
|
@@ -179,7 +183,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
|
|
179
183
|
</IconButton>
|
180
184
|
<IconButton
|
181
185
|
aria-label={localization.goToNextPage}
|
182
|
-
disabled={lastRowIndex >= totalRowCount}
|
186
|
+
disabled={lastRowIndex >= totalRowCount || disabled}
|
183
187
|
onClick={() => setPageIndex(pageIndex + 1)}
|
184
188
|
size="small"
|
185
189
|
>
|
@@ -188,7 +192,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
|
|
188
192
|
{showLastButton && (
|
189
193
|
<IconButton
|
190
194
|
aria-label={localization.goToLastPage}
|
191
|
-
disabled={lastRowIndex >= totalRowCount}
|
195
|
+
disabled={lastRowIndex >= totalRowCount || disabled}
|
192
196
|
onClick={() => setPageIndex(numberOfPages - 1)}
|
193
197
|
size="small"
|
194
198
|
>
|
@@ -100,8 +100,8 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
|
|
100
100
|
mb: stackAlertBanner
|
101
101
|
? 0
|
102
102
|
: positionToolbarAlertBanner === 'bottom'
|
103
|
-
|
104
|
-
|
103
|
+
? '-1rem'
|
104
|
+
: undefined,
|
105
105
|
p: 0,
|
106
106
|
position: 'relative',
|
107
107
|
right: 0,
|
@@ -124,10 +124,10 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
|
|
124
124
|
positionToolbarAlertBanner !== 'head-overlay'
|
125
125
|
? '0.5rem 1rem'
|
126
126
|
: density === 'spacious'
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
127
|
+
? '0.75rem 1.25rem'
|
128
|
+
: density === 'comfortable'
|
129
|
+
? '0.5rem 0.75rem'
|
130
|
+
: '0.25rem 0.5rem',
|
131
131
|
}}
|
132
132
|
>
|
133
133
|
{alertProps?.children}
|
package/src/types.ts
CHANGED
@@ -113,8 +113,8 @@ export type MRT_ColumnHelper<TData extends MRT_RowData> = {
|
|
113
113
|
TValue extends TAccessor extends AccessorFn<TData, infer TReturn>
|
114
114
|
? TReturn
|
115
115
|
: TAccessor extends DeepKeys<TData>
|
116
|
-
|
117
|
-
|
116
|
+
? DeepValue<TData, TAccessor>
|
117
|
+
: never,
|
118
118
|
>(
|
119
119
|
accessor: TAccessor,
|
120
120
|
column: MRT_DisplayColumnDef<TData, TValue>,
|