@prt-ts/fluent-react-table-v2 9.36.0-build.3.0 → 9.40.0-build.2.0
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/index.js +202 -116
- package/package.json +2 -2
- package/src/lib/components/filters/Filter.d.ts +2 -2
- package/src/lib/components/filters/FilterDrawer.d.ts +9 -0
- package/src/lib/components/filters/FilterMultiSelectCheckbox.d.ts +2 -2
- package/src/lib/components/filters/index.d.ts +1 -0
- package/src/lib/components/grid-header/GridHeader.d.ts +2 -0
- package/src/lib/components/table/Table.d.ts +3 -3
- package/src/lib/components/{thead/useGridContainer.d.ts → useGridContainer.d.ts} +2 -2
package/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { jsx, jsxs
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { useMemo } from 'react';
|
|
4
4
|
import { useDrop, useDrag, DndProvider } from 'react-dnd';
|
|
5
5
|
import { HTML5Backend } from 'react-dnd-html5-backend';
|
|
6
|
-
import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Popover, PopoverTrigger, PopoverSurface, MenuGroupHeader, Checkbox, Divider, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, RadioGroup, Radio, MenuButton, MenuGroup, MenuDivider, mergeClasses, Skeleton, SkeletonItem, Subtitle2Stronger } from '@fluentui/react-components';
|
|
7
|
-
import { PreviousRegular, ArrowPreviousFilled, ArrowNextFilled, NextRegular, bundleIcon, SaveFilled, SaveRegular, TableSimpleCheckmarkFilled, TableSimpleCheckmarkRegular, SearchFilled, SearchRegular, FilterFilled, FilterRegular, CodeTextOff16Filled, CodeTextOff16Regular, ColumnEditFilled, ColumnEditRegular, GroupFilled, GroupRegular, ChevronRightFilled, ChevronRightRegular, ChevronDownRegular, ChevronDownFilled, DragFilled, DragRegular, Search24Regular, ArrowSortDown20Filled, ArrowSortDown20Regular, ArrowSortUp20Filled, ArrowSortUp20Regular, GroupListRegular, PinRegular, TextSortAscendingFilled, TextSortDescendingFilled, GroupDismissFilled, ArrowStepInLeftRegular, ArrowStepInRightRegular, PinOffRegular, DocumentSearch24Regular } from '@fluentui/react-icons';
|
|
6
|
+
import { makeStaticStyles, makeStyles, shorthands, tokens, useId, Dropdown, Option, Input, Button, Popover, PopoverTrigger, PopoverSurface, MenuGroupHeader, Checkbox, Divider, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, RadioGroup, Radio, InlineDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, Caption1Stronger, MenuButton, MenuGroup, MenuDivider, mergeClasses, Skeleton, SkeletonItem, Subtitle2Stronger } from '@fluentui/react-components';
|
|
7
|
+
import { PreviousRegular, ArrowPreviousFilled, ArrowNextFilled, NextRegular, bundleIcon, SaveFilled, SaveRegular, TableSimpleCheckmarkFilled, TableSimpleCheckmarkRegular, SearchFilled, SearchRegular, FilterFilled, FilterRegular, CodeTextOff16Filled, CodeTextOff16Regular, ColumnEditFilled, ColumnEditRegular, GroupFilled, GroupRegular, ChevronRightFilled, ChevronRightRegular, ChevronDownRegular, ChevronDownFilled, DragFilled, DragRegular, TextGrammarDismissRegular, Search24Regular, FilterDismissFilled, Dismiss24Regular, ArrowSortDown20Filled, ArrowSortDown20Regular, ArrowSortUp20Filled, ArrowSortUp20Regular, GroupListRegular, PinRegular, TextSortAscendingFilled, TextSortDescendingFilled, GroupDismissFilled, ArrowStepInLeftRegular, ArrowStepInRightRegular, PinOffRegular, DocumentSearch24Regular } from '@fluentui/react-icons';
|
|
8
8
|
import { useReactTable, getCoreRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getGroupedRowModel, getExpandedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, flexRender } from '@tanstack/react-table';
|
|
9
9
|
export { createColumnHelper } from '@tanstack/react-table';
|
|
10
10
|
import { useVirtual } from 'react-virtual';
|
|
@@ -162,9 +162,8 @@ const useGridHeaderStyles = makeStyles({
|
|
|
162
162
|
const GridHeader = (props) => {
|
|
163
163
|
const { table, gridTitle, globalFilter, setGlobalFilter } = props;
|
|
164
164
|
const styles = useGridHeaderStyles();
|
|
165
|
-
const allLeafColumns = table.getAllLeafColumns() || [];
|
|
166
165
|
const resetAllFilters = React.useCallback(() => {
|
|
167
|
-
table.setGlobalFilter(
|
|
166
|
+
table.setGlobalFilter('');
|
|
168
167
|
table.resetColumnFilters();
|
|
169
168
|
}, [table]);
|
|
170
169
|
const resetAllGrouping = React.useCallback(() => {
|
|
@@ -173,23 +172,27 @@ const GridHeader = (props) => {
|
|
|
173
172
|
const clearAllSelection = React.useCallback(() => {
|
|
174
173
|
table.toggleAllRowsSelected(false);
|
|
175
174
|
}, [table]);
|
|
176
|
-
return (jsxs("div", Object.assign({ className: styles.tableTopHeaderContainer }, { children: [jsx("div", Object.assign({ className: styles.tableTopHeaderLeft }, { children: gridTitle })), jsxs("div", Object.assign({ className: styles.tableTopHeaderRight }, { children: [jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Button, { icon: jsx(ToggleGroupColumnIcon, {}), "aria-label":
|
|
177
|
-
if (column.id ===
|
|
175
|
+
return (jsxs("div", Object.assign({ className: styles.tableTopHeaderContainer }, { children: [jsx("div", Object.assign({ className: styles.tableTopHeaderLeft }, { children: gridTitle })), jsxs("div", Object.assign({ className: styles.tableTopHeaderRight }, { children: [jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Button, { icon: jsx(ToggleGroupColumnIcon, {}), "aria-label": "Toggle Group Column" }) })), jsx(PopoverSurface, { children: jsxs("div", Object.assign({ className: styles.tableTopHeaderColumnTogglePopover }, { children: [jsx(MenuGroupHeader, { children: "Group Columns" }), table.getAllLeafColumns().map((column) => {
|
|
176
|
+
if (column.id === 'select')
|
|
178
177
|
return null;
|
|
179
|
-
if (column.id ===
|
|
178
|
+
if (column.id === 'id')
|
|
180
179
|
return null;
|
|
181
|
-
return (jsx(Checkbox, { checked: column.getIsGrouped(), onChange: column.getToggleGroupingHandler(), disabled: !column.getCanGroup(), label: column.id }, column.id));
|
|
182
|
-
})] })) })] })), jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Button, { icon: jsx(ToggleSelectColumnIcon, {}), "aria-label":
|
|
183
|
-
if (column.id ===
|
|
180
|
+
return (jsx(Checkbox, { checked: column.getIsGrouped(), onChange: column.getToggleGroupingHandler(), disabled: !column.getCanGroup(), label: jsx("span", { children: column.id }) }, column.id));
|
|
181
|
+
})] })) })] })), jsxs(Popover, Object.assign({ withArrow: true }, { children: [jsx(PopoverTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Button, { icon: jsx(ToggleSelectColumnIcon, {}), "aria-label": "Toggle Column Visibility" }) })), jsx(PopoverSurface, { children: jsxs("div", Object.assign({ className: styles.tableTopHeaderColumnTogglePopover }, { children: [jsx(MenuGroupHeader, { children: "Toggle Columns" }), jsx(Checkbox, { checked: table.getIsAllColumnsVisible(), onChange: table.getToggleAllColumnsVisibilityHandler(), label: 'Toggle All' }), jsx(Divider, {}), table.getAllLeafColumns().map((column) => {
|
|
182
|
+
if (column.id === 'select')
|
|
184
183
|
return null;
|
|
185
|
-
if (column.id ===
|
|
184
|
+
if (column.id === 'id')
|
|
186
185
|
return null;
|
|
187
186
|
return (jsx(Checkbox, { checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), label: column.id, disabled: !column.getCanHide() }, column.id));
|
|
188
|
-
})] })) })] })),
|
|
187
|
+
})] })) })] })), jsxs(Menu, { children: [jsx(MenuTrigger, Object.assign({ disableButtonEnhancement: true }, { children: jsx(Button
|
|
188
|
+
// appearance="subtle"
|
|
189
|
+
, {
|
|
190
|
+
// appearance="subtle"
|
|
191
|
+
icon: jsx(TextGrammarDismissRegular, {}), "aria-label": "View Menu" }) })), jsx(MenuPopover, { children: jsxs(MenuList, { children: [jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetAllFilters }, { children: "Clear All Filters" })), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: resetAllGrouping }, { children: "Clear All Grouping" })), jsx(MenuItem, Object.assign({ icon: jsx(ClearFilterIcon, {}), onClick: clearAllSelection }, { children: "Clear All Selection" }))] }) })] }), jsx(DebouncedInput, { value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : '', onChange: (value) => setGlobalFilter(String(value)), className: "p-2 font-lg shadow border border-block", placeholder: "Search all columns...", openFilterDrawer: props.openFilterDrawer, setFilterDrawerOpen: props.setFilterDrawerOpen })] }))] })));
|
|
189
192
|
};
|
|
190
193
|
// A debounced input react component
|
|
191
|
-
function DebouncedInput({ value: initialValue, onChange, debounce = 500,
|
|
192
|
-
const [value, setValue] = React.useState(
|
|
194
|
+
function DebouncedInput({ value: initialValue, onChange, debounce = 500, openFilterDrawer, setFilterDrawerOpen, }) {
|
|
195
|
+
const [value, setValue] = React.useState('');
|
|
193
196
|
React.useEffect(() => {
|
|
194
197
|
setValue(initialValue);
|
|
195
198
|
}, [initialValue]);
|
|
@@ -199,7 +202,9 @@ function DebouncedInput({ value: initialValue, onChange, debounce = 500, resetAl
|
|
|
199
202
|
}, debounce);
|
|
200
203
|
return () => clearTimeout(timeout);
|
|
201
204
|
}, [value, onChange, debounce]);
|
|
202
|
-
return (jsx(Input, { placeholder: "Search Keyword", value: value, onChange: (_, data) => setValue(data.value), type: "search", autoComplete: "off", contentBefore: jsx(Search24Regular, {}), style: { width:
|
|
205
|
+
return (jsx(Input, { placeholder: "Search Keyword", value: value, onChange: (_, data) => setValue(data.value), type: "search", autoComplete: "off", contentBefore: jsx(Search24Regular, {}), style: { width: '300px' }, contentAfter: jsx(Button, { appearance: "subtle", icon: openFilterDrawer ? jsx(FilterDismissFilled, {}) : jsx(FilterFilled, {}), "aria-label": "View Menu", onClick: () => {
|
|
206
|
+
setFilterDrawerOpen((open) => !open);
|
|
207
|
+
} }) }));
|
|
203
208
|
}
|
|
204
209
|
|
|
205
210
|
const arrIncludesSome = (row, columnId, value) => {
|
|
@@ -231,10 +236,10 @@ const useGridContainer = (props, ref) => {
|
|
|
231
236
|
columns: columns,
|
|
232
237
|
data,
|
|
233
238
|
filterFns: {
|
|
234
|
-
arrIncludesSome,
|
|
239
|
+
arrIncludesSome: arrIncludesSome,
|
|
235
240
|
},
|
|
236
241
|
initialState: {
|
|
237
|
-
expanded: true
|
|
242
|
+
expanded: true,
|
|
238
243
|
},
|
|
239
244
|
state: {
|
|
240
245
|
pagination,
|
|
@@ -248,9 +253,9 @@ const useGridContainer = (props, ref) => {
|
|
|
248
253
|
columnVisibility,
|
|
249
254
|
columnPinning,
|
|
250
255
|
},
|
|
251
|
-
columnResizeMode:
|
|
256
|
+
columnResizeMode: 'onChange',
|
|
252
257
|
enableRowSelection: rowSelectionMode !== undefined,
|
|
253
|
-
enableMultiRowSelection: rowSelectionMode ===
|
|
258
|
+
enableMultiRowSelection: rowSelectionMode === 'multiple',
|
|
254
259
|
enableFilters: true,
|
|
255
260
|
enableGlobalFilter: true,
|
|
256
261
|
enableColumnFilters: true,
|
|
@@ -341,13 +346,26 @@ const useGridContainer = (props, ref) => {
|
|
|
341
346
|
|
|
342
347
|
const useCheckboxFilterStyles = makeStyles({
|
|
343
348
|
searchInput: {
|
|
344
|
-
width:
|
|
345
|
-
marginBottom:
|
|
346
|
-
marginLeft:
|
|
347
|
-
marginRight:
|
|
348
|
-
}
|
|
349
|
+
width: '90%',
|
|
350
|
+
marginBottom: '8px',
|
|
351
|
+
marginLeft: '10px',
|
|
352
|
+
marginRight: '10px',
|
|
353
|
+
},
|
|
354
|
+
searchContainer: Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', maxHeight: '300px', width: '100%' }, shorthands.overflow('auto', 'auto')), { '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, shorthands.borderRadius('50%')),
|
|
355
|
+
/* Track */
|
|
356
|
+
'::-webkit-scrollbar-track': {
|
|
357
|
+
'background-color': '#f1f1f1',
|
|
358
|
+
},
|
|
359
|
+
/* Handle */
|
|
360
|
+
'::-webkit-scrollbar-thumb': {
|
|
361
|
+
'background-color': '#888',
|
|
362
|
+
},
|
|
363
|
+
/* Handle on hover */
|
|
364
|
+
'::-webkit-scrollbar-thumb:hover': {
|
|
365
|
+
'background-color': '#555',
|
|
366
|
+
} }),
|
|
349
367
|
});
|
|
350
|
-
const FilterMultiSelectCheckbox = ({ column, table }) => {
|
|
368
|
+
const FilterMultiSelectCheckbox = ({ column, table, }) => {
|
|
351
369
|
var _a, _b, _c;
|
|
352
370
|
const firstValue = (_a = table
|
|
353
371
|
.getPreFilteredRowModel()
|
|
@@ -355,18 +373,21 @@ const FilterMultiSelectCheckbox = ({ column, table }) => {
|
|
|
355
373
|
const columnFilterValue = column.getFilterValue();
|
|
356
374
|
const [filterOptions, setFilterOptions] = React.useState([]);
|
|
357
375
|
React.useEffect(() => {
|
|
358
|
-
const uniqueSortedOptions = typeof firstValue ===
|
|
359
|
-
Array.from(column.getFacetedUniqueValues().keys()).sort((a, b) => Number(a) - Number(b))
|
|
376
|
+
const uniqueSortedOptions = typeof firstValue === 'number' || !isNaN(firstValue)
|
|
377
|
+
? Array.from(column.getFacetedUniqueValues().keys()).sort((a, b) => Number(a) - Number(b))
|
|
360
378
|
: Array.from(column.getFacetedUniqueValues().keys()).sort();
|
|
361
379
|
setFilterOptions(uniqueSortedOptions);
|
|
362
380
|
},
|
|
363
381
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
364
382
|
[column.getFacetedUniqueValues()]);
|
|
365
|
-
const [localColumnFilterValue, setLocalColumnFilterValue] = React.useState(
|
|
383
|
+
const [localColumnFilterValue, setLocalColumnFilterValue] = React.useState('');
|
|
366
384
|
const filterOptionsFiltered = React.useMemo(() => {
|
|
367
385
|
if (!localColumnFilterValue)
|
|
368
386
|
return filterOptions;
|
|
369
|
-
return filterOptions.filter(option =>
|
|
387
|
+
return filterOptions.filter((option) => {
|
|
388
|
+
var _a, _b, _c;
|
|
389
|
+
return (_b = (_a = `${option}`) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes((_c = `${localColumnFilterValue}`) === null || _c === void 0 ? void 0 : _c.toLowerCase());
|
|
390
|
+
});
|
|
370
391
|
}, [localColumnFilterValue, filterOptions]);
|
|
371
392
|
const filterContainer = React.useRef(null);
|
|
372
393
|
const rowVirtualizer = useVirtual({
|
|
@@ -379,33 +400,57 @@ const FilterMultiSelectCheckbox = ({ column, table }) => {
|
|
|
379
400
|
const paddingBottom = virtualRows.length > 0
|
|
380
401
|
? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
|
|
381
402
|
: 0;
|
|
382
|
-
const allOptionChecked = (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0 &&
|
|
403
|
+
const allOptionChecked = (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0 &&
|
|
404
|
+
(columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) !== (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length)
|
|
405
|
+
? 'mixed'
|
|
406
|
+
: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) === (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length) &&
|
|
407
|
+
(filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length) > 0;
|
|
383
408
|
const styles = useCheckboxFilterStyles();
|
|
384
|
-
return (jsxs("div", { children: [jsx(Input, { value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxs("div", Object.assign({ ref: filterContainer, style: {
|
|
385
|
-
display: "flex",
|
|
386
|
-
flexDirection: "column",
|
|
387
|
-
maxHeight: "300px",
|
|
388
|
-
width: "100%",
|
|
389
|
-
overflow: "auto"
|
|
390
|
-
} }, { children: [paddingTop > 0 && jsx("span", { style: { paddingTop: `${paddingTop}px` } }), jsx(Checkbox, { checked: allOptionChecked, onChange: () => {
|
|
409
|
+
return (jsxs("div", { children: [jsx(Input, { value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxs("div", Object.assign({ ref: filterContainer, className: styles.searchContainer }, { children: [paddingTop > 0 && (jsx("span", { style: { paddingTop: `${paddingTop}px` } })), jsx(Checkbox, { checked: allOptionChecked, onChange: () => {
|
|
391
410
|
if ((columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0) {
|
|
392
411
|
column.setFilterValue(undefined);
|
|
393
412
|
return;
|
|
394
413
|
}
|
|
395
|
-
column.setFilterValue([
|
|
396
|
-
|
|
414
|
+
column.setFilterValue([
|
|
415
|
+
...((filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.map((x) => `${x}`)) || []),
|
|
416
|
+
]);
|
|
417
|
+
}, label: '(Toggle All)' }, `toggle-all-${column.id}`), virtualRows.map((row) => {
|
|
397
418
|
var _a;
|
|
398
419
|
const value = `${filterOptionsFiltered[row.index]}`;
|
|
399
420
|
return (jsx(Checkbox, { checked: (_a = columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) !== null && _a !== void 0 ? _a : false, onChange: () => {
|
|
400
421
|
if (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.includes(value)) {
|
|
401
|
-
column.setFilterValue((old) => old === null || old === void 0 ? void 0 : old.filter(v => v !== value));
|
|
422
|
+
column.setFilterValue((old) => old === null || old === void 0 ? void 0 : old.filter((v) => v !== value));
|
|
402
423
|
return;
|
|
403
424
|
}
|
|
404
|
-
column.setFilterValue((old) => [
|
|
425
|
+
column.setFilterValue((old) => [
|
|
426
|
+
...(old || []),
|
|
427
|
+
value,
|
|
428
|
+
]);
|
|
405
429
|
}, label: value }, `${column.id}-${row.index}`));
|
|
406
|
-
}), paddingBottom > 0 && jsx("span", { style: { paddingBottom: `${paddingBottom}px` } })] }),
|
|
430
|
+
}), paddingBottom > 0 && (jsx("span", { style: { paddingBottom: `${paddingBottom}px` } }))] }), 'filter-multi-select-checkbox')] }));
|
|
407
431
|
};
|
|
408
432
|
|
|
433
|
+
const useRadioFilterStyles = makeStyles({
|
|
434
|
+
searchInput: {
|
|
435
|
+
width: '90%',
|
|
436
|
+
marginBottom: '8px',
|
|
437
|
+
marginLeft: '10px',
|
|
438
|
+
marginRight: '10px',
|
|
439
|
+
},
|
|
440
|
+
searchContainer: Object.assign(Object.assign({ display: 'flex', flexDirection: 'column', maxHeight: '300px', width: '100%' }, shorthands.overflow('auto', 'auto')), { '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, shorthands.borderRadius('50%')),
|
|
441
|
+
/* Track */
|
|
442
|
+
'::-webkit-scrollbar-track': {
|
|
443
|
+
'background-color': '#f1f1f1',
|
|
444
|
+
},
|
|
445
|
+
/* Handle */
|
|
446
|
+
'::-webkit-scrollbar-thumb': {
|
|
447
|
+
'background-color': '#888',
|
|
448
|
+
},
|
|
449
|
+
/* Handle on hover */
|
|
450
|
+
'::-webkit-scrollbar-thumb:hover': {
|
|
451
|
+
'background-color': '#555',
|
|
452
|
+
} }),
|
|
453
|
+
});
|
|
409
454
|
const FilterMultiSelectRadio = ({ column, table }) => {
|
|
410
455
|
var _a, _b, _c;
|
|
411
456
|
const firstValue = (_a = table
|
|
@@ -421,10 +466,19 @@ const FilterMultiSelectRadio = ({ column, table }) => {
|
|
|
421
466
|
},
|
|
422
467
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
423
468
|
[column.getFacetedUniqueValues()]);
|
|
469
|
+
const [localColumnFilterValue, setLocalColumnFilterValue] = React.useState('');
|
|
470
|
+
const filterOptionsFiltered = React.useMemo(() => {
|
|
471
|
+
if (!localColumnFilterValue)
|
|
472
|
+
return filterOptions;
|
|
473
|
+
return filterOptions.filter((option) => {
|
|
474
|
+
var _a, _b, _c;
|
|
475
|
+
return (_b = (_a = `${option}`) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes((_c = `${localColumnFilterValue}`) === null || _c === void 0 ? void 0 : _c.toLowerCase());
|
|
476
|
+
});
|
|
477
|
+
}, [localColumnFilterValue, filterOptions]);
|
|
424
478
|
const filterContainer = React.useRef(null);
|
|
425
479
|
const rowVirtualizer = useVirtual({
|
|
426
480
|
parentRef: filterContainer,
|
|
427
|
-
size:
|
|
481
|
+
size: filterOptionsFiltered.length,
|
|
428
482
|
overscan: 15,
|
|
429
483
|
});
|
|
430
484
|
const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
|
|
@@ -432,39 +486,73 @@ const FilterMultiSelectRadio = ({ column, table }) => {
|
|
|
432
486
|
const paddingBottom = virtualRows.length > 0
|
|
433
487
|
? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
|
|
434
488
|
: 0;
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
489
|
+
const styles = useRadioFilterStyles();
|
|
490
|
+
return (jsxs("div", { children: [jsx(Input, { value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxs("div", Object.assign({ ref: filterContainer, className: styles.searchContainer }, { children: [paddingTop > 0 && jsx("div", { style: { paddingTop: `${paddingTop}px` } }), jsxs(RadioGroup, Object.assign({ layout: "vertical", value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || '', onChange: (_, data) => {
|
|
491
|
+
if (data.value === '') {
|
|
492
|
+
column.setFilterValue([]);
|
|
493
|
+
return;
|
|
494
|
+
}
|
|
495
|
+
column.setFilterValue([data.value]);
|
|
496
|
+
} }, { children: [jsx(Radio, { value: '', label: 'None' }), virtualRows.map((row) => {
|
|
497
|
+
const value = filterOptionsFiltered[row.index];
|
|
498
|
+
return jsx(Radio, { value: value, label: value }, value);
|
|
499
|
+
})] })), paddingBottom > 0 && (jsx("div", { style: { paddingBottom: `${paddingBottom}px` } }))] }))] }));
|
|
445
500
|
};
|
|
446
501
|
|
|
447
502
|
const useFilterStyles = makeStyles({
|
|
448
|
-
root: Object.assign(Object.assign({}, shorthands.padding(
|
|
449
|
-
defaultInput: Object.assign(Object.assign({}, shorthands.padding(
|
|
503
|
+
root: Object.assign(Object.assign({}, shorthands.padding('10px')), { width: '100%' }),
|
|
504
|
+
defaultInput: Object.assign(Object.assign({}, shorthands.padding('10px')), { width: '100%' }),
|
|
450
505
|
});
|
|
451
|
-
const Filter = ({ column, table }) => {
|
|
452
|
-
|
|
453
|
-
|
|
506
|
+
const Filter = ({ column, table, }) => {
|
|
507
|
+
const filterFunctionName = column.columnDef.filterFn;
|
|
508
|
+
console.log('filterFunctionName', filterFunctionName);
|
|
454
509
|
const styles = useFilterStyles();
|
|
455
|
-
switch (
|
|
456
|
-
case
|
|
457
|
-
return
|
|
458
|
-
case
|
|
459
|
-
return
|
|
460
|
-
case
|
|
461
|
-
return
|
|
510
|
+
switch (filterFunctionName) {
|
|
511
|
+
case 'arrIncludesSome':
|
|
512
|
+
return jsx(FilterMultiSelectCheckbox, { column: column, table: table });
|
|
513
|
+
case 'arrIncludesAll':
|
|
514
|
+
return jsx(FilterMultiSelectRadio, { column: column, table: table });
|
|
515
|
+
case 'arrIncludes':
|
|
516
|
+
return jsx(FilterMultiSelectRadio, { column: column, table: table });
|
|
462
517
|
}
|
|
463
|
-
return (jsx("div", Object.assign({ className: styles.root }, { children: jsx(Input, { type: "search", value: (column.getFilterValue() ||
|
|
518
|
+
return (jsx("div", Object.assign({ className: styles.root }, { children: jsx(Input, { type: "search", value: (column.getFilterValue() || ''), onChange: (_, data) => {
|
|
464
519
|
column.setFilterValue(data.value);
|
|
465
520
|
}, placeholder: "Search...", size: "small", className: styles.defaultInput }) })));
|
|
466
521
|
};
|
|
467
522
|
|
|
523
|
+
const useFilterDrawerStyles = makeStyles({
|
|
524
|
+
drawerBody: Object.assign(Object.assign({}, shorthands.overflow('hidden', 'auto')), {
|
|
525
|
+
/* width */
|
|
526
|
+
':hover': Object.assign({}, shorthands.overflow('auto', 'auto')), '::-webkit-scrollbar': Object.assign({ width: '6px', height: '4px' }, shorthands.borderRadius('50%')),
|
|
527
|
+
/* Track */
|
|
528
|
+
'::-webkit-scrollbar-track': {
|
|
529
|
+
'background-color': '#f1f1f1',
|
|
530
|
+
},
|
|
531
|
+
/* Handle */
|
|
532
|
+
'::-webkit-scrollbar-thumb': {
|
|
533
|
+
'background-color': '#888',
|
|
534
|
+
},
|
|
535
|
+
/* Handle on hover */
|
|
536
|
+
'::-webkit-scrollbar-thumb:hover': {
|
|
537
|
+
'background-color': '#555',
|
|
538
|
+
} }),
|
|
539
|
+
});
|
|
540
|
+
const FilterDrawer = ({ open, setOpen, table }) => {
|
|
541
|
+
const headerGroups = table.getHeaderGroups();
|
|
542
|
+
const styles = useFilterDrawerStyles();
|
|
543
|
+
return (jsxs(InlineDrawer, Object.assign({ position: "end", open: open, separator: true }, { children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, Object.assign({ action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => setOpen(false) }) }, { children: "Advance Filters" })) }), jsx(DrawerBody, Object.assign({ className: styles.drawerBody }, { children: headerGroups.map((headerGroup) => {
|
|
544
|
+
const canApplyFilter = headerGroup.depth === (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1;
|
|
545
|
+
if (!canApplyFilter)
|
|
546
|
+
return null;
|
|
547
|
+
return headerGroup.headers.map((header) => {
|
|
548
|
+
const canFilter = header.column.getCanFilter();
|
|
549
|
+
if (!canFilter)
|
|
550
|
+
return null;
|
|
551
|
+
return (jsx("div", { children: header.column.getCanFilter() && (jsxs("div", { children: [jsxs(Caption1Stronger, { children: ["Filter by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(Filter, { column: header.column, table: table })] }, 'filter-group')) }, header.column.id));
|
|
552
|
+
});
|
|
553
|
+
}) }))] })));
|
|
554
|
+
};
|
|
555
|
+
|
|
468
556
|
const SortAscIcon = bundleIcon(ArrowSortDown20Filled, ArrowSortDown20Regular);
|
|
469
557
|
const SortDescIcon = bundleIcon(ArrowSortUp20Filled, ArrowSortUp20Regular);
|
|
470
558
|
const reorderColumn = (draggedColumnId, targetColumnId, columnOrder) => {
|
|
@@ -624,62 +712,60 @@ const TableContainer = (props) => {
|
|
|
624
712
|
: 0;
|
|
625
713
|
const headerGroups = table.getHeaderGroups();
|
|
626
714
|
// utilities
|
|
627
|
-
const isLoading = props.isLoading && virtualRows.length
|
|
628
|
-
const noItems = !isLoading && ((_c = props.data) === null || _c === void 0 ? void 0 : _c.length)
|
|
629
|
-
const noSearchResult = !isLoading && ((_d = props === null || props === void 0 ? void 0 : props.data) === null || _d === void 0 ? void 0 : _d.length) > 0 && virtualRows.length
|
|
630
|
-
return (
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
715
|
+
const isLoading = props.isLoading && virtualRows.length === 0;
|
|
716
|
+
const noItems = !isLoading && ((_c = props.data) === null || _c === void 0 ? void 0 : _c.length) === 0;
|
|
717
|
+
const noSearchResult = !isLoading && ((_d = props === null || props === void 0 ? void 0 : props.data) === null || _d === void 0 ? void 0 : _d.length) > 0 && virtualRows.length === 0;
|
|
718
|
+
return (jsxs("div", Object.assign({ ref: tableContainerRef, className: styles.tableContainer }, { children: [jsxs("table", Object.assign({ className: styles.table, "aria-label": "Data Grid" }, { children: [jsx("thead", Object.assign({ className: styles.tHead }, { children: headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup) => (jsxs("tr", { children: [rowSelectionMode === 'multiple' && (jsx("th", Object.assign({ style: { width: '1rem' } }, { children: headerGroup.depth === (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1 && (jsx(Checkbox, { checked: table.getIsSomeRowsSelected()
|
|
719
|
+
? 'mixed'
|
|
720
|
+
: table.getIsAllRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), "aria-label": "Select All Rows", title: 'Select All Rows' })) }))), rowSelectionMode === 'single' && (jsx("th", Object.assign({ style: { width: '1rem' } }, { children: " " }))), headerGroup.headers.map((header) => {
|
|
721
|
+
return (jsx(HeaderCell, { header: header, table: table, hideMenu: headerGroup.depth !== (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1, headerDepth: headerGroup.depth, totalNumberOfHeaderDepth: (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1 }, header.id));
|
|
722
|
+
})] }, headerGroup.id))) })), jsxs("tbody", Object.assign({ className: styles.tBody }, { children: [paddingTop > 0 && (jsx("tr", Object.assign({ className: styles.tBodyRow, "aria-hidden": true }, { children: jsx("td", { style: { height: `${paddingTop}px` } }) }))), virtualRows.map((virtualRow) => {
|
|
723
|
+
const row = rows[virtualRow.index];
|
|
724
|
+
return (jsxs("tr", Object.assign({ className: row.getIsSelected() || row.getIsAllSubRowsSelected()
|
|
725
|
+
? styles.tBodySelectedRow
|
|
726
|
+
: styles.tBodyRow }, { children: [rowSelectionMode === 'multiple' && (jsx("td", Object.assign({ className: styles.tBodyCell }, { children: jsx(Checkbox, { checked: row.getIsSomeSelected()
|
|
727
|
+
? 'mixed'
|
|
728
|
+
: row.getIsSelected() || row.getIsAllSubRowsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }))), rowSelectionMode === 'single' && (jsx("td", Object.assign({ className: styles.tBodyCell }, { children: jsx(Radio, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }))), row.getVisibleCells().map((cell) => {
|
|
729
|
+
var _a;
|
|
730
|
+
return (jsx("td", Object.assign({}, {
|
|
731
|
+
key: cell.id,
|
|
732
|
+
style: {
|
|
733
|
+
// background: cell.getIsGrouped()
|
|
734
|
+
// ? "#0aff0082"
|
|
735
|
+
// : cell.getIsAggregated()
|
|
736
|
+
// ? "#ffa50078"
|
|
737
|
+
// : cell.getIsPlaceholder()
|
|
738
|
+
// ? "#ff000042"
|
|
739
|
+
// : "white",
|
|
740
|
+
width: cell.column.getSize(),
|
|
741
|
+
},
|
|
742
|
+
}, { className: styles.tBodyCell }, { children: cell.getIsGrouped() ? (
|
|
743
|
+
// If it's a grouped cell, add an expander and row count
|
|
744
|
+
jsx(Button, Object.assign({}, {
|
|
745
|
+
onClick: row.getToggleExpandedHandler(),
|
|
645
746
|
style: {
|
|
646
|
-
|
|
647
|
-
// ? "#0aff0082"
|
|
648
|
-
// : cell.getIsAggregated()
|
|
649
|
-
// ? "#ffa50078"
|
|
650
|
-
// : cell.getIsPlaceholder()
|
|
651
|
-
// ? "#ff000042"
|
|
652
|
-
// : "white",
|
|
653
|
-
width: cell.column.getSize(),
|
|
747
|
+
cursor: row.getCanExpand() ? 'pointer' : 'normal',
|
|
654
748
|
},
|
|
655
|
-
}, {
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
// Otherwise, just render the regular cell
|
|
669
|
-
flexRender(cell.column.columnDef.cell, cell.getContext())) })));
|
|
670
|
-
})] }), row.id));
|
|
671
|
-
}), paddingBottom > 0 && (jsx("tr", Object.assign({ className: styles.tBodyRow, "aria-hidden": true }, { children: jsx("td", { style: { height: `${paddingBottom}px` } }) })))] })), rowSelectionMode === "multiple" &&
|
|
672
|
-
!isLoading &&
|
|
673
|
-
!noItems &&
|
|
674
|
-
!noSearchResult && (jsx("tfoot", Object.assign({ className: styles.tFoot }, { children: jsxs("tr", { children: [jsx("td", Object.assign({ className: "p-1" }, { children: jsx(Checkbox, { checked: table.getIsSomePageRowsSelected()
|
|
675
|
-
? "mixed"
|
|
676
|
-
: table.getIsAllPageRowsSelected(), onChange: table.getToggleAllPageRowsSelectedHandler(), "aria-label": "Select All Current Page Rows", title: "Select All Current Page Rows" }) })), jsxs("td", Object.assign({ colSpan: 20 }, { children: [table.getIsAllPageRowsSelected() ? "Unselect" : "Select", " ", "All Current Page Rows (", table.getRowModel().rows.length, ")"] }))] }) })))] })), isLoading && jsx(Loading, {}), noItems && jsx(NoItemGrid, { message: props.noItemPage }), noSearchResult && jsx(NoSearchResult, { message: props.noFilterMatchPage })] })) }));
|
|
749
|
+
}, { appearance: "transparent", icon: row.getIsExpanded() ? (jsx(GroupExpandedIcon, {})) : (jsx(GroupCollapsedIcon, {})) }, { children: jsxs("strong", { children: [flexRender(cell.column.columnDef.cell, cell.getContext()), ' ', "(", row.subRows.length, ")"] }) }))) : cell.getIsAggregated() ? (
|
|
750
|
+
// If the cell is aggregated, use the Aggregated
|
|
751
|
+
// renderer for cell
|
|
752
|
+
jsx("strong", { children: flexRender((_a = cell.column.columnDef.aggregatedCell) !== null && _a !== void 0 ? _a : cell.column.columnDef.cell, cell.getContext()) })) : cell.getIsPlaceholder() ? null : ( // For cells with repeated values, render null
|
|
753
|
+
// Otherwise, just render the regular cell
|
|
754
|
+
flexRender(cell.column.columnDef.cell, cell.getContext())) })));
|
|
755
|
+
})] }), row.id));
|
|
756
|
+
}), paddingBottom > 0 && (jsx("tr", Object.assign({ className: styles.tBodyRow, "aria-hidden": true }, { children: jsx("td", { style: { height: `${paddingBottom}px` } }) })))] })), rowSelectionMode === 'multiple' &&
|
|
757
|
+
!isLoading &&
|
|
758
|
+
!noItems &&
|
|
759
|
+
!noSearchResult && (jsx("tfoot", Object.assign({ className: styles.tFoot }, { children: jsxs("tr", { children: [jsx("td", Object.assign({ className: "p-1" }, { children: jsx(Checkbox, { checked: table.getIsSomePageRowsSelected()
|
|
760
|
+
? 'mixed'
|
|
761
|
+
: table.getIsAllPageRowsSelected(), onChange: table.getToggleAllPageRowsSelectedHandler(), "aria-label": "Select All Current Page Rows", title: 'Select All Current Page Rows' }) })), jsxs("td", Object.assign({ colSpan: 20 }, { children: [table.getIsAllPageRowsSelected() ? 'Unselect' : 'Select', " All Current Page Rows (", table.getRowModel().rows.length, ")"] }))] }) })))] })), isLoading && jsx(Loading, {}), noItems && jsx(NoItemGrid, { message: props.noItemPage }), noSearchResult && jsx(NoSearchResult, { message: props.noFilterMatchPage })] })));
|
|
677
762
|
};
|
|
678
763
|
|
|
679
764
|
function AdvancedTable(props, ref) {
|
|
680
765
|
const { table, globalFilter, setGlobalFilter } = useGridContainer(props, ref);
|
|
681
766
|
useStaticStyles();
|
|
682
|
-
|
|
767
|
+
const [isFilterDrawerOpen, setIsFilterDrawerOpen] = React.useState(false);
|
|
768
|
+
return (jsxs(DndProvider, Object.assign({ backend: HTML5Backend }, { children: [jsx(GridHeader, { table: table, gridTitle: props.gridTitle, globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, setFilterDrawerOpen: setIsFilterDrawerOpen, openFilterDrawer: isFilterDrawerOpen }), jsxs("div", Object.assign({ style: { display: 'flex' } }, { children: [jsx(TableContainer, { table: table, data: props.data, isLoading: props.isLoading || false, rowSelectionMode: props.rowSelectionMode, noFilterMatchPage: props.noFilterMatchPage, noItemPage: props.noItemPage }), jsx(FilterDrawer, { open: isFilterDrawerOpen, setOpen: setIsFilterDrawerOpen, table: table })] })), jsx(Pagination, { table: table, pageSizeOptions: props.pageSizeOptions })] })));
|
|
683
769
|
}
|
|
684
770
|
const ForwardedAdvancedTable = React.forwardRef(AdvancedTable);
|
|
685
771
|
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prt-ts/fluent-react-table-v2",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.40.0-build.2.0",
|
|
4
4
|
"main": "./index.js",
|
|
5
5
|
"types": "./src\\index.d.ts",
|
|
6
6
|
"peerDependencies": {
|
|
7
7
|
"react": ">=17.0.0",
|
|
8
8
|
"react-dom": ">=17.0.0",
|
|
9
|
-
"@fluentui/react-components": ">=9.
|
|
9
|
+
"@fluentui/react-components": ">=9.40.0",
|
|
10
10
|
"@fluentui/react-icons": ">=2.0.221"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Column, Table } from
|
|
2
|
-
export declare const Filter: <TItem extends object>({ column, table }: {
|
|
1
|
+
import { Column, Table } from '@tanstack/react-table';
|
|
2
|
+
export declare const Filter: <TItem extends object>({ column, table, }: {
|
|
3
3
|
column: Column<TItem, unknown>;
|
|
4
4
|
table: Table<TItem>;
|
|
5
5
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Table } from '@tanstack/react-table';
|
|
3
|
+
type FilterDrawerProps<TItem extends object> = {
|
|
4
|
+
open: boolean;
|
|
5
|
+
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
6
|
+
table: Table<TItem>;
|
|
7
|
+
};
|
|
8
|
+
export declare const FilterDrawer: <TItem extends object>({ open, setOpen, table }: FilterDrawerProps<TItem>) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Column, Table } from
|
|
2
|
-
export declare const FilterMultiSelectCheckbox: <TItem extends object>({ column, table }: {
|
|
1
|
+
import { Column, Table } from '@tanstack/react-table';
|
|
2
|
+
export declare const FilterMultiSelectCheckbox: <TItem extends object>({ column, table, }: {
|
|
3
3
|
column: Column<TItem, unknown>;
|
|
4
4
|
table: Table<TItem>;
|
|
5
5
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -5,6 +5,8 @@ type GridHeaderProps<TItem extends object> = {
|
|
|
5
5
|
gridTitle: JSX.Element | React.ReactNode;
|
|
6
6
|
globalFilter: string;
|
|
7
7
|
setGlobalFilter: (value: string) => void;
|
|
8
|
+
openFilterDrawer: boolean;
|
|
9
|
+
setFilterDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
8
10
|
};
|
|
9
11
|
export declare const GridHeader: <TItem extends object>(props: GridHeaderProps<TItem>) => import("react/jsx-runtime").JSX.Element;
|
|
10
12
|
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { Table } from
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Table } from '@tanstack/react-table';
|
|
3
3
|
type TableContainerProps<TItem extends object> = {
|
|
4
|
-
rowSelectionMode?:
|
|
4
|
+
rowSelectionMode?: 'single' | 'multiple';
|
|
5
5
|
table: Table<TItem>;
|
|
6
6
|
noItemPage?: React.ReactNode;
|
|
7
7
|
noFilterMatchPage?: React.ReactNode;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { TableProps } from "
|
|
2
|
-
import { TableRef } from "
|
|
1
|
+
import { TableProps } from "..";
|
|
2
|
+
import { TableRef } from "../types";
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
export declare const useGridContainer: <TItem extends object>(props: TableProps<TItem>, ref: React.ForwardedRef<TableRef<TItem>>) => {
|
|
5
5
|
table: import("@tanstack/react-table").Table<TItem>;
|