@prt-ts/fluent-react-table-v2 9.41.0-build.4.0 → 9.46.7-build.1.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/README.md +7 -7
- package/index.esm.d.ts +1 -0
- package/{index.js → index.esm.js} +94 -104
- package/package.json +10 -10
- package/src/lib/components/grid-header/GridHeader.d.ts +1 -1
- package/src/lib/components/useGridContainer.d.ts +1 -2
- package/src/lib/components/views/ViewSaveForm.d.ts +1 -1
- package/src/lib/components/views/ViewsDrawer.d.ts +1 -2
- package/src/lib/types/TableRef.d.ts +2 -2
- package/src/lib/types/TableView.d.ts +1 -1
- package/vite.config.d.ts +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
# fluent-react-table-v2
|
|
2
|
-
|
|
3
|
-
This library was generated with [Nx](https://nx.dev).
|
|
4
|
-
|
|
5
|
-
## Running unit tests
|
|
6
|
-
|
|
7
|
-
Run `nx test fluent-react-table-v2` to execute the unit tests via [Vitest](https://vitest.dev/).
|
|
1
|
+
# fluent-react-table-v2
|
|
2
|
+
|
|
3
|
+
This library was generated with [Nx](https://nx.dev).
|
|
4
|
+
|
|
5
|
+
## Running unit tests
|
|
6
|
+
|
|
7
|
+
Run `nx test fluent-react-table-v2` to execute the unit tests via [Vitest](https://vitest.dev/).
|
package/index.esm.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./src\\index";
|
|
@@ -1009,9 +1009,9 @@ const SaveFilled = /*#__PURE__*/createFluentIcon('SaveFilled', "1em", ["M3 5c0-1
|
|
|
1009
1009
|
const SaveRegular = /*#__PURE__*/createFluentIcon('SaveRegular', "1em", ["M3 5c0-1.1.9-2 2-2h8.38a2 2 0 0 1 1.41.59l1.62 1.62A2 2 0 0 1 17 6.62V15a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1v-4.5c0-.83.67-1.5 1.5-1.5h7c.83 0 1.5.67 1.5 1.5V16a1 1 0 0 0 1-1V6.62a1 1 0 0 0-.3-.7L14.1 4.28a1 1 0 0 0-.71-.29H13v2.5c0 .83-.67 1.5-1.5 1.5h-4A1.5 1.5 0 0 1 6 6.5V4H5Zm2 0v2.5c0 .28.22.5.5.5h4a.5.5 0 0 0 .5-.5V4H7Zm7 12v-4.5a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0-.5.5V16h8Z"]);
|
|
1010
1010
|
const SearchFilled = /*#__PURE__*/createFluentIcon('SearchFilled', "1em", ["M8.5 3a5.5 5.5 0 0 1 4.38 8.82l4.15 4.15a.75.75 0 0 1-.98 1.13l-.08-.07-4.15-4.15A5.5 5.5 0 1 1 8.5 3Zm0 1.5a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"]);
|
|
1011
1011
|
const SearchRegular = /*#__PURE__*/createFluentIcon('SearchRegular', "1em", ["M8.5 3a5.5 5.5 0 0 1 4.23 9.02l4.12 4.13a.5.5 0 0 1-.63.76l-.07-.06-4.13-4.12A5.5 5.5 0 1 1 8.5 3Zm0 1a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z"]);
|
|
1012
|
+
|
|
1012
1013
|
const TableSimpleCheckmarkFilled = /*#__PURE__*/createFluentIcon('TableSimpleCheckmarkFilled', "1em", ["M14 17h-3.5v-6.5H17V14a3 3 0 0 1-3 3Zm3-7.5h-6.5V3H14a3 3 0 0 1 3 3v3.5Zm-7.5 0V3H6a3 3 0 0 0-3 3v3.5h6.5Zm0 7.5v-6.5H3V14a3 3 0 0 0 3 3h3.5Zm5.85-3.9a.5.5 0 0 0-.7-.7l-1.4 1.4-.4-.4a.5.5 0 0 0-.7.7l.75.75c.2.2.5.2.7 0l1.75-1.75Z"]);
|
|
1013
1014
|
const TableSimpleCheckmarkRegular = /*#__PURE__*/createFluentIcon('TableSimpleCheckmarkRegular', "1em", ["M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4 6c0-1.1.9-2 2-2h3.5v5.5H4V6Zm6.5 3.5V4H14a2 2 0 0 1 2 2v3.5h-5.5Zm-6.5 1h5.5V16H6a2 2 0 0 1-2-2v-3.5Zm10.86 1.4c.2.2.2.5 0 .7l-1.75 1.75a.5.5 0 0 1-.71 0l-.75-.75a.5.5 0 0 1 .7-.7l.4.4 1.4-1.4c.2-.2.51-.2.7 0Z"]);
|
|
1014
|
-
|
|
1015
1015
|
const TextSortAscendingFilled = /*#__PURE__*/createFluentIcon('TextSortAscendingFilled', "1em", ["M6.7 2.5a.75.75 0 0 0-1.4 0L3.03 9a.75.75 0 0 0 1.42.5l.34-1h2.4l.34 1A.75.75 0 0 0 8.96 9L6.7 2.5ZM6 5.04 6.68 7H5.32L6 5.04ZM4 11a.75.75 0 0 0 0 1.5h2.53l-3.14 4.3A.75.75 0 0 0 4 18h4a.75.75 0 0 0 0-1.5H5.47l3.14-4.3A.75.75 0 0 0 8 11H4Zm10.25-9c.41 0 .75.34.75.75v12.57l1.45-1.58a.75.75 0 0 1 1.1 1.02l-2.75 3a.75.75 0 0 1-1.1 0l-2.75-3a.75.75 0 0 1 1.1-1.02l1.45 1.58V2.75c0-.41.34-.75.75-.75Z"]);
|
|
1016
1016
|
const TextSortDescendingFilled = /*#__PURE__*/createFluentIcon('TextSortDescendingFilled', "1em", ["M4 2a.75.75 0 1 0 0 1.5h2.53L3.39 7.8A.75.75 0 0 0 4 9h4a.75.75 0 0 0 0-1.5H5.47l3.14-4.3A.75.75 0 0 0 8 2H4Zm2.7 8.5a.75.75 0 0 0-1.4 0L3.03 17a.75.75 0 1 0 1.42.5l.34-1h2.4l.34 1a.75.75 0 1 0 1.42-.5L6.7 10.5ZM6 13.04 6.68 15H5.32L6 13.04ZM14.25 2c.41 0 .75.34.75.75v12.57l1.45-1.58a.75.75 0 0 1 1.1 1.02l-2.75 3a.75.75 0 0 1-1.1 0l-2.75-3a.75.75 0 0 1 1.1-1.02l1.45 1.58V2.75c0-.41.34-.75.75-.75Z"]);
|
|
1017
1017
|
|
|
@@ -1029,11 +1029,10 @@ const CodeTextOff16Regular = /*#__PURE__*/createFluentIcon('CodeTextOff16Regular
|
|
|
1029
1029
|
|
|
1030
1030
|
const Dismiss24Regular = /*#__PURE__*/createFluentIcon('Dismiss24Regular', "24", ["m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"]);
|
|
1031
1031
|
|
|
1032
|
-
const DocumentSearch24Regular = /*#__PURE__*/createFluentIcon('DocumentSearch24Regular', "24", ["
|
|
1032
|
+
const DocumentSearch24Regular = /*#__PURE__*/createFluentIcon('DocumentSearch24Regular', "24", ["M4 4c0-1.1.9-2 2-2h6.17a2 2 0 0 1 1.42.59L19.4 8.4A2 2 0 0 1 20 9.83V20a2 2 0 0 1-2 2h-4.02c-.05-.36-.21-.7-.5-.99l-.5-.51H18a.5.5 0 0 0 .5-.5V10H14a2 2 0 0 1-2-2V3.5H6a.5.5 0 0 0-.5.5v7.1c-.53.09-1.03.26-1.5.5V4Zm10 4.5h3.38L13.5 4.62V8c0 .28.22.5.5.5ZM6.5 21c.97 0 1.87-.3 2.6-.83l2.62 2.61a.75.75 0 1 0 1.06-1.06l-2.61-2.61A4.5 4.5 0 1 0 6.5 21Zm0-1.5a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"]);
|
|
1033
1033
|
|
|
1034
1034
|
const Save20Filled = /*#__PURE__*/createFluentIcon('Save20Filled', "20", ["M3 5c0-1.1.9-2 2-2h1v3.5C6 7.33 6.67 8 7.5 8h4c.83 0 1.5-.67 1.5-1.5V3h.38a2 2 0 0 1 1.41.59l1.62 1.62A2 2 0 0 1 17 6.62V15a2 2 0 0 1-2 2v-5.5c0-.83-.67-1.5-1.5-1.5h-7c-.83 0-1.5.67-1.5 1.5V17a2 2 0 0 1-2-2V5Zm9-2H7v3.5c0 .28.22.5.5.5h4a.5.5 0 0 0 .5-.5V3Zm2 8.5V17H6v-5.5c0-.28.22-.5.5-.5h7c.28 0 .5.22.5.5Z"]);
|
|
1035
|
-
|
|
1036
|
-
const Search24Regular = /*#__PURE__*/createFluentIcon('Search24Regular', "24", ["M10 2.75a7.25 7.25 0 0 1 5.63 11.82l4.9 4.9a.75.75 0 0 1-.98 1.13l-.08-.07-4.9-4.9A7.25 7.25 0 1 1 10 2.75Zm0 1.5a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Z"]);
|
|
1035
|
+
const Search24Regular = /*#__PURE__*/createFluentIcon('Search24Regular', "24", ["M4.5 10a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0ZM10 3a7 7 0 1 0 4.4 12.45l5.32 5.33a.75.75 0 1 0 1.06-1.06l-5.33-5.33A7 7 0 0 0 10 3Z"]);
|
|
1037
1036
|
|
|
1038
1037
|
const ViewDesktop20Filled = /*#__PURE__*/createFluentIcon('ViewDesktop20Filled', "20", ["M1.96 4.5c0-.83.67-1.5 1.5-1.5H16.4c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H12v2.01h1.5a.5.5 0 0 1 0 1h-7a.5.5 0 1 1 0-1H8V14H3.46a1.5 1.5 0 0 1-1.5-1.5v-8ZM9 14v2.01h2V14H9ZM4 5.5v6c0 .28.22.5.5.5h1a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5Zm3 0v6c0 .28.22.5.5.5h8a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5Z"]);
|
|
1039
1038
|
const ViewDesktop20Regular = /*#__PURE__*/createFluentIcon('ViewDesktop20Regular', "20", ["M4 5.5c0-.28.22-.5.5-.5h1c.27 0 .5.22.5.5v6a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-6ZM7.5 5a.5.5 0 0 0-.5.5v6c0 .28.22.5.5.5h8a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5h-8Zm-5.54-.5c0-.83.67-1.5 1.5-1.5H16.4c.83 0 1.5.67 1.5 1.5v8c0 .83-.67 1.5-1.5 1.5H12v2.01h1.5a.5.5 0 0 1 0 1h-7a.5.5 0 1 1 0-1H8V14H3.46a1.5 1.5 0 0 1-1.5-1.5v-8ZM9 14v2.01h2V14H9ZM3.46 4a.5.5 0 0 0-.5.5v8c0 .28.23.5.5.5H16.4a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5H3.46Z"]);
|
|
@@ -1055,17 +1054,14 @@ const bundleIcon = (FilledIcon, RegularIcon) => {
|
|
|
1055
1054
|
const Component = props => {
|
|
1056
1055
|
const {
|
|
1057
1056
|
className,
|
|
1058
|
-
primaryFill = 'currentColor',
|
|
1059
1057
|
filled,
|
|
1060
1058
|
...rest
|
|
1061
1059
|
} = props;
|
|
1062
1060
|
const styles = useBundledIconStyles();
|
|
1063
1061
|
return React.createElement(React.Fragment, null, React.createElement(FilledIcon, Object.assign({}, rest, {
|
|
1064
|
-
className: mergeClasses(styles.root, filled && styles.visible, iconFilledClassName, className)
|
|
1065
|
-
fill: primaryFill
|
|
1062
|
+
className: mergeClasses(styles.root, filled && styles.visible, iconFilledClassName, className)
|
|
1066
1063
|
})), React.createElement(RegularIcon, Object.assign({}, rest, {
|
|
1067
|
-
className: mergeClasses(styles.root, !filled && styles.visible, iconRegularClassName, className)
|
|
1068
|
-
fill: primaryFill
|
|
1064
|
+
className: mergeClasses(styles.root, !filled && styles.visible, iconRegularClassName, className)
|
|
1069
1065
|
})));
|
|
1070
1066
|
};
|
|
1071
1067
|
Component.displayName = "CompoundIcon";
|
|
@@ -1090,10 +1086,9 @@ const Pagination = (props) => {
|
|
|
1090
1086
|
let end = currentPage + Math.floor(DEFAULT_NUMBER_OF_PAGE_BTN / 2);
|
|
1091
1087
|
if (start < 1) {
|
|
1092
1088
|
start = 1;
|
|
1093
|
-
end =
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
: totalNumberOfPage;
|
|
1089
|
+
end = totalNumberOfPage > DEFAULT_NUMBER_OF_PAGE_BTN
|
|
1090
|
+
? DEFAULT_NUMBER_OF_PAGE_BTN
|
|
1091
|
+
: totalNumberOfPage;
|
|
1097
1092
|
}
|
|
1098
1093
|
else if (end > totalNumberOfPage) {
|
|
1099
1094
|
const possibleStart = totalNumberOfPage - DEFAULT_NUMBER_OF_PAGE_BTN + 1;
|
|
@@ -1103,12 +1098,12 @@ const Pagination = (props) => {
|
|
|
1103
1098
|
const currentPageOptions = end - start >= 0 ? range(start, end) : [];
|
|
1104
1099
|
return (currentPageOptions === null || currentPageOptions === void 0 ? void 0 : currentPageOptions.length) ? [...currentPageOptions] : [1];
|
|
1105
1100
|
}, [totalNumberOfPage, currentPage]);
|
|
1106
|
-
return (jsx("div",
|
|
1101
|
+
return (jsx("div", { className: styles.paginationContainer, children: jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.pageSelectionWrapper, children: jsx(Dropdown, { id: pageSizeSelectionId, size: "small", selectedOptions: [`${pageSize}`], placeholder: "Select Page Size", value: table.getState().pagination.pageSize.toString(), onOptionSelect: (_, data) => { var _a; return table.setPageSize(Number(+((_a = data.selectedOptions) === null || _a === void 0 ? void 0 : _a[0]))); }, className: styles.pageSelectionDropdown, "aria-label": "Select Page Size", children: pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions.map((option) => (jsx(Option, { value: `${option}`, children: `${option}` }, option))) }) }), jsxs("div", { className: styles.pageBtnContainer, children: [jsxs("div", { children: [jsxs("span", { children: ["Page", " ", jsxs("strong", { children: [table.getState().pagination.pageIndex + 1, " of", " ", table.getPageCount()] })] }), jsxs("span", { children: [" ", "| Go to page:", " ", jsx(Input, { type: "number", size: "small", value: `${table.getState().pagination.pageIndex + 1}`, onChange: (e, data) => {
|
|
1107
1102
|
const page = data.value ? Number(e.target.value) - 1 : 0;
|
|
1108
1103
|
if (page >= 0 && page < table.getPageCount()) {
|
|
1109
1104
|
table.setPageIndex(page);
|
|
1110
1105
|
}
|
|
1111
|
-
}, className: styles.pageSizeInput, "aria-label": "Page Number", autoComplete: "off", autoCorrect: "off" })] })] }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), icon: jsx(PreviousRegular, {}), "aria-label": "Go to first page" }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), icon: jsx(ArrowPreviousFilled, {}), "aria-label": "Go to previous page" }), pageSelectionOptions === null || pageSelectionOptions === void 0 ? void 0 : pageSelectionOptions.map((option, index) => (jsx(Button,
|
|
1106
|
+
}, className: styles.pageSizeInput, "aria-label": "Page Number", autoComplete: "off", autoCorrect: "off" })] })] }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), icon: jsx(PreviousRegular, {}), "aria-label": "Go to first page" }), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), icon: jsx(ArrowPreviousFilled, {}), "aria-label": "Go to previous page" }), pageSelectionOptions === null || pageSelectionOptions === void 0 ? void 0 : pageSelectionOptions.map((option, index) => (jsx(Button, { shape: "circular", appearance: option - 1 === currentPage ? "primary" : undefined, onClick: () => table.setPageIndex(option - 1), "aria-label": `Show Page ${option}`, size: "small", className: styles.pageBtn, children: option }, index))), jsx(Button, { size: "small", className: styles.pageBtn, shape: "circular", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), icon: jsx(ArrowNextFilled, {}), "aria-label": "Go to next page" }), jsx(Button, { size: "small", shape: "circular", className: styles.pageBtn, onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), icon: jsx(NextRegular, {}), "aria-label": "Go to last page" })] })] }) }));
|
|
1112
1107
|
};
|
|
1113
1108
|
|
|
1114
1109
|
bundleIcon$1(SaveFilled, SaveRegular);
|
|
@@ -1142,19 +1137,19 @@ const useGridHeaderStyles = makeStyles({
|
|
|
1142
1137
|
const GridHeader = (props) => {
|
|
1143
1138
|
const { table, gridTitle, globalFilter, setGlobalFilter, dispatch, drawerState } = props;
|
|
1144
1139
|
const styles = useGridHeaderStyles();
|
|
1145
|
-
return (jsxs("div",
|
|
1140
|
+
return (jsxs("div", { className: styles.tableTopHeaderContainer, children: [jsx("div", { className: styles.tableTopHeaderLeft, children: gridTitle }), jsxs("div", { className: styles.tableTopHeaderRight, children: [props.headerMenu, props.headerMenu && jsx(Divider, { vertical: true }), jsxs(Popover, { withArrow: true, children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsx(Tooltip, { content: 'Toggle Group Column', relationship: "label", children: jsx(Button, { icon: jsx(ToggleGroupColumnIcon, {}), "aria-label": "Toggle Group Column" }) }) }), jsx(PopoverSurface, { children: jsxs("div", { className: styles.tableTopHeaderColumnTogglePopover, children: [jsx(MenuGroupHeader, { children: "Group Columns" }), table.getAllLeafColumns().map((column) => {
|
|
1146
1141
|
if (column.id === 'select')
|
|
1147
1142
|
return null;
|
|
1148
1143
|
if (column.id === 'id')
|
|
1149
1144
|
return null;
|
|
1150
1145
|
return (jsx(Checkbox, { checked: column.getIsGrouped(), onChange: column.getToggleGroupingHandler(), disabled: !column.getCanGroup() || !column.getIsVisible(), label: jsx("span", { children: column.columnDef.id }) }, column.id));
|
|
1151
|
-
})] })
|
|
1146
|
+
})] }) })] }), jsxs(Popover, { withArrow: true, children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsx(Tooltip, { content: 'Toggle Column Visibility', relationship: "label", children: jsx(Button, { icon: jsx(ToggleSelectColumnIcon, {}), "aria-label": "Toggle Column Visibility" }) }) }), jsx(PopoverSurface, { children: jsxs("div", { 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) => {
|
|
1152
1147
|
if (column.id === 'select')
|
|
1153
1148
|
return null;
|
|
1154
1149
|
return (jsx(Checkbox, { checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), label: column.id, disabled: !column.getCanHide() }, column.id));
|
|
1155
|
-
})] })
|
|
1150
|
+
})] }) })] }), jsx(Tooltip, { content: 'Table Views Management', relationship: "label", children: jsx(Button, { onClick: () => {
|
|
1156
1151
|
dispatch({ type: "TOGGLE_VIEW_DRAWER" });
|
|
1157
|
-
}, icon: jsx(Album24Regular, {}), "aria-label": "View Menu" }) })
|
|
1152
|
+
}, icon: jsx(Album24Regular, {}), "aria-label": "View Menu" }) }), 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...", drawerState: drawerState, dispatch: dispatch })] })] }));
|
|
1158
1153
|
};
|
|
1159
1154
|
// A debounced input react component
|
|
1160
1155
|
function DebouncedInput({ value: initialValue, onChange, debounce = 500, drawerState, dispatch, }) {
|
|
@@ -1168,9 +1163,9 @@ function DebouncedInput({ value: initialValue, onChange, debounce = 500, drawerS
|
|
|
1168
1163
|
}, debounce);
|
|
1169
1164
|
return () => clearTimeout(timeout);
|
|
1170
1165
|
}, [value, onChange, debounce]);
|
|
1171
|
-
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(Tooltip,
|
|
1166
|
+
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(Tooltip, { content: drawerState.isFilterDrawerOpen ? 'Close Filter Window' : 'Open Advance Filter', relationship: "label", children: jsx(Button, { appearance: "subtle", icon: drawerState.isFilterDrawerOpen ? jsx(FilterDismissFilled, {}) : jsx(FilterFilled, {}), "aria-label": "View Menu", onClick: () => {
|
|
1172
1167
|
dispatch({ type: "TOGGLE_FILTER_DRAWER" });
|
|
1173
|
-
} }) })
|
|
1168
|
+
} }) }) }));
|
|
1174
1169
|
}
|
|
1175
1170
|
|
|
1176
1171
|
const arrIncludesSome = (row, columnId, value) => {
|
|
@@ -1305,21 +1300,6 @@ const useGridContainer = (props, ref) => {
|
|
|
1305
1300
|
getFacetedMinMaxValues: getFacetedMinMaxValues(),
|
|
1306
1301
|
});
|
|
1307
1302
|
const tableViews = React.useMemo(() => { var _a; return (_a = props.views) !== null && _a !== void 0 ? _a : []; }, [props.views]);
|
|
1308
|
-
const getTableState = React.useCallback(() => {
|
|
1309
|
-
return {
|
|
1310
|
-
pagination,
|
|
1311
|
-
sorting,
|
|
1312
|
-
columnFilters,
|
|
1313
|
-
globalFilter,
|
|
1314
|
-
grouping,
|
|
1315
|
-
expanded,
|
|
1316
|
-
rowSelection,
|
|
1317
|
-
columnOrder,
|
|
1318
|
-
columnVisibility,
|
|
1319
|
-
columnPinning,
|
|
1320
|
-
columnSizing
|
|
1321
|
-
};
|
|
1322
|
-
}, [pagination, sorting, columnFilters, globalFilter, grouping, expanded, rowSelection, columnOrder, columnVisibility, columnPinning, columnSizing]);
|
|
1323
1303
|
const resetToDefaultView = () => {
|
|
1324
1304
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
1325
1305
|
const defaultTableState = {
|
|
@@ -1342,13 +1322,24 @@ const useGridContainer = (props, ref) => {
|
|
|
1342
1322
|
})(),
|
|
1343
1323
|
columnVisibility: (_g = props.columnVisibility) !== null && _g !== void 0 ? _g : {},
|
|
1344
1324
|
columnPinning: (_h = props.columnPinningState) !== null && _h !== void 0 ? _h : {},
|
|
1345
|
-
columnSizing: {}
|
|
1325
|
+
columnSizing: {},
|
|
1326
|
+
rowPinning: {},
|
|
1327
|
+
columnSizingInfo: {
|
|
1328
|
+
"startOffset": null,
|
|
1329
|
+
"startSize": null,
|
|
1330
|
+
"deltaOffset": null,
|
|
1331
|
+
"deltaPercentage": null,
|
|
1332
|
+
"isResizingColumn": false,
|
|
1333
|
+
"columnSizingStart": []
|
|
1334
|
+
},
|
|
1346
1335
|
};
|
|
1347
1336
|
return applyTableState(defaultTableState);
|
|
1348
1337
|
};
|
|
1349
1338
|
const applyTableState = (tableState) => {
|
|
1350
1339
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
1351
1340
|
if (tableState) {
|
|
1341
|
+
// set table state
|
|
1342
|
+
console.log('tableState', tableState);
|
|
1352
1343
|
setSorting((_a = tableState.sorting) !== null && _a !== void 0 ? _a : []);
|
|
1353
1344
|
setColumnFilters((_b = tableState.columnFilters) !== null && _b !== void 0 ? _b : []);
|
|
1354
1345
|
setGlobalFilter((_c = tableState.globalFilter) !== null && _c !== void 0 ? _c : '');
|
|
@@ -1373,13 +1364,13 @@ const useGridContainer = (props, ref) => {
|
|
|
1373
1364
|
React.useImperativeHandle(ref, () => {
|
|
1374
1365
|
return {
|
|
1375
1366
|
table,
|
|
1376
|
-
getTableState,
|
|
1367
|
+
getTableState: table.getState,
|
|
1377
1368
|
applyTableState,
|
|
1378
1369
|
resetToDefaultView
|
|
1379
1370
|
};
|
|
1380
1371
|
},
|
|
1381
1372
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1382
|
-
[table
|
|
1373
|
+
[table]);
|
|
1383
1374
|
const headerMenu = React.useMemo(() => {
|
|
1384
1375
|
if (props.headerMenu) {
|
|
1385
1376
|
const selectedRows = (table === null || table === void 0 ? void 0 : table.getSelectedRowModel().flatRows.map((row) => row.original)) || [];
|
|
@@ -1394,7 +1385,7 @@ const useGridContainer = (props, ref) => {
|
|
|
1394
1385
|
const handleKeyDown = (event) => {
|
|
1395
1386
|
if (event.ctrlKey && event.altKey && event.key === 'c') {
|
|
1396
1387
|
event.preventDefault();
|
|
1397
|
-
const tableState =
|
|
1388
|
+
const tableState = table.getState();
|
|
1398
1389
|
// log table state to console
|
|
1399
1390
|
console.log(tableState);
|
|
1400
1391
|
// save table state to local storage
|
|
@@ -1407,7 +1398,7 @@ const useGridContainer = (props, ref) => {
|
|
|
1407
1398
|
return () => {
|
|
1408
1399
|
window.removeEventListener('keydown', handleKeyDown);
|
|
1409
1400
|
};
|
|
1410
|
-
}, [
|
|
1401
|
+
}, [table]);
|
|
1411
1402
|
return {
|
|
1412
1403
|
table,
|
|
1413
1404
|
globalFilter,
|
|
@@ -1415,8 +1406,7 @@ const useGridContainer = (props, ref) => {
|
|
|
1415
1406
|
headerMenu,
|
|
1416
1407
|
setGlobalFilter,
|
|
1417
1408
|
resetToDefaultView,
|
|
1418
|
-
applyTableState
|
|
1419
|
-
getTableState
|
|
1409
|
+
applyTableState
|
|
1420
1410
|
};
|
|
1421
1411
|
};
|
|
1422
1412
|
|
|
@@ -1520,7 +1510,7 @@ const FilterMultiSelectCheckbox = ({ column, table, }) => {
|
|
|
1520
1510
|
: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) === (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length) &&
|
|
1521
1511
|
(filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.length) > 0;
|
|
1522
1512
|
const styles = useCheckboxFilterStyles();
|
|
1523
|
-
return (jsxs("div", { children: [jsx(Input, { type: 'search', value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxs("div",
|
|
1513
|
+
return (jsxs("div", { children: [jsx(Input, { type: 'search', value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxs("div", { ref: filterContainer, className: styles.searchContainer, children: [paddingTop > 0 && (jsx("span", { style: { paddingTop: `${paddingTop}px` } })), jsx(Checkbox, { checked: allOptionChecked, onChange: () => {
|
|
1524
1514
|
if ((columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue.length) > 0) {
|
|
1525
1515
|
column.setFilterValue(undefined);
|
|
1526
1516
|
return;
|
|
@@ -1541,7 +1531,7 @@ const FilterMultiSelectCheckbox = ({ column, table, }) => {
|
|
|
1541
1531
|
value,
|
|
1542
1532
|
]);
|
|
1543
1533
|
}, label: value }, `${column.id}-${row.index}`));
|
|
1544
|
-
}), paddingBottom > 0 && (jsx("span", { style: { paddingBottom: `${paddingBottom}px` } }))] }
|
|
1534
|
+
}), paddingBottom > 0 && (jsx("span", { style: { paddingBottom: `${paddingBottom}px` } }))] }, 'filter-multi-select-checkbox')] }));
|
|
1545
1535
|
};
|
|
1546
1536
|
|
|
1547
1537
|
const useRadioFilterStyles = makeStyles({
|
|
@@ -1601,16 +1591,16 @@ const FilterSelectRadio = ({ column, table, }) => {
|
|
|
1601
1591
|
? totalSize - (((_c = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _c === void 0 ? void 0 : _c.end) || 0)
|
|
1602
1592
|
: 0;
|
|
1603
1593
|
const styles = useRadioFilterStyles();
|
|
1604
|
-
return (jsxs("div", { children: [jsx(Input, { value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxs("div",
|
|
1594
|
+
return (jsxs("div", { children: [jsx(Input, { value: localColumnFilterValue, onChange: (_, data) => setLocalColumnFilterValue(data.value), placeholder: "Search Options...", size: "small", className: styles.searchInput }), jsxs("div", { ref: filterContainer, className: styles.searchContainer, children: [paddingTop > 0 && jsx("div", { style: { paddingTop: `${paddingTop}px` } }), jsxs(RadioGroup, { layout: "vertical", value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || '', onChange: (_, data) => {
|
|
1605
1595
|
if (data.value === '') {
|
|
1606
1596
|
column.setFilterValue([]);
|
|
1607
1597
|
return;
|
|
1608
1598
|
}
|
|
1609
1599
|
column.setFilterValue([data.value]);
|
|
1610
|
-
}
|
|
1600
|
+
}, children: [jsx(Radio, { value: '', label: 'None' }), virtualRows.map((row) => {
|
|
1611
1601
|
const value = filterOptionsFiltered[row.index];
|
|
1612
1602
|
return jsx(Radio, { value: value, label: value }, value);
|
|
1613
|
-
})] })
|
|
1603
|
+
})] }), paddingBottom > 0 && (jsx("div", { style: { paddingBottom: `${paddingBottom}px` } }))] })] }));
|
|
1614
1604
|
};
|
|
1615
1605
|
|
|
1616
1606
|
const useNumberRangeFilterStyles$2 = makeStyles({
|
|
@@ -1643,11 +1633,11 @@ const FilterNumberRange = (props) => {
|
|
|
1643
1633
|
column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], value]);
|
|
1644
1634
|
};
|
|
1645
1635
|
const styles = useNumberRangeFilterStyles$2();
|
|
1646
|
-
return (jsxs("div",
|
|
1636
|
+
return (jsxs("div", { className: styles.searchContainer, children: [jsx(Field, { label: 'Min:', size: "small", className: styles.searchInputField, children: jsx(Input, { type: "number", value: `${(columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || ''}`, min: min, max: max, onChange: handleMinChange, className: styles.searchInput, placeholder: `Min ${((_e = column.getFacetedMinMaxValues()) === null || _e === void 0 ? void 0 : _e[0])
|
|
1647
1637
|
? `(${(_f = column.getFacetedMinMaxValues()) === null || _f === void 0 ? void 0 : _f[0]})`
|
|
1648
|
-
: ''}` }) })
|
|
1638
|
+
: ''}` }) }), jsx(Field, { label: 'Max:', size: "small", className: styles.searchInputField, children: jsx(Input, { type: "number", value: `${(columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[1]) || ''}`, min: min, max: max, onChange: handleMaxChange, className: styles.searchInput, placeholder: `Max ${((_g = column.getFacetedMinMaxValues()) === null || _g === void 0 ? void 0 : _g[1])
|
|
1649
1639
|
? `(${(_h = column.getFacetedMinMaxValues()) === null || _h === void 0 ? void 0 : _h[1]})`
|
|
1650
|
-
: ''}` }) })
|
|
1640
|
+
: ''}` }) })] }));
|
|
1651
1641
|
};
|
|
1652
1642
|
|
|
1653
1643
|
const useNumberRangeFilterStyles$1 = makeStyles({
|
|
@@ -1687,7 +1677,7 @@ const FilterDateRange = (props) => {
|
|
|
1687
1677
|
column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], date]);
|
|
1688
1678
|
};
|
|
1689
1679
|
const styles = useNumberRangeFilterStyles$1();
|
|
1690
|
-
return (jsxs("div",
|
|
1680
|
+
return (jsxs("div", { className: styles.searchContainer, children: [jsx(Field, { label: 'From Date:', size: "small", className: styles.searchInputField, children: jsx(DatePicker, { value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || null, min: min, max: max, onSelectDate: handleMinChange, className: styles.searchInput, placeholder: `From Date`, size: 'small', allowTextInput: true }) }), jsx(Field, { label: 'To Date:', size: "small", className: styles.searchInputField, children: jsx(DatePicker, { value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[1]) || null, min: min, max: max, onSelectDate: handleMaxChange, className: styles.searchInput, placeholder: `To Date`, size: 'small', allowTextInput: true }) })] }));
|
|
1691
1681
|
};
|
|
1692
1682
|
|
|
1693
1683
|
const useNumberRangeFilterStyles = makeStyles({
|
|
@@ -1720,7 +1710,7 @@ const FilterDate = (props) => {
|
|
|
1720
1710
|
column.setFilterValue(date);
|
|
1721
1711
|
};
|
|
1722
1712
|
const styles = useNumberRangeFilterStyles();
|
|
1723
|
-
return (jsx("div",
|
|
1713
|
+
return (jsx("div", { className: styles.searchContainer, children: jsx(DatePicker, { value: columnFilterValue || null, min: min, max: max, onSelectDate: onDateSelect, className: styles.searchInput, placeholder: `Select a date`, size: 'small', allowTextInput: true }) }));
|
|
1724
1714
|
};
|
|
1725
1715
|
|
|
1726
1716
|
const useFilterStyles = makeStyles({
|
|
@@ -1769,9 +1759,9 @@ const Filter = ({ column, table, }) => {
|
|
|
1769
1759
|
break;
|
|
1770
1760
|
}
|
|
1771
1761
|
}
|
|
1772
|
-
return (jsx("div",
|
|
1762
|
+
return (jsx("div", { className: styles.searchContainer, children: jsx(Field, { size: 'small', className: styles.searchInputField, children: jsx(Input, { value: (column.getFilterValue() || ''), onChange: (_, data) => {
|
|
1773
1763
|
column.setFilterValue(data.value);
|
|
1774
|
-
}, placeholder: "Search Keyword...", size: "small", className: styles.searchInput }) })
|
|
1764
|
+
}, placeholder: "Search Keyword...", size: "small", className: styles.searchInput }) }) }));
|
|
1775
1765
|
};
|
|
1776
1766
|
|
|
1777
1767
|
const useFilterDrawerStyles$1 = makeStyles({
|
|
@@ -1798,7 +1788,7 @@ const FilterDrawer = ({ drawerState, dispatch, table }) => {
|
|
|
1798
1788
|
table.setGlobalFilter('');
|
|
1799
1789
|
table.resetColumnFilters();
|
|
1800
1790
|
}, [table]);
|
|
1801
|
-
return (jsxs(InlineDrawer,
|
|
1791
|
+
return (jsxs(InlineDrawer, { position: "end", open: drawerState.isFilterDrawerOpen, separator: true, children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, { action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => dispatch({ type: "CLOSE_FILTER_DRAWER" }) }), children: "Advanced Filters" }) }), jsx(DrawerBody, { className: styles.drawerBody, children: headerGroups.map((headerGroup) => {
|
|
1802
1792
|
const canApplyFilter = headerGroup.depth === (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.length) - 1;
|
|
1803
1793
|
if (!canApplyFilter)
|
|
1804
1794
|
return null;
|
|
@@ -1806,11 +1796,11 @@ const FilterDrawer = ({ drawerState, dispatch, table }) => {
|
|
|
1806
1796
|
const canFilter = header.column.getCanFilter();
|
|
1807
1797
|
if (!canFilter)
|
|
1808
1798
|
return null;
|
|
1809
|
-
return (jsx("div", { children: header.column.getCanFilter() && (jsxs("div",
|
|
1799
|
+
return (jsx("div", { children: header.column.getCanFilter() && (jsxs("div", { style: {
|
|
1810
1800
|
marginTop: "20px",
|
|
1811
|
-
}
|
|
1801
|
+
}, 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));
|
|
1812
1802
|
});
|
|
1813
|
-
}) })
|
|
1803
|
+
}) }), jsx(DrawerFooter, { children: jsx(Button, { icon: jsx(ClearFilterIcon, {}), onClick: resetAllFilters, style: { width: "100%" }, children: "Clear All Filters" }) })] }));
|
|
1814
1804
|
};
|
|
1815
1805
|
|
|
1816
1806
|
const SortAscIcon = bundleIcon$1(ArrowSortDown20Filled, ArrowSortDown20Regular);
|
|
@@ -1845,12 +1835,12 @@ function HeaderCell({ header, table, hideMenu, headerDepth, totalNumberOfHeaderD
|
|
|
1845
1835
|
const canDragDrop = headerDepth === totalNumberOfHeaderDepth && !header.isPlaceholder;
|
|
1846
1836
|
const isLeafHeaders = headerDepth === totalNumberOfHeaderDepth;
|
|
1847
1837
|
if (header.isPlaceholder) {
|
|
1848
|
-
return (jsx("th",
|
|
1838
|
+
return (jsx("th", { colSpan: header.colSpan, className: styles.tHeadCell, children: header.column.getCanResize() && (jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) })) }));
|
|
1849
1839
|
}
|
|
1850
|
-
return (jsxs("th",
|
|
1851
|
-
: styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging, isOver && isLeafHeaders && styles.tHeadCellOver)
|
|
1840
|
+
return (jsxs("th", { colSpan: header.colSpan, className: mergeClasses$1(styles.tHeadCell, isLeafHeaders || header.isPlaceholder ? undefined
|
|
1841
|
+
: styles.tHeadNonLeafCell, isDragging && styles.tHeadCellDragging, isOver && isLeafHeaders && styles.tHeadCellOver), children: [jsx("div", { className: styles.tHeadCellDraggable, ref: canDragDrop ? dropRef : undefined, children: jsxs("div", { className: isLeafHeaders
|
|
1852
1842
|
? styles.tLeafHeadCellContent
|
|
1853
|
-
: styles.tNonLeafHeadCellContent, ref: canDragDrop ? dragRef : undefined
|
|
1843
|
+
: styles.tNonLeafHeadCellContent, ref: canDragDrop ? dragRef : undefined, children: [jsx("div", { ref: canDragDrop ? previewRef : undefined, children: header.isPlaceholder ? null : (jsxs(Button, { style: {
|
|
1854
1844
|
display: 'flex',
|
|
1855
1845
|
alignItems: 'center',
|
|
1856
1846
|
justifyContent: 'left',
|
|
@@ -1866,7 +1856,7 @@ function HeaderCell({ header, table, hideMenu, headerDepth, totalNumberOfHeaderD
|
|
|
1866
1856
|
}, appearance: "transparent", className: styles.tHeadContentBtn, icon: (_a = {
|
|
1867
1857
|
asc: (jsx("strong", { children: jsx(SortAscIcon, {}) })),
|
|
1868
1858
|
desc: (jsx("strong", { children: jsx(SortDescIcon, {}) })),
|
|
1869
|
-
}[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : undefined, iconPosition: "after"
|
|
1859
|
+
}[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : undefined, iconPosition: "after", children: [jsx("strong", { children: flexRender(header.column.columnDef.header, header.getContext()) }), header.column.getIsGrouped() && jsx(GroupListRegular, {}), header.column.getIsFiltered() && (jsx("strong", { children: jsx(FilterFilled, {}) })), header.column.getIsPinned() && jsx(PinRegular, {})] })) }), jsx(HeaderMenu, { header: header, table: table, hideMenu: hideMenu })] }) }), header.column.getCanResize() && (jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: mergeClasses$1(styles.resizer, column.getIsResizing() && styles.resizerActive) }))] }));
|
|
1870
1860
|
}
|
|
1871
1861
|
function HeaderMenu(props) {
|
|
1872
1862
|
const { header, table, hideMenu } = props;
|
|
@@ -1878,40 +1868,40 @@ function HeaderMenu(props) {
|
|
|
1878
1868
|
header.column.getCanFilter();
|
|
1879
1869
|
if (!canHavePopOver)
|
|
1880
1870
|
return (jsx(Fragment, { children: " " }));
|
|
1881
|
-
return (jsxs(Menu, { children: [jsx(MenuTrigger,
|
|
1871
|
+
return (jsxs(Menu, { children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsx(MenuButton, { appearance: "transparent", "aria-label": "View Column Actions" }) }), jsx(MenuPopover, { className: styles.tHeadMenuPopover, children: jsxs(MenuList, { children: [header.column.getCanSort() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Sort by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(MenuItem, { onClick: (e) => {
|
|
1882
1872
|
var _a;
|
|
1883
1873
|
const isControlKeySelected = e.ctrlKey;
|
|
1884
1874
|
(_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(false, isControlKeySelected);
|
|
1885
|
-
}, icon: jsx(TextSortAscendingFilled, {}), disabled: header.column.getIsSorted() === 'asc'
|
|
1875
|
+
}, icon: jsx(TextSortAscendingFilled, {}), disabled: header.column.getIsSorted() === 'asc', children: "Sort A to Z" }), jsx(MenuItem, { onClick: (e) => {
|
|
1886
1876
|
var _a;
|
|
1887
1877
|
const isControlKeySelected = e.ctrlKey;
|
|
1888
1878
|
(_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(true, isControlKeySelected);
|
|
1889
|
-
}, icon: jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === 'desc'
|
|
1879
|
+
}, icon: jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === 'desc', children: "Sort Z to A" }), jsx(MenuDivider, {})] }, 'sort-group')), header.column.getCanGroup() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Group by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), !header.column.getIsGrouped() && (jsxs(MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsx(GroupFilled, {}), children: ["Group by", ' ', flexRender(header.column.columnDef.header, header.getContext())] })), header.column.getIsGrouped() && (jsxs(MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsx(GroupDismissFilled, {}), children: ["Remove Grouping on", ' ', flexRender(header.column.columnDef.header, header.getContext())] })), jsx(MenuDivider, {})] }, 'grouping-group')), header.column.getCanSort() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Pin Column", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(MenuItem, { onClick: () => {
|
|
1890
1880
|
var _a;
|
|
1891
1881
|
(_a = header.column) === null || _a === void 0 ? void 0 : _a.pin('left');
|
|
1892
|
-
}, icon: jsx(ArrowStepInLeftRegular, {}), disabled: header.column.getIsPinned() === 'left'
|
|
1882
|
+
}, icon: jsx(ArrowStepInLeftRegular, {}), disabled: header.column.getIsPinned() === 'left', children: "To Left" }), jsx(MenuItem, { onClick: () => {
|
|
1893
1883
|
var _a;
|
|
1894
1884
|
(_a = header.column) === null || _a === void 0 ? void 0 : _a.pin('right');
|
|
1895
|
-
}, icon: jsx(ArrowStepInRightRegular, {}), disabled: header.column.getIsPinned() === 'right'
|
|
1885
|
+
}, icon: jsx(ArrowStepInRightRegular, {}), disabled: header.column.getIsPinned() === 'right', children: "To Right" }), ['left', 'right'].includes(header.column.getIsPinned()) && (jsx(MenuItem, { onClick: () => {
|
|
1896
1886
|
var _a;
|
|
1897
1887
|
(_a = header.column) === null || _a === void 0 ? void 0 : _a.pin(false);
|
|
1898
|
-
}, icon: jsx(PinOffRegular, {})
|
|
1888
|
+
}, icon: jsx(PinOffRegular, {}), children: "Unpin Column" })), jsx(MenuDivider, {})] }, 'pin columns')), header.column.getCanFilter() && (jsxs(MenuGroup, { children: [jsxs(MenuGroupHeader, { children: ["Filter by", ' ', flexRender(header.column.columnDef.header, header.getContext())] }), jsx(Filter, { column: header.column, table: table })] }, 'filter-group'))] }) })] }));
|
|
1899
1889
|
}
|
|
1900
1890
|
|
|
1901
1891
|
function HeaderRow(props) {
|
|
1902
1892
|
const styles = useTableHeaderStyles();
|
|
1903
1893
|
const { table, headerGroup, rowSelectionMode, headerGroupsLength } = props;
|
|
1904
|
-
return (jsxs("tr",
|
|
1894
|
+
return (jsxs("tr", { className: styles.tHeadRow, children: [rowSelectionMode === 'multiple' && (jsx("th", { style: { width: '1rem' }, "aria-label": "Select All Row Column", children: headerGroup.depth === headerGroupsLength - 1 && (jsx(Checkbox, { checked: table.getIsSomeRowsSelected()
|
|
1905
1895
|
? 'mixed'
|
|
1906
|
-
: table.getIsAllRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), "aria-label": "Select All Rows", title: 'Select All Rows' })) }))
|
|
1896
|
+
: table.getIsAllRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), "aria-label": "Select All Rows", title: 'Select All Rows' })) })), rowSelectionMode === 'single' && (jsx("th", { style: { width: '1rem' }, "aria-label": "Select All Row Column", children: ' ' })), headerGroup.headers.map((header) => {
|
|
1907
1897
|
return (jsx(HeaderCell, { header: header, table: table, hideMenu: headerGroup.depth !== headerGroupsLength - 1, headerDepth: headerGroup.depth, totalNumberOfHeaderDepth: headerGroupsLength - 1 }, header.id));
|
|
1908
|
-
})] }
|
|
1898
|
+
})] }, headerGroup.id));
|
|
1909
1899
|
}
|
|
1910
1900
|
|
|
1911
1901
|
function TableHeader(props) {
|
|
1912
1902
|
const styles = useTableHeaderStyles();
|
|
1913
1903
|
const { table, headerGroups, rowSelectionMode } = props;
|
|
1914
|
-
return (jsx("thead",
|
|
1904
|
+
return (jsx("thead", { className: styles.tHead, children: headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup) => (jsx(HeaderRow, { table: table, rowSelectionMode: rowSelectionMode, headerGroup: headerGroup, headerGroupsLength: headerGroups.length }, headerGroup.id))) }));
|
|
1915
1905
|
}
|
|
1916
1906
|
|
|
1917
1907
|
const useLoadingStyles = makeStyles({
|
|
@@ -1924,12 +1914,12 @@ const useLoadingStyles = makeStyles({
|
|
|
1924
1914
|
const Loading = (props) => {
|
|
1925
1915
|
const { numberOfItems = 16, numberOfColumns = 5 } = props;
|
|
1926
1916
|
const styles = useLoadingStyles();
|
|
1927
|
-
return (jsx("div",
|
|
1917
|
+
return (jsx("div", { className: styles.invertedWrapper, children: jsx(Skeleton, { children: [...Array(numberOfItems)].map((_, i) => (jsx("div", { className: styles.row, children: [...Array(numberOfColumns)].map((_, i) => {
|
|
1928
1918
|
if (i === 0) {
|
|
1929
1919
|
return jsx(SkeletonItem, { shape: "circle", size: 24 }, i);
|
|
1930
1920
|
}
|
|
1931
1921
|
return jsx(SkeletonItem, { size: 16 }, i);
|
|
1932
|
-
}) }
|
|
1922
|
+
}) }, i))) }) }));
|
|
1933
1923
|
};
|
|
1934
1924
|
|
|
1935
1925
|
const useNoItemGridStyles = makeStyles({
|
|
@@ -1945,7 +1935,7 @@ const useNoItemGridStyles = makeStyles({
|
|
|
1945
1935
|
|
|
1946
1936
|
const NoItemGrid = ({ message }) => {
|
|
1947
1937
|
const styles = useNoItemGridStyles();
|
|
1948
|
-
return (jsx("div",
|
|
1938
|
+
return (jsx("div", { className: styles.wrapper, children: jsx("div", { children: message ? message : jsx(Subtitle2Stronger, { children: "No Data to Show." }) }) }));
|
|
1949
1939
|
};
|
|
1950
1940
|
|
|
1951
1941
|
const useNoFilterMatchStyles = makeStyles({
|
|
@@ -1968,7 +1958,7 @@ const useNoFilterMatchStyles = makeStyles({
|
|
|
1968
1958
|
|
|
1969
1959
|
const NoSearchResult = ({ message }) => {
|
|
1970
1960
|
const styles = useNoFilterMatchStyles();
|
|
1971
|
-
return (jsxs("div",
|
|
1961
|
+
return (jsxs("div", { className: styles.wrapper, children: [jsx("div", { className: styles.iconWrapper, children: jsx(DocumentSearch24Regular, {}) }), jsx("div", { children: message ? message : jsx(Subtitle2Stronger, { children: "No item found that matches your search term." }) })] }));
|
|
1972
1962
|
};
|
|
1973
1963
|
|
|
1974
1964
|
const useTableBodyStyles = makeStyles({
|
|
@@ -1996,24 +1986,24 @@ function TableCell({ cell, row }) {
|
|
|
1996
1986
|
return jsx("td", { style: tdStyle, className: styles.tBodyCell }, cell.id);
|
|
1997
1987
|
}
|
|
1998
1988
|
if (cell.getIsGrouped()) {
|
|
1999
|
-
return (jsx("td",
|
|
1989
|
+
return (jsx("td", { style: tdStyle, className: styles.tBodyCell, children: jsx(Button, { onClick: row.getToggleExpandedHandler(), style: {
|
|
2000
1990
|
cursor: row.getCanExpand() ? 'pointer' : 'normal',
|
|
2001
1991
|
textAlign: 'left',
|
|
2002
|
-
}, appearance: "transparent", icon: row.getIsExpanded() ? jsx(GroupExpandedIcon, {}) : jsx(GroupCollapsedIcon, {})
|
|
1992
|
+
}, appearance: "transparent", icon: row.getIsExpanded() ? jsx(GroupExpandedIcon, {}) : jsx(GroupCollapsedIcon, {}), children: jsxs("strong", { children: [flexRender(cell.column.columnDef.cell, cell.getContext()), " (", row.subRows.length, ")"] }) }) }, cell.id));
|
|
2003
1993
|
}
|
|
2004
1994
|
if (cell.getIsAggregated()) {
|
|
2005
|
-
return (jsx("td",
|
|
1995
|
+
return (jsx("td", { style: tdStyle, className: styles.tBodyCell, children: jsx("strong", { children: flexRender((_a = cell.column.columnDef.aggregatedCell) !== null && _a !== void 0 ? _a : cell.column.columnDef.cell, cell.getContext()) }) }, cell.id));
|
|
2006
1996
|
}
|
|
2007
|
-
return (jsx("td",
|
|
1997
|
+
return (jsx("td", { style: tdStyle, className: styles.tBodyCell, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
|
|
2008
1998
|
}
|
|
2009
1999
|
|
|
2010
2000
|
function TableRow({ row, rowSelectionMode }) {
|
|
2011
2001
|
const styles = useTableBodyStyles();
|
|
2012
|
-
return (jsxs("tr",
|
|
2002
|
+
return (jsxs("tr", { className: row.getIsSelected() || row.getIsAllSubRowsSelected()
|
|
2013
2003
|
? styles.tBodySelectedRow
|
|
2014
|
-
: styles.tBodyRow
|
|
2004
|
+
: styles.tBodyRow, children: [rowSelectionMode === 'multiple' && (jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsx(Checkbox, { checked: row.getIsSomeSelected()
|
|
2015
2005
|
? 'mixed'
|
|
2016
|
-
: row.getIsSelected() || row.getIsAllSubRowsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) }))
|
|
2006
|
+
: row.getIsSelected() || row.getIsAllSubRowsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) })), rowSelectionMode === 'single' && (jsx("td", { className: styles.tBodyCell, "aria-label": "Select Row Column", children: jsx(Radio, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), "aria-label": "Select Row" }) })), row.getVisibleCells().map((cell) => (jsx(TableCell, { cell: cell, row: row }, cell.id)))] }, row.id));
|
|
2017
2007
|
}
|
|
2018
2008
|
|
|
2019
2009
|
function TableBody(props) {
|
|
@@ -2024,10 +2014,10 @@ function TableBody(props) {
|
|
|
2024
2014
|
const paddingBottom = virtualRows.length > 0
|
|
2025
2015
|
? totalSize - (((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _b === void 0 ? void 0 : _b.end) || 0)
|
|
2026
2016
|
: 0;
|
|
2027
|
-
return (jsxs("tbody",
|
|
2017
|
+
return (jsxs("tbody", { className: styles.tBody, children: [paddingTop > 0 && (jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsx("td", { style: { height: `${paddingTop}px` } }) })), virtualRows.map((virtualRow) => {
|
|
2028
2018
|
const row = rows[virtualRow.index];
|
|
2029
2019
|
return (jsx(TableRow, { row: row, rowSelectionMode: rowSelectionMode }, row.id));
|
|
2030
|
-
}), paddingBottom > 0 && (jsx("tr",
|
|
2020
|
+
}), paddingBottom > 0 && (jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsx("td", { style: { height: `${paddingBottom}px` } }) }))] }));
|
|
2031
2021
|
}
|
|
2032
2022
|
|
|
2033
2023
|
const TableContainer = (props) => {
|
|
@@ -2039,7 +2029,7 @@ const TableContainer = (props) => {
|
|
|
2039
2029
|
const rowVirtualizer = useVirtual({
|
|
2040
2030
|
parentRef: tableContainerRef,
|
|
2041
2031
|
size: rows.length,
|
|
2042
|
-
overscan:
|
|
2032
|
+
overscan: 5,
|
|
2043
2033
|
});
|
|
2044
2034
|
const { virtualItems: virtualRows, totalSize } = rowVirtualizer;
|
|
2045
2035
|
const headerGroups = table.getHeaderGroups();
|
|
@@ -2047,12 +2037,12 @@ const TableContainer = (props) => {
|
|
|
2047
2037
|
const isLoading = props.isLoading && virtualRows.length === 0;
|
|
2048
2038
|
const noItems = !isLoading && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.length) === 0;
|
|
2049
2039
|
const noSearchResult = !isLoading && ((_b = props === null || props === void 0 ? void 0 : props.data) === null || _b === void 0 ? void 0 : _b.length) > 0 && virtualRows.length === 0;
|
|
2050
|
-
return (jsxs("div",
|
|
2040
|
+
return (jsxs("div", { ref: tableContainerRef, className: styles.tableContainer, children: [jsxs("table", { className: styles.table, "aria-label": "Data Grid", children: [jsx(TableHeader, { table: table, rowSelectionMode: rowSelectionMode, headerGroups: headerGroups }), jsx(TableBody, { rows: rows, virtualRows: virtualRows, rowSelectionMode: rowSelectionMode, totalSize: totalSize }), rowSelectionMode === 'multiple' &&
|
|
2051
2041
|
!isLoading &&
|
|
2052
2042
|
!noItems &&
|
|
2053
|
-
!noSearchResult && (jsx("tfoot",
|
|
2043
|
+
!noSearchResult && (jsx("tfoot", { className: styles.tFoot, children: jsxs("tr", { children: [jsx("td", { className: "p-1", children: jsx(Checkbox, { checked: table.getIsSomePageRowsSelected()
|
|
2054
2044
|
? 'mixed'
|
|
2055
|
-
: table.getIsAllPageRowsSelected(), onChange: table.getToggleAllPageRowsSelectedHandler(), "aria-label": "Select All Current Page Rows", title: 'Select All Current Page Rows' }) })
|
|
2045
|
+
: table.getIsAllPageRowsSelected(), onChange: table.getToggleAllPageRowsSelectedHandler(), "aria-label": "Select All Current Page Rows", title: 'Select All Current Page Rows' }) }), jsxs("td", { 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 })] }));
|
|
2056
2046
|
};
|
|
2057
2047
|
|
|
2058
2048
|
const ViewSaveForm = (props) => {
|
|
@@ -2061,21 +2051,21 @@ const ViewSaveForm = (props) => {
|
|
|
2061
2051
|
const inputRef = React.useRef(null);
|
|
2062
2052
|
const checkboxRef = React.useRef(null);
|
|
2063
2053
|
if (!isFormOpen) {
|
|
2064
|
-
return (jsxs(Fragment, { children: [jsx(MenuList, { children: jsx(MenuItemRadio,
|
|
2054
|
+
return (jsxs(Fragment, { children: [jsx(MenuList, { children: jsx(MenuItemRadio, { name: 'view-manager', value: 'View Manager', onClick: () => setIsFormOpen(true), icon: jsx(Save20Filled, {}), children: "Save Current View" }) }), jsx(Divider, {})] }));
|
|
2065
2055
|
}
|
|
2066
|
-
return (jsxs("div",
|
|
2056
|
+
return (jsxs("div", { style: {
|
|
2067
2057
|
boxSizing: 'border-box',
|
|
2068
2058
|
padding: '0.4rem',
|
|
2069
2059
|
border: '1px solid #ccc',
|
|
2070
2060
|
marginBottom: '0.5rem'
|
|
2071
|
-
}
|
|
2061
|
+
}, children: [jsx(Caption1Stronger, { children: "Enter View Details" }), jsx(Field, { label: "View Name", validationMessage: errorMessage, validationState: errorMessage ? "error" : undefined, hint: jsx(Fragment, { children: "Give your view a name and save it." }), children: jsx(Input, { ref: inputRef, placeholder: "View Name" }) }), jsx(Field, { hint: jsx(Fragment, { children: "Global view is accessible to everybody in the system." }), children: jsx(Checkbox, { ref: checkboxRef, label: "Set as global view" }) }), jsxs("div", { style: {
|
|
2072
2062
|
display: 'flex',
|
|
2073
2063
|
flexWrap: 'wrap',
|
|
2074
2064
|
gap: '0.5rem'
|
|
2075
|
-
}
|
|
2065
|
+
}, children: [jsx(Button, { onClick: () => {
|
|
2076
2066
|
setIsFormOpen(false);
|
|
2077
2067
|
setErrorMessage('');
|
|
2078
|
-
}
|
|
2068
|
+
}, children: "Cancel" }), jsx(Button, { appearance: 'primary', onClick: () => {
|
|
2079
2069
|
var _a, _b, _c;
|
|
2080
2070
|
if (!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value)) {
|
|
2081
2071
|
setErrorMessage('View name is required');
|
|
@@ -2093,7 +2083,7 @@ const ViewSaveForm = (props) => {
|
|
|
2093
2083
|
(_c = props === null || props === void 0 ? void 0 : props.onSave) === null || _c === void 0 ? void 0 : _c.call(props, tableView);
|
|
2094
2084
|
setErrorMessage('');
|
|
2095
2085
|
setIsFormOpen(false);
|
|
2096
|
-
}
|
|
2086
|
+
}, children: "Save" })] })] }));
|
|
2097
2087
|
};
|
|
2098
2088
|
|
|
2099
2089
|
const useFilterDrawerStyles = makeStyles({
|
|
@@ -2114,7 +2104,7 @@ const useFilterDrawerStyles = makeStyles({
|
|
|
2114
2104
|
} }),
|
|
2115
2105
|
});
|
|
2116
2106
|
const ViewsDrawer = (props) => {
|
|
2117
|
-
const { drawerState, dispatch, tableViews, applyTableState, resetToGridDefaultView,
|
|
2107
|
+
const { table, drawerState, dispatch, tableViews, applyTableState, resetToGridDefaultView, onTableViewSave } = props;
|
|
2118
2108
|
const styles = useFilterDrawerStyles();
|
|
2119
2109
|
const [checkedValues, setCheckedValues] = React.useState({ font: ["calibri"] });
|
|
2120
2110
|
const onChange = (e, { name, checkedItems }) => {
|
|
@@ -2130,14 +2120,14 @@ const ViewsDrawer = (props) => {
|
|
|
2130
2120
|
// const clearAllSelection = React.useCallback(() => {
|
|
2131
2121
|
// table.toggleAllRowsSelected(false);
|
|
2132
2122
|
// }, [table]);
|
|
2133
|
-
return (jsxs(InlineDrawer,
|
|
2134
|
-
return (jsxs("div",
|
|
2123
|
+
return (jsxs(InlineDrawer, { position: "end", open: drawerState.isViewsDrawerOpen, separator: true, children: [jsx(DrawerHeader, { children: jsx(DrawerHeaderTitle, { action: jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => dispatch({ type: "CLOSE_VIEW_DRAWER" }) }), children: "Table Views" }) }), jsxs(DrawerBody, { className: styles.drawerBody, children: [onTableViewSave && jsx(ViewSaveForm, { mode: 'create', getTableState: table.getState, onSave: onTableViewSave }), jsxs(MenuList, { checkedValues: checkedValues, onCheckedValueChange: onChange, children: [jsx(MenuItemRadio, { name: 'table-views', value: 'Default View', icon: jsx(ViewDesktop20Filled, {}), onClick: resetToGridDefaultView, children: "Default View" }), tableViews.length > 0 && jsx(MenuDivider, { children: "Additional Views" }), tableViews.map((view) => {
|
|
2124
|
+
return (jsxs("div", { style: {
|
|
2135
2125
|
display: 'flex',
|
|
2136
2126
|
justifyContent: 'space-between',
|
|
2137
2127
|
alignItems: 'center',
|
|
2138
2128
|
width: '100%',
|
|
2139
|
-
}
|
|
2140
|
-
})] })
|
|
2129
|
+
}, children: [jsx(MenuItemRadio, { name: "table-views", value: view.viewName, onClick: () => applyTableState(view.tableState), icon: jsx(ViewDesktop20Regular, {}), children: view.viewName }), props.onTableViewDelete && (view === null || view === void 0 ? void 0 : view.isViewOwner) && (jsx(Button, { appearance: "subtle", "aria-label": "Close", icon: jsx(Dismiss24Regular, {}), onClick: () => { var _a; return (_a = props.onTableViewDelete) === null || _a === void 0 ? void 0 : _a.call(props, view); } }))] }, view.id + view.viewName));
|
|
2130
|
+
})] })] }), jsx(DrawerFooter, { children: jsxs(MenuList, { children: [jsx(MenuDivider, {}), jsx(MenuItem, { icon: jsx(ClearFilterIcon, {}), onClick: resetToGridDefaultView, children: "Reset to Default View" })] }) })] }));
|
|
2141
2131
|
};
|
|
2142
2132
|
|
|
2143
2133
|
const TableActions = {
|
|
@@ -2170,12 +2160,12 @@ function tableReducer(state, action) {
|
|
|
2170
2160
|
|
|
2171
2161
|
function AdvancedTable(props, ref) {
|
|
2172
2162
|
useStaticStyles();
|
|
2173
|
-
const { table, globalFilter, headerMenu, tableViews, setGlobalFilter, resetToDefaultView, applyTableState
|
|
2163
|
+
const { table, globalFilter, headerMenu, tableViews, setGlobalFilter, resetToDefaultView, applyTableState } = useGridContainer(props, ref);
|
|
2174
2164
|
const [drawerState, dispatch] = React.useReducer(tableReducer, {
|
|
2175
2165
|
isFilterDrawerOpen: false,
|
|
2176
2166
|
isViewsDrawerOpen: false
|
|
2177
2167
|
});
|
|
2178
|
-
return (jsxs(DndProvider,
|
|
2168
|
+
return (jsxs(DndProvider, { backend: HTML5Backend, children: [jsx(GridHeader, { table: table, gridTitle: props.gridTitle, headerMenu: headerMenu, globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, applyTableState: applyTableState, drawerState: drawerState, dispatch: dispatch }), jsxs("div", { 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, { drawerState: drawerState, dispatch: dispatch, table: table }), jsx(ViewsDrawer, { table: table, drawerState: drawerState, dispatch: dispatch, tableViews: tableViews, applyTableState: applyTableState, resetToGridDefaultView: resetToDefaultView, onTableViewSave: props.onTableViewSave, onTableViewDelete: props.onTableViewDelete })] }), jsx(Pagination, { table: table, pageSizeOptions: props.pageSizeOptions })] }));
|
|
2179
2169
|
}
|
|
2180
2170
|
const ForwardedAdvancedTable = React.forwardRef(AdvancedTable);
|
|
2181
2171
|
|
package/package.json
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prt-ts/fluent-react-table-v2",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.46.7-build.1.0",
|
|
4
4
|
"main": "./index.js",
|
|
5
|
-
"types": "./
|
|
5
|
+
"types": "./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.46.7",
|
|
10
10
|
"@fluentui/react-datepicker-compat": ">=0.4.5"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@tanstack/react-table": "
|
|
14
|
-
"react-dnd": "
|
|
15
|
-
"react-dnd-html5-backend": "
|
|
16
|
-
"react-virtual": "
|
|
13
|
+
"@tanstack/react-table": ">=8.10.7",
|
|
14
|
+
"react-dnd": ">=16.0.1",
|
|
15
|
+
"react-dnd-html5-backend": ">=16.0.1",
|
|
16
|
+
"react-virtual": ">=2.10.4"
|
|
17
17
|
},
|
|
18
18
|
"license": "MIT",
|
|
19
19
|
"publishConfig": {
|
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
},
|
|
22
22
|
"author": "Pradeep Raj Thapaliya",
|
|
23
23
|
"bugs": {
|
|
24
|
-
"url": "https://github.com/prt-ts/
|
|
24
|
+
"url": "https://github.com/prt-ts/fluent-extension-packages.git"
|
|
25
25
|
},
|
|
26
|
-
"homepage": "https://github.com/prt-ts/
|
|
27
|
-
"module": "./index.js",
|
|
26
|
+
"homepage": "https://github.com/prt-ts/fluent-extension-packages.git#readme",
|
|
27
|
+
"module": "./index.esm.js",
|
|
28
28
|
"type": "module"
|
|
29
29
|
}
|
|
@@ -7,7 +7,7 @@ type GridHeaderProps<TItem extends object> = {
|
|
|
7
7
|
headerMenu?: JSX.Element | React.ReactNode;
|
|
8
8
|
globalFilter: string;
|
|
9
9
|
setGlobalFilter: (value: string) => void;
|
|
10
|
-
applyTableState: (tableState:
|
|
10
|
+
applyTableState: (tableState: TableState) => boolean;
|
|
11
11
|
drawerState: DrawerTableState;
|
|
12
12
|
dispatch: React.Dispatch<ActionType<string>>;
|
|
13
13
|
};
|
|
@@ -9,6 +9,5 @@ export declare const useGridContainer: <TItem extends object>(props: TableProps<
|
|
|
9
9
|
headerMenu: JSX.Element | React.ReactNode;
|
|
10
10
|
setGlobalFilter: React.Dispatch<React.SetStateAction<string>>;
|
|
11
11
|
resetToDefaultView: () => boolean;
|
|
12
|
-
applyTableState: (tableState:
|
|
13
|
-
getTableState: () => Partial<TableState>;
|
|
12
|
+
applyTableState: (tableState: TableState) => boolean;
|
|
14
13
|
};
|
|
@@ -3,7 +3,7 @@ import { TableState } from '@tanstack/react-table';
|
|
|
3
3
|
type ViewSaveFormProps<TItem extends object> = {
|
|
4
4
|
mode: 'create' | 'edit';
|
|
5
5
|
onSave: TableProps<TItem>['onTableViewSave'];
|
|
6
|
-
getTableState: () =>
|
|
6
|
+
getTableState: () => TableState;
|
|
7
7
|
};
|
|
8
8
|
export declare const ViewSaveForm: <TItem extends object>(props: ViewSaveFormProps<TItem>) => import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
export {};
|
|
@@ -7,9 +7,8 @@ type ViewsDrawerProps<TItem extends object> = {
|
|
|
7
7
|
dispatch: React.Dispatch<ActionType<string>>;
|
|
8
8
|
table: Table<TItem>;
|
|
9
9
|
tableViews: TableView[];
|
|
10
|
-
applyTableState: (tableView:
|
|
10
|
+
applyTableState: (tableView: TableState) => boolean;
|
|
11
11
|
resetToGridDefaultView: () => boolean;
|
|
12
|
-
getTableState: () => Partial<TableState>;
|
|
13
12
|
onTableViewSave?: TableProps<TItem>['onTableViewSave'];
|
|
14
13
|
onTableViewDelete?: TableProps<TItem>['onTableViewDelete'];
|
|
15
14
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Table, TableState } from "@tanstack/react-table";
|
|
2
2
|
export type TableRef<TItem extends object> = {
|
|
3
3
|
table: Table<TItem>;
|
|
4
|
-
getTableState: () =>
|
|
5
|
-
applyTableState: (tableState:
|
|
4
|
+
getTableState: () => TableState;
|
|
5
|
+
applyTableState: (tableState: TableState) => boolean;
|
|
6
6
|
resetToDefaultView: () => boolean;
|
|
7
7
|
};
|
package/vite.config.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: import("vite").
|
|
1
|
+
declare const _default: import("vite").UserConfig;
|
|
2
2
|
export default _default;
|