material-react-table 0.26.6 → 0.27.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +7 -8
- package/dist/MaterialReactTable.d.ts +3 -3
- package/dist/material-react-table.cjs.development.js +19 -18
- package/dist/material-react-table.cjs.development.js.map +1 -1
- package/dist/material-react-table.cjs.production.min.js +1 -1
- package/dist/material-react-table.cjs.production.min.js.map +1 -1
- package/dist/material-react-table.esm.js +19 -18
- package/dist/material-react-table.esm.js.map +1 -1
- package/package.json +3 -3
- package/src/MaterialReactTable.tsx +5 -5
- package/src/body/MRT_TableBodyCell.tsx +7 -1
- package/src/buttons/MRT_ExpandAllButton.tsx +1 -0
- package/src/head/MRT_TableHeadCell.tsx +2 -4
- package/src/inputs/MRT_FilterTextField.tsx +2 -3
- package/src/inputs/MRT_SelectCheckbox.tsx +3 -3
- package/src/menus/MRT_ColumnActionMenu.tsx +2 -2
- package/src/menus/MRT_FilterOptionMenu.tsx +2 -2
package/README.md
CHANGED
@@ -1,18 +1,18 @@
|
|
1
1
|
# Material React Table
|
2
2
|
|
3
|
-
<a href="https://npmjs.com/package/material-react-table" target="
|
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" />
|
5
5
|
</a>
|
6
|
-
<a href="https://npmjs.com/package/material-react-table" target="
|
6
|
+
<a href="https://npmjs.com/package/material-react-table" target="_blank">
|
7
7
|
<img alt="" src="https://img.shields.io/npm/dm/material-react-table.svg" />
|
8
8
|
</a>
|
9
|
-
<a href="https://bundlephobia.com/result?p=material-react-table" target="
|
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" />
|
11
11
|
</a>
|
12
|
-
<a href="https://github.com/KevinVandy/material-react-table" target="
|
12
|
+
<a href="https://github.com/KevinVandy/material-react-table" target="_blank">
|
13
13
|
<img alt="" src="https://img.shields.io/github/stars/KevinVandy/material-react-table.svg?style=social&label=Star" />
|
14
14
|
</a>
|
15
|
-
<a href="http://makeapullrequest.com" target="
|
15
|
+
<a href="http://makeapullrequest.com" target="_blank">
|
16
16
|
<img alt="" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" />
|
17
17
|
</a>
|
18
18
|
|
@@ -40,6 +40,7 @@ See all [Props and Options](https://www.material-react-table.com/docs/api)
|
|
40
40
|
- [Basic Table](https://www.material-react-table.com/docs/examples/basic/) (See Default Features)
|
41
41
|
- [Minimal Table](https://www.material-react-table.com/docs/examples/minimal/) (Turn off Features)
|
42
42
|
- [Advanced Table](https://www.material-react-table.com/docs/examples/advanced/) (See some of the Advanced Features)
|
43
|
+
- [Data Export Table](https://www.material-react-table.com/docs/examples/data-export/) (Export to CSV, Excel, etc.)
|
43
44
|
- [Remote Data](https://www.material-react-table.com/docs/examples/remote/) (Server-side Pagination, Sorting, and Filtering)
|
44
45
|
- [React Query](https://www.material-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering)
|
45
46
|
- [Virtualized Rows](https://www.material-react-table.com/docs/examples/virtualized/) (20,000 rows at once!)
|
@@ -52,7 +53,7 @@ View additional [storybook examples](https://www.material-react-table.dev/)
|
|
52
53
|
|
53
54
|
_All features can easily be enabled/disabled_
|
54
55
|
|
55
|
-
- [x] <
|
56
|
+
- [x] < 36kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
|
56
57
|
- [x] Advanced TypeScript Generics Support (TypeScript Optional)
|
57
58
|
- [x] Click To Copy Cell Values
|
58
59
|
- [x] Column Action Dropdown Menu
|
@@ -134,8 +135,6 @@ export default function App() {
|
|
134
135
|
[],
|
135
136
|
);
|
136
137
|
|
137
|
-
//simple data example
|
138
|
-
//Check out https://www.material-react-table.com/docs/examples/remote for a more realistic example
|
139
138
|
const data = useMemo(
|
140
139
|
() => [
|
141
140
|
{
|
@@ -69,7 +69,7 @@ export declare type MRT_TableState<TData extends Record<string, any> = {}> = Tab
|
|
69
69
|
showProgressBars: boolean;
|
70
70
|
showSkeletons: boolean;
|
71
71
|
};
|
72
|
-
export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TData>, 'accessorFn' | 'accessorKey' | 'aggregatedCell' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
|
72
|
+
export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TData, unknown>, 'accessorFn' | 'accessorKey' | 'aggregatedCell' | 'cell' | 'columns' | 'filterFn' | 'footer' | 'header' | 'id' | 'sortingFn'> & {
|
73
73
|
AggregatedCell?: ({ cell, table, }: {
|
74
74
|
cell: MRT_Cell<TData>;
|
75
75
|
table: MRT_TableInstance<TData>;
|
@@ -117,6 +117,7 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
|
|
117
117
|
* @example columnDefType: 'display'
|
118
118
|
*/
|
119
119
|
columnDefType?: 'data' | 'display' | 'group';
|
120
|
+
columnFilterModeOptions?: MRT_FilterOption[] | null;
|
120
121
|
columns?: MRT_ColumnDef<TData>[];
|
121
122
|
enableClickToCopy?: boolean;
|
122
123
|
enableColumnActions?: boolean;
|
@@ -124,7 +125,6 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
|
|
124
125
|
enableColumnFilterChangeMode?: boolean;
|
125
126
|
enableColumnOrdering?: boolean;
|
126
127
|
enableEditing?: boolean;
|
127
|
-
enabledColumnFilterOptions?: MRT_FilterOption[] | null;
|
128
128
|
filterFn?: MRT_FilterFn<TData>;
|
129
129
|
filterSelectOptions?: (string | {
|
130
130
|
text: string;
|
@@ -236,6 +236,7 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
236
236
|
displayColumnDefOptions?: Partial<{
|
237
237
|
[key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
|
238
238
|
}>;
|
239
|
+
columnFilterModeOptions?: (MRT_FilterOption | string)[] | null;
|
239
240
|
columns: MRT_ColumnDef<TData>[];
|
240
241
|
data: TData[];
|
241
242
|
editingMode?: 'table' | 'row' | 'cell';
|
@@ -263,7 +264,6 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
|
|
263
264
|
enableToolbarBottom?: boolean;
|
264
265
|
enableToolbarInternalActions?: boolean;
|
265
266
|
enableToolbarTop?: boolean;
|
266
|
-
enabledColumnFilterOptions?: (MRT_FilterOption | string)[] | null;
|
267
267
|
enabledGlobalFilterOptions?: (MRT_FilterOption | string)[] | null;
|
268
268
|
expandRowsFn?: (dataRow: TData) => TData[];
|
269
269
|
icons?: Partial<MRT_Icons>;
|
@@ -182,7 +182,8 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
|
|
182
182
|
}, iconButtonProps, {
|
183
183
|
sx: _extends({
|
184
184
|
height: density === 'compact' ? '1.75rem' : '2.25rem',
|
185
|
-
width: density === 'compact' ? '1.75rem' : '2.25rem'
|
185
|
+
width: density === 'compact' ? '1.75rem' : '2.25rem',
|
186
|
+
mt: density !== 'compact' ? '-0.25rem' : undefined
|
186
187
|
}, iconButtonProps == null ? void 0 : iconButtonProps.sx)
|
187
188
|
}), React__default.createElement(KeyboardDoubleArrowDownIcon, {
|
188
189
|
style: {
|
@@ -239,7 +240,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
|
|
239
240
|
};
|
240
241
|
|
241
242
|
var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
|
242
|
-
var _columnDef$
|
243
|
+
var _columnDef$columnFilt;
|
243
244
|
|
244
245
|
var anchorEl = _ref.anchorEl,
|
245
246
|
header = _ref.header,
|
@@ -249,7 +250,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
|
|
249
250
|
var getState = table.getState,
|
250
251
|
_table$options = table.options,
|
251
252
|
enabledGlobalFilterOptions = _table$options.enabledGlobalFilterOptions,
|
252
|
-
|
253
|
+
columnFilterModeOptions = _table$options.columnFilterModeOptions,
|
253
254
|
localization = _table$options.localization,
|
254
255
|
setCurrentFilterFns = table.setCurrentFilterFns,
|
255
256
|
setCurrentGlobalFilterFn = table.setCurrentGlobalFilterFn;
|
@@ -265,7 +266,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
|
|
265
266
|
var _ref3 = column != null ? column : {},
|
266
267
|
columnDef = _ref3.columnDef;
|
267
268
|
|
268
|
-
var allowedColumnFilterOptions = (_columnDef$
|
269
|
+
var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
|
269
270
|
var filterOptions = React.useMemo(function () {
|
270
271
|
return [{
|
271
272
|
option: 'fuzzy',
|
@@ -987,7 +988,7 @@ var commonListItemStyles = {
|
|
987
988
|
alignItems: 'center'
|
988
989
|
};
|
989
990
|
var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
990
|
-
var _columnDef$
|
991
|
+
var _columnDef$columnFilt, _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _localization$showAll;
|
991
992
|
|
992
993
|
var anchorEl = _ref.anchorEl,
|
993
994
|
header = _ref.header,
|
@@ -1004,7 +1005,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1004
1005
|
enableHiding = _table$options.enableHiding,
|
1005
1006
|
enablePinning = _table$options.enablePinning,
|
1006
1007
|
enableSorting = _table$options.enableSorting,
|
1007
|
-
|
1008
|
+
columnFilterModeOptions = _table$options.columnFilterModeOptions,
|
1008
1009
|
_table$options$icons = _table$options.icons,
|
1009
1010
|
ArrowRightIcon = _table$options$icons.ArrowRightIcon,
|
1010
1011
|
ClearAllIcon = _table$options$icons.ClearAllIcon,
|
@@ -1105,7 +1106,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
|
|
1105
1106
|
};
|
1106
1107
|
|
1107
1108
|
var isSelectFilter = !!columnDef.filterSelectOptions;
|
1108
|
-
var allowedColumnFilterOptions = (_columnDef$
|
1109
|
+
var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
|
1109
1110
|
var showFilterModeSubMenu = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
|
1110
1111
|
return React__default.createElement(material.Menu, {
|
1111
1112
|
anchorEl: anchorEl,
|
@@ -1452,9 +1453,9 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
|
|
1452
1453
|
}, checkboxProps, {
|
1453
1454
|
sx: function sx(theme) {
|
1454
1455
|
return _extends({
|
1455
|
-
height: density === 'compact' ? '1.
|
1456
|
-
width: density === 'compact' ? '1.
|
1457
|
-
m: '-
|
1456
|
+
height: density === 'compact' ? '1.75rem' : '2.5rem',
|
1457
|
+
width: density === 'compact' ? '1.75rem' : '2.5rem',
|
1458
|
+
m: density !== 'compact' ? '-0.4rem' : undefined
|
1458
1459
|
}, (checkboxProps == null ? void 0 : checkboxProps.sx) instanceof Function ? checkboxProps.sx(theme) : checkboxProps == null ? void 0 : checkboxProps.sx);
|
1459
1460
|
}
|
1460
1461
|
})));
|
@@ -2120,7 +2121,7 @@ var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActio
|
|
2120
2121
|
};
|
2121
2122
|
|
2122
2123
|
var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
2123
|
-
var _currentFilterOption$, _localization$filterB, _columnDef$
|
2124
|
+
var _currentFilterOption$, _localization$filterB, _columnDef$columnFilt, _currentFilterOption$2, _localization$clearFi, _columnDef$filterSele;
|
2124
2125
|
|
2125
2126
|
var header = _ref.header,
|
2126
2127
|
inputIndex = _ref.inputIndex,
|
@@ -2128,7 +2129,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
2128
2129
|
var getState = table.getState,
|
2129
2130
|
_table$options = table.options,
|
2130
2131
|
enableColumnFilterChangeMode = _table$options.enableColumnFilterChangeMode,
|
2131
|
-
|
2132
|
+
columnFilterModeOptions = _table$options.columnFilterModeOptions,
|
2132
2133
|
_table$options$icons = _table$options.icons,
|
2133
2134
|
FilterListIcon = _table$options$icons.FilterListIcon,
|
2134
2135
|
CloseIcon = _table$options$icons.CloseIcon,
|
@@ -2225,7 +2226,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
2225
2226
|
var filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption) ? //@ts-ignore
|
2226
2227
|
localization["filter" + ((currentFilterOption == null ? void 0 : (_currentFilterOption$ = currentFilterOption.charAt(0)) == null ? void 0 : _currentFilterOption$.toUpperCase()) + (currentFilterOption == null ? void 0 : currentFilterOption.slice(1)))] : '';
|
2227
2228
|
var filterPlaceholder = inputIndex === undefined ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header)) : inputIndex === 0 ? localization.min : inputIndex === 1 ? localization.max : '';
|
2228
|
-
var allowedColumnFilterOptions = (_columnDef$
|
2229
|
+
var allowedColumnFilterOptions = (_columnDef$columnFilt = columnDef == null ? void 0 : columnDef.columnFilterModeOptions) != null ? _columnDef$columnFilt : columnFilterModeOptions;
|
2229
2230
|
var showChangeModeButton = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && !inputIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
|
2230
2231
|
return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TextField, Object.assign({
|
2231
2232
|
fullWidth: true,
|
@@ -2297,7 +2298,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
|
|
2297
2298
|
}, textFieldProps, {
|
2298
2299
|
sx: function sx(theme) {
|
2299
2300
|
return _extends({
|
2300
|
-
m: '-0.25rem',
|
2301
2301
|
p: 0,
|
2302
2302
|
minWidth: !filterChipLabel ? '8rem' : 'auto',
|
2303
2303
|
width: 'calc(100% + 0.5rem)',
|
@@ -2630,7 +2630,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
|
|
2630
2630
|
left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
|
2631
2631
|
overflow: 'visible',
|
2632
2632
|
opacity: (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id || (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? 0.5 : 1,
|
2633
|
-
p: density === 'compact' ?
|
2633
|
+
p: density === 'compact' ? '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
|
2634
2634
|
pb: columnDefType === 'display' ? 0 : undefined,
|
2635
2635
|
position: column.getIsPinned() && columnDefType !== 'group' ? 'sticky' : undefined,
|
2636
2636
|
pt: columnDefType === 'group' ? 0 : density === 'compact' ? '0.25' : density === 'comfortable' ? '.75rem' : '1.25rem',
|
@@ -2931,6 +2931,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
2931
2931
|
enableClickToCopy = _table$options.enableClickToCopy,
|
2932
2932
|
enableColumnOrdering = _table$options.enableColumnOrdering,
|
2933
2933
|
enableEditing = _table$options.enableEditing,
|
2934
|
+
enablePagination = _table$options.enablePagination,
|
2934
2935
|
enableRowNumbers = _table$options.enableRowNumbers,
|
2935
2936
|
muiTableBodyCellProps = _table$options.muiTableBodyCellProps,
|
2936
2937
|
muiTableBodyCellSkeletonProps = _table$options.muiTableBodyCellSkeletonProps,
|
@@ -3005,7 +3006,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
|
|
3005
3006
|
var draggingBorders = draggingBorder ? {
|
3006
3007
|
borderLeft: draggingBorder,
|
3007
3008
|
borderRight: draggingBorder,
|
3008
|
-
borderBottom: row.index === table.getRowModel().rows.length - 1 ? draggingBorder : undefined
|
3009
|
+
borderBottom: row.index === (enablePagination ? table.getRowModel() : table.getPrePaginationRowModel()).rows.length - 1 ? draggingBorder : undefined
|
3009
3010
|
} : undefined;
|
3010
3011
|
return React__default.createElement(material.TableCell, Object.assign({
|
3011
3012
|
onDoubleClick: handleDoubleClick,
|
@@ -3733,7 +3734,7 @@ var MaterialReactTable = (function (_ref) {
|
|
3733
3734
|
_ref$enableColumnActi = _ref.enableColumnActions,
|
3734
3735
|
enableColumnActions = _ref$enableColumnActi === void 0 ? true : _ref$enableColumnActi,
|
3735
3736
|
_ref$enableColumnFilt = _ref.enableColumnFilterChangeMode,
|
3736
|
-
enableColumnFilterChangeMode = _ref$enableColumnFilt === void 0 ?
|
3737
|
+
enableColumnFilterChangeMode = _ref$enableColumnFilt === void 0 ? false : _ref$enableColumnFilt,
|
3737
3738
|
_ref$enableColumnFilt2 = _ref.enableColumnFilters,
|
3738
3739
|
enableColumnFilters = _ref$enableColumnFilt2 === void 0 ? true : _ref$enableColumnFilt2,
|
3739
3740
|
_ref$enableColumnOrde = _ref.enableColumnOrdering,
|
@@ -3751,7 +3752,7 @@ var MaterialReactTable = (function (_ref) {
|
|
3751
3752
|
_ref$enableGlobalFilt = _ref.enableGlobalFilter,
|
3752
3753
|
enableGlobalFilter = _ref$enableGlobalFilt === void 0 ? true : _ref$enableGlobalFilt,
|
3753
3754
|
_ref$enableGlobalFilt2 = _ref.enableGlobalFilterChangeMode,
|
3754
|
-
enableGlobalFilterChangeMode = _ref$enableGlobalFilt2 === void 0 ?
|
3755
|
+
enableGlobalFilterChangeMode = _ref$enableGlobalFilt2 === void 0 ? false : _ref$enableGlobalFilt2,
|
3755
3756
|
_ref$enableGlobalFilt3 = _ref.enableGlobalFilterRankedResults,
|
3756
3757
|
enableGlobalFilterRankedResults = _ref$enableGlobalFilt3 === void 0 ? true : _ref$enableGlobalFilt3,
|
3757
3758
|
_ref$enableGrouping = _ref.enableGrouping,
|