@prt-ts/fluent-react-table-v2 9.40.0-build.4.0 → 9.40.0-build.5.0

package/index.js

@@ -162,7 +162,7 @@ const useGridHeaderStyles = makeStyles({
 });
 
 const GridHeader = (props) => {
-    const { table, gridTitle, globalFilter, setGlobalFilter } = props;
+    const { table, gridTitle, globalFilter, setGlobalFilter, applyTableState, tableViews } = props;
     const styles = useGridHeaderStyles();
     const resetAllFilters = React.useCallback(() => {
         table.setGlobalFilter('');
@@ -188,7 +188,9 @@ const GridHeader = (props) => {
                                 // appearance="subtle"
                                 , { 
                                     // appearance="subtle"
-                                    icon: jsx$1(TextGrammarDismissRegular, {}), "aria-label": "View Menu" }) })), jsx$1(MenuPopover, { children: jsxs$1(MenuList, { children: [jsx$1(MenuItem, Object.assign({ icon: jsx$1(ClearFilterIcon, {}), onClick: resetAllFilters }, { children: "Clear All Filters" })), jsx$1(MenuItem, Object.assign({ icon: jsx$1(ClearFilterIcon, {}), onClick: resetAllGrouping }, { children: "Clear All Grouping" })), jsx$1(MenuItem, Object.assign({ icon: jsx$1(ClearFilterIcon, {}), onClick: clearAllSelection }, { children: "Clear All Selection" })), jsx$1(MenuDivider, {}), jsx$1(MenuItem, Object.assign({ icon: jsx$1(ClearFilterIcon, {}), onClick: props.resetToGridDefaultView }, { children: "Reset to Default View" }))] }) })] }), jsx$1(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 })] }))] })));
+                                    icon: jsx$1(TextGrammarDismissRegular, {}), "aria-label": "View Menu" }) })), jsx$1(MenuPopover, { children: jsxs$1(MenuList, { children: [jsx$1(MenuItem, Object.assign({ icon: jsx$1(ClearFilterIcon, {}), onClick: resetAllFilters }, { children: "Clear All Filters" })), jsx$1(MenuItem, Object.assign({ icon: jsx$1(ClearFilterIcon, {}), onClick: resetAllGrouping }, { children: "Clear All Grouping" })), jsx$1(MenuItem, Object.assign({ icon: jsx$1(ClearFilterIcon, {}), onClick: clearAllSelection }, { children: "Clear All Selection" })), jsx$1(MenuDivider, {}), jsx$1(MenuItem, Object.assign({ icon: jsx$1(ClearFilterIcon, {}), onClick: props.resetToGridDefaultView }, { children: "Reset to Default View" })), tableViews.length > 0 && jsx$1(MenuDivider, {}), tableViews.map((view) => {
+                                            return (jsx$1(MenuItem, Object.assign({ icon: jsx$1(ClearFilterIcon, {}), onClick: () => applyTableState(view.tableState) }, { children: view.viewName }), view.id));
+                                        })] }) })] }), jsx$1(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 })] }))] })));
 };
 // A debounced input react component
 function DebouncedInput({ value: initialValue, onChange, debounce = 500, openFilterDrawer, setFilterDrawerOpen, }) {
@@ -283,7 +285,7 @@ const useGridContainer = (props, ref) => {
     const [expanded, setExpanded] = React.useState((_g = props.expandedState) !== null && _g !== void 0 ? _g : {});
     const [columnPinning, setColumnPinning] = React.useState((_h = props.columnPinningState) !== null && _h !== void 0 ? _h : {});
     const [columnSizing, setColumnSizing] = React.useState({});
-    const [tableViews, setTableViews] = React.useState([]);
+    const tableViews = React.useMemo(() => { var _a; return (_a = props.views) !== null && _a !== void 0 ? _a : []; }, [props.views]);
     const table = useReactTable({
         columns: columns,
         data,
@@ -418,8 +420,7 @@ const useGridContainer = (props, ref) => {
             table,
             getTableState,
             applyTableState,
-            resetToDefaultView,
-            setTableAvailableViews: (views) => setTableViews(views),
+            resetToDefaultView
         };
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -440,6 +441,7 @@ const useGridContainer = (props, ref) => {
         headerMenu,
         setGlobalFilter,
         resetToDefaultView,
+        applyTableState,
     };
 };
 
@@ -16142,7 +16144,7 @@ const useNumberRangeFilterStyles$1 = makeStyles({
     },
 });
 const FilterDateRange = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d;
     const { column } = props;
     const columnFilterValue = column.getFilterValue();
     const min = (_b = (_a = column.getFacetedMinMaxValues()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : undefined;
@@ -16154,11 +16156,7 @@ const FilterDateRange = (props) => {
         column.setFilterValue((old) => [old === null || old === void 0 ? void 0 : old[0], date]);
     };
     const styles = useNumberRangeFilterStyles$1();
-    return (jsxs$1("div", Object.assign({ className: styles.searchContainer }, { children: [jsx$1(Field, Object.assign({ label: 'From Date:', size: "small", className: styles.searchInputField }, { children: jsx$1(DatePicker, { value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) || null, min: min, max: max, onSelectDate: handleMinChange, className: styles.searchInput, placeholder: `Min ${((_e = column.getFacetedMinMaxValues()) === null || _e === void 0 ? void 0 : _e[0])
-                        ? `(${(_g = (_f = column.getFacetedMinMaxValues()) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.toLocaleString()})`
-                        : ''}`, size: 'small', allowTextInput: true }) })), jsx$1(Field, Object.assign({ label: 'To Date:', size: "small", className: styles.searchInputField }, { children: jsx$1(DatePicker, { value: (columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[1]) || null, min: min, max: max, onSelectDate: handleMaxChange, className: styles.searchInput, placeholder: `Max ${((_h = column.getFacetedMinMaxValues()) === null || _h === void 0 ? void 0 : _h[1])
-                        ? `(${(_k = (_j = column.getFacetedMinMaxValues()) === null || _j === void 0 ? void 0 : _j[1]) === null || _k === void 0 ? void 0 : _k.toLocaleString()})`
-                        : ''}`, size: 'small', allowTextInput: true }) }))] })));
+    return (jsxs$1("div", Object.assign({ className: styles.searchContainer }, { children: [jsx$1(Field, Object.assign({ label: 'From Date:', size: "small", className: styles.searchInputField }, { children: jsx$1(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$1(Field, Object.assign({ label: 'To Date:', size: "small", className: styles.searchInputField }, { children: jsx$1(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 }) }))] })));
 };
 
 const useNumberRangeFilterStyles = makeStyles({
@@ -16491,9 +16489,9 @@ const TableContainer = (props) => {
 
 function AdvancedTable(props, ref) {
     useStaticStyles();
-    const { table, globalFilter, headerMenu, setGlobalFilter, resetToDefaultView } = useGridContainer(props, ref);
+    const { table, globalFilter, headerMenu, tableViews, setGlobalFilter, resetToDefaultView, applyTableState } = useGridContainer(props, ref);
     const [isFilterDrawerOpen, setIsFilterDrawerOpen] = React.useState(false);
-    return (jsxs$1(DndProvider, Object.assign({ backend: HTML5Backend }, { children: [jsx$1(GridHeader, { table: table, gridTitle: props.gridTitle, headerMenu: headerMenu, globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, setFilterDrawerOpen: setIsFilterDrawerOpen, openFilterDrawer: isFilterDrawerOpen, resetToGridDefaultView: resetToDefaultView }), jsxs$1("div", Object.assign({ style: { display: 'flex' } }, { children: [jsx$1(TableContainer, { table: table, data: props.data, isLoading: props.isLoading || false, rowSelectionMode: props.rowSelectionMode, noFilterMatchPage: props.noFilterMatchPage, noItemPage: props.noItemPage }), jsx$1(FilterDrawer, { open: isFilterDrawerOpen, setOpen: setIsFilterDrawerOpen, table: table })] })), jsx$1(Pagination, { table: table, pageSizeOptions: props.pageSizeOptions })] })));
+    return (jsxs$1(DndProvider, Object.assign({ backend: HTML5Backend }, { children: [jsx$1(GridHeader, { table: table, gridTitle: props.gridTitle, headerMenu: headerMenu, globalFilter: globalFilter, openFilterDrawer: isFilterDrawerOpen, setGlobalFilter: setGlobalFilter, setFilterDrawerOpen: setIsFilterDrawerOpen, resetToGridDefaultView: resetToDefaultView, tableViews: tableViews, applyTableState: applyTableState }), jsxs$1("div", Object.assign({ style: { display: 'flex' } }, { children: [jsx$1(TableContainer, { table: table, data: props.data, isLoading: props.isLoading || false, rowSelectionMode: props.rowSelectionMode, noFilterMatchPage: props.noFilterMatchPage, noItemPage: props.noItemPage }), jsx$1(FilterDrawer, { open: isFilterDrawerOpen, setOpen: setIsFilterDrawerOpen, table: table })] })), jsx$1(Pagination, { table: table, pageSizeOptions: props.pageSizeOptions })] })));
 }
 const ForwardedAdvancedTable = React.forwardRef(AdvancedTable);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prt-ts/fluent-react-table-v2",
-  "version": "9.40.0-build.4.0",
+  "version": "9.40.0-build.5.0",
   "main": "./index.js",
   "types": "./src\\index.d.ts",
   "peerDependencies": {

package/src/lib/components/grid-header/GridHeader.d.ts

@@ -1,11 +1,14 @@
 import * as React from 'react';
-import { Table } from '@tanstack/react-table';
+import { Table, TableState } from '@tanstack/react-table';
+import { TableView } from '../../types';
 type GridHeaderProps<TItem extends object> = {
     table: Table<TItem>;
     gridTitle: JSX.Element | React.ReactNode;
     headerMenu?: JSX.Element | React.ReactNode;
     globalFilter: string;
     setGlobalFilter: (value: string) => void;
+    tableViews: TableView[];
+    applyTableState: (tableState: Partial<TableState>) => boolean;
     openFilterDrawer: boolean;
     setFilterDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>;
     resetToGridDefaultView: () => boolean;

package/src/lib/components/useGridContainer.d.ts

@@ -1,3 +1,4 @@
+import { TableState } from '@tanstack/react-table';
 import { TableProps } from '..';
 import { TableRef, TableView } from '../types';
 import * as React from 'react';
@@ -8,4 +9,5 @@ export declare const useGridContainer: <TItem extends object>(props: TableProps<
     headerMenu: JSX.Element | React.ReactNode;
     setGlobalFilter: React.Dispatch<React.SetStateAction<string>>;
     resetToDefaultView: () => boolean;
+    applyTableState: (tableState: Partial<TableState>) => boolean;
 };

package/src/lib/index.d.ts

@@ -1,4 +1,4 @@
 export { Table } from "./components";
-export type { TableProps, TableRef } from "./types";
+export type { TableProps, TableRef, TableView } from "./types";
 export type { ColumnDef, TableState } from "@tanstack/react-table";
 export { createColumnHelper } from "@tanstack/react-table";

package/src/lib/types/TableProps.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ExpandedState, GroupingState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
+import { TableView } from "./TableView";
 export type TableProps<TItem extends object> = {
     /**
      * Table Columns definitions.
@@ -79,4 +80,8 @@ export type TableProps<TItem extends object> = {
      * @default defaultNoItemComponent
      */
     noItemPage?: React.ReactNode;
+    /**
+     * Table Views
+     */
+    views?: TableView[];
 };

package/src/lib/types/TableRef.d.ts

@@ -1,9 +1,7 @@
 import { Table, TableState } from "@tanstack/react-table";
-import { TableView } from "./TableView";
 export type TableRef<TItem extends object> = {
     table: Table<TItem>;
     getTableState: () => Partial<TableState>;
     applyTableState: (tableState: Partial<TableState>) => boolean;
     resetToDefaultView: () => boolean;
-    setTableAvailableViews: (views: TableView[]) => void;
 };

package/src/lib/types/TableView.d.ts

@@ -1,4 +1,4 @@
-import { TableState } from "@fluentui/react-components";
+import { TableState } from "@tanstack/react-table";
 export type TableView = {
     id: number;
     viewName: string;