material-react-table 0.40.5 → 0.40.8
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/cjs/MaterialReactTable.d.ts +2 -2
- package/dist/cjs/index.js +17 -9
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/MaterialReactTable.d.ts +2 -2
- package/dist/esm/material-react-table.esm.js +18 -10
- package/dist/esm/material-react-table.esm.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/package.json +4 -4
- package/src/MaterialReactTable.tsx +2 -2
- package/src/body/MRT_TableBody.tsx +4 -1
- package/src/head/MRT_TableHeadCellFilterLabel.tsx +1 -3
- package/src/inputs/MRT_EditCellTextField.tsx +1 -6
- package/src/inputs/MRT_FilterTextField.tsx +11 -3
- package/src/menus/MRT_FilterOptionMenu.tsx +3 -3
- package/src/table/MRT_TableRoot.tsx +1 -0
|
@@ -130,7 +130,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
|
|
|
130
130
|
*
|
|
131
131
|
* @example accessorFn: (row) => row.username
|
|
132
132
|
*/
|
|
133
|
-
accessorFn?: (
|
|
133
|
+
accessorFn?: (originalRow: TData) => any;
|
|
134
134
|
/**
|
|
135
135
|
* Either an `accessorKey` or a combination of an `accessorFn` and `id` are required for a data column definition.
|
|
136
136
|
* Specify which key in the row this column should use to access the correct data.
|
|
@@ -311,7 +311,7 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
|
311
311
|
enableTableHead?: boolean;
|
|
312
312
|
enableToolbarInternalActions?: boolean;
|
|
313
313
|
enableTopToolbar?: boolean;
|
|
314
|
-
|
|
314
|
+
globalFilterModeOptions?: (MRT_FilterOption | string)[] | null;
|
|
315
315
|
expandRowsFn?: (dataRow: TData) => TData[];
|
|
316
316
|
icons?: Partial<MRT_Icons>;
|
|
317
317
|
initialState?: Partial<MRT_TableState<TData>>;
|
package/dist/cjs/index.js
CHANGED
|
@@ -391,7 +391,7 @@ const mrtFilterOptions = (localization) => [
|
|
|
391
391
|
];
|
|
392
392
|
const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table, }) => {
|
|
393
393
|
var _a, _b, _c, _d;
|
|
394
|
-
const { getState, options: {
|
|
394
|
+
const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
|
|
395
395
|
const { globalFilterFn, density } = getState();
|
|
396
396
|
const { column } = header !== null && header !== void 0 ? header : {};
|
|
397
397
|
const { columnDef } = column !== null && column !== void 0 ? column : {};
|
|
@@ -399,8 +399,8 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table,
|
|
|
399
399
|
const internalFilterOptions = React.useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef
|
|
400
400
|
? allowedColumnFilterOptions === undefined ||
|
|
401
401
|
(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.includes(filterOption.option))
|
|
402
|
-
: (!
|
|
403
|
-
|
|
402
|
+
: (!globalFilterModeOptions ||
|
|
403
|
+
globalFilterModeOptions.includes(filterOption.option)) &&
|
|
404
404
|
['fuzzy', 'contains', 'startsWith'].includes(filterOption.option)), []);
|
|
405
405
|
const handleSelectFilterMode = (option) => {
|
|
406
406
|
if (header && column) {
|
|
@@ -1511,9 +1511,14 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
|
|
|
1511
1511
|
value = option.value;
|
|
1512
1512
|
text = option.text;
|
|
1513
1513
|
}
|
|
1514
|
-
return (React__default["default"].createElement(material.MenuItem, { key: value,
|
|
1514
|
+
return (React__default["default"].createElement(material.MenuItem, { key: value, sx: {
|
|
1515
|
+
display: 'flex',
|
|
1516
|
+
m: 0,
|
|
1517
|
+
alignItems: 'center',
|
|
1518
|
+
gap: '0.5rem',
|
|
1519
|
+
}, value: value },
|
|
1515
1520
|
isMultiSelectFilter && (React__default["default"].createElement(material.Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })),
|
|
1516
|
-
|
|
1521
|
+
text));
|
|
1517
1522
|
})),
|
|
1518
1523
|
React__default["default"].createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table })));
|
|
1519
1524
|
};
|
|
@@ -1534,8 +1539,7 @@ const MRT_TableHeadCellFilterContainer = ({ header, table, }) => {
|
|
|
1534
1539
|
|
|
1535
1540
|
const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
|
|
1536
1541
|
var _a, _b, _c;
|
|
1537
|
-
const {
|
|
1538
|
-
const { columnFilterFns } = getState();
|
|
1542
|
+
const { options: { icons: { FilterAltIcon }, localization, }, } = table;
|
|
1539
1543
|
const { column } = header;
|
|
1540
1544
|
const { columnDef } = column;
|
|
1541
1545
|
const isRangeFilter = [
|
|
@@ -1543,7 +1547,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
|
|
|
1543
1547
|
'betweenInclusive',
|
|
1544
1548
|
'inNumberRange',
|
|
1545
1549
|
].includes(columnDef._filterFn);
|
|
1546
|
-
const currentFilterOption =
|
|
1550
|
+
const currentFilterOption = columnDef._filterFn;
|
|
1547
1551
|
const filterTooltip = localization.filteringByColumn
|
|
1548
1552
|
.replace('{column}', String(columnDef.header))
|
|
1549
1553
|
.replace('{filterType}',
|
|
@@ -2158,7 +2162,8 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
|
|
|
2158
2162
|
!Object.values(sorting).some(Boolean)) {
|
|
2159
2163
|
const rankedRows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
|
|
2160
2164
|
if (enablePagination) {
|
|
2161
|
-
|
|
2165
|
+
const start = pagination.pageIndex * pagination.pageSize;
|
|
2166
|
+
return rankedRows.slice(start, start + pagination.pageSize);
|
|
2162
2167
|
}
|
|
2163
2168
|
return rankedRows;
|
|
2164
2169
|
}
|
|
@@ -2171,6 +2176,8 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
|
|
|
2171
2176
|
? getPrePaginationRowModel().rows
|
|
2172
2177
|
: getRowModel().rows,
|
|
2173
2178
|
globalFilter,
|
|
2179
|
+
pagination.pageIndex,
|
|
2180
|
+
pagination.pageSize,
|
|
2174
2181
|
]);
|
|
2175
2182
|
const virtualizer = enableRowVirtualization
|
|
2176
2183
|
? reactVirtual.useVirtual(Object.assign({ size: rows.length, parentRef: tableContainerRef, overscan: 15 }, vProps))
|
|
@@ -2427,6 +2434,7 @@ const MRT_TableRoot = (props) => {
|
|
|
2427
2434
|
props.displayColumnDefOptions,
|
|
2428
2435
|
props.editingMode,
|
|
2429
2436
|
props.enableColumnDragging,
|
|
2437
|
+
props.enableColumnFilterModes,
|
|
2430
2438
|
props.enableColumnOrdering,
|
|
2431
2439
|
props.enableEditing,
|
|
2432
2440
|
props.enableExpandAll,
|