@bsol-oss/react-datatable5 1.0.61 → 1.0.63

package/dist/index.mjs

@@ -3,15 +3,16 @@ import { makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, get
 import { createContext, useState, useEffect, useContext } from 'react';
 import { rankItem } from '@tanstack/match-sorter-utils';
 import axios from 'axios';
-import { Table as Table$1, Box, FormLabel, Checkbox, Button, Flex, Text, Select, Input, useDisclosure, IconButton, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Grid, Icon, Switch, InputGroup, InputLeftElement, Menu, MenuButton, MenuList, MenuItem, Tag, ButtonGroup, Tfoot, Tr as Tr$1, Th, Thead, Portal, Card, CardBody, Tooltip } from '@chakra-ui/react';
+import { Box, FormLabel, Checkbox, Grid, Flex, Text, Tfoot, Tr as Tr$1, Th, Menu, MenuButton, Thead, Portal, MenuList, MenuItem, IconButton, Button, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, InputGroup, InputLeftElement, Icon, Input, Table as Table$1, Card, CardBody, VStack, FormControl, RangeSlider, RangeSliderTrack, RangeSliderFilledTrack, RangeSliderThumb, WrapItem, Tag, TagLabel, TagCloseButton, Select, ButtonGroup, Switch, Tooltip } from '@chakra-ui/react';
 import { Tbody, Tr, Td } from '@chakra-ui/table';
-import { MdFilterAlt, MdSearch, MdFirstPage, MdArrowBack, MdArrowForward, MdLastPage, MdClose, MdOutlineViewColumn, MdFilterListAlt, MdPushPin, MdCancel, MdSort, MdArrowUpward, MdArrowDownward, MdOutlineMoveDown, MdOutlineSort, MdOutlineChecklist, MdClear } from 'react-icons/md';
-import { IoMdEye, IoMdClose, IoMdCheckbox } from 'react-icons/io';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
-import { FaGripLinesVertical } from 'react-icons/fa';
-import { ChevronDownIcon, CloseIcon, ChevronUpIcon, UpDownIcon } from '@chakra-ui/icons';
+import { MdOutlineViewColumn, MdFilterListAlt, MdPushPin, MdCancel, MdClear, MdFilterAlt, MdOutlineMoveDown, MdOutlineSort, MdClose, MdSearch, MdArrowUpward, MdArrowDownward, MdFirstPage, MdArrowBack, MdArrowForward, MdLastPage, MdOutlineChecklist } from 'react-icons/md';
+import { ChevronUpIcon, ChevronDownIcon, UpDownIcon, CloseIcon } from '@chakra-ui/icons';
+import { GrAscend, GrDescend } from 'react-icons/gr';
 import { AiOutlineColumnWidth } from 'react-icons/ai';
+import { IoMdEye, IoMdCheckbox } from 'react-icons/io';
 import { IoReload } from 'react-icons/io5';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import { FaGripLinesVertical } from 'react-icons/fa';
 
 const TableContext = createContext({
     table: {},
@@ -309,19 +310,6 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
         }, children: children }));
 };
 
-const useDataTable = () => {
-    const { table, refreshData, globalFilter, setGlobalFilter, loading } = useContext(TableContext);
-    return { table, refreshData, globalFilter, setGlobalFilter, loading };
-};
-
-const Table = ({ children, showLoading = false, loadingComponent = jsx(Fragment, { children: "Loading..." }), ...props }) => {
-    const { table, loading } = useDataTable();
-    if (showLoading) {
-        return (jsxs(Fragment, { children: [loading && loadingComponent, !loading && (jsx(Table$1, { width: table.getCenterTotalSize(), overflow: "auto", ...props, children: children }))] }));
-    }
-    return (jsx(Fragment, { children: jsx(Table$1, { width: table.getCenterTotalSize(), overflowX: "auto", ...props, children: children }) }));
-};
-
 const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
     const { table } = useContext(TableContext);
     const SELECTION_BOX_WIDTH = 20;
@@ -371,149 +359,17 @@ const TableRowSelector = ({ index, row, hoveredRow, pinnedBgColor = { light: "gr
                     onChange: row.getToggleSelectedHandler() }) }))] }));
 };
 
-const ResetFilteringButton = ({ text = "Reset Filtering", }) => {
-    const { table } = useDataTable();
-    return (jsx(Button, { onClick: () => {
-            table.resetColumnFilters();
-        }, children: text }));
-};
-
-function Filter({ column }) {
-    const { filterVariant } = column.columnDef.meta ?? {};
-    const displayName = column.columnDef.meta?.displayName ?? column.id;
-    const filterOptions = column.columnDef.meta?.filterOptions ?? [];
-    if (column.columns.length > 0) {
-        return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), column.columns.map((column) => {
-                    return jsx(Filter, { column: column }, column.id);
-                })] }, column.id));
-    }
-    if (!column.getCanFilter()) {
-        return jsx(Fragment, {});
-    }
-    if (filterVariant === "select") {
-        return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(Select, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", placeholder: "Select option", onChange: (e) => {
-                        column.setFilterValue(e.target.value);
-                    }, children: filterOptions.map((option) => {
-                        return (jsx("option", { value: option, children: option }, `${option}`));
-                    }) })] }, column.id));
-    }
-    if (filterVariant === "range") {
-        const filterValue = column.getFilterValue() ?? [
-            undefined,
-            undefined,
-        ];
-        const [min, max] = filterValue;
-        return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsxs(Flex, { gap: "0.5rem", children: [jsx(Input, { type: "number", placeholder: "min", value: min, onChange: (e) => {
-                                column.setFilterValue([Number(e.target.value), max]);
-                            } }), jsx(Input, { type: "number", placeholder: "max", value: max, onChange: (e) => {
-                                column.setFilterValue([min, Number(e.target.value)]);
-                            } })] })] }, column.id));
-    }
-    return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(Input, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", onChange: (e) => {
-                    column.setFilterValue(e.target.value);
-                } })] }, column.id));
-}
-const TableFilter = () => {
-    const { table } = useDataTable();
-    return (jsx(Fragment, { children: table.getAllColumns().map((column) => {
-            return jsx(Filter, { column: column }, column.id);
-        }) }));
-};
-
-const EditFilterButton = ({ text, title = "Edit Filter", closeText = "Close", resetText = "Reset", icon = jsx(MdFilterAlt, {}), ...props }) => {
-    const filterModal = useDisclosure();
-    return (jsxs(Fragment, { children: [!!text === false && (jsx(IconButton, { icon: icon, variant: "ghost", onClick: filterModal.onOpen, "aria-label": "filter", ...props })), !!text !== false && (jsx(Button, { leftIcon: icon, variant: "ghost", onClick: filterModal.onOpen, ...props, children: text })), jsxs(Modal, { isOpen: filterModal.isOpen, onClose: filterModal.onClose, size: ["full", "full", "md", "md"], children: [jsx(ModalOverlay, {}), jsxs(ModalContent, { children: [jsx(ModalHeader, { children: title }), jsx(ModalCloseButton, {}), jsx(ModalBody, { children: jsxs(Flex, { flexFlow: "column", gap: "1rem", children: [jsx(TableFilter, {}), jsx(ResetFilteringButton, { text: resetText })] }) }), jsx(ModalFooter, { children: jsx(Button, { onClick: filterModal.onClose, children: closeText }) })] })] })] }));
-};
-
-const TableViewer = () => {
-    const { table } = useDataTable();
-    const columns = table.getAllLeafColumns();
-    const [columnOrder, setColumnOrder] = useState(columns.map((column, index) => {
-        return column.id;
-    }));
-    const handleDragEnd = (result) => {
-        if (!result.destination)
-            return;
-        const newColumnOrder = Array.from(columnOrder);
-        const [removed] = newColumnOrder.splice(result.source.index, 1);
-        newColumnOrder.splice(result.destination.index, 0, removed);
-        setColumnOrder(newColumnOrder);
-        table.setColumnOrder(newColumnOrder);
-    };
-    return (jsx(Fragment, { children: jsx(DragDropContext, { onDragEnd: handleDragEnd, children: jsx(Droppable, { droppableId: "columns", children: (provided) => (jsxs(Flex, { flexFlow: "column", gap: "0.5rem", ref: provided.innerRef, ...provided.droppableProps, children: [columns.map((column, i) => {
-                            const displayName = column.columnDef.meta === undefined
-                                ? column.id
-                                : column.columnDef.meta.displayName;
-                            return (jsx(Draggable, { draggableId: column.id, index: i, children: (provided) => (jsxs(Grid, { ref: provided.innerRef, ...provided.draggableProps, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", children: [jsx(Flex, { ...provided.dragHandleProps, alignItems: "center", padding: "auto 0 auto 0", children: jsx(Icon, { as: FaGripLinesVertical, color: "gray.400" }) }), jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxs(Box, { children: [" ", displayName] }), jsx(Switch, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() })] })] }, column.id)) }, column.id));
-                        }), provided.placeholder] })) }) }) }));
-};
-
-const EditViewButton = ({ text, icon = jsx(IoMdEye, {}), title = "Edit View", }) => {
-    const viewModel = useDisclosure();
-    return (jsxs(Fragment, { children: [!!text === false && (jsx(IconButton, { icon: icon, variant: "ghost", onClick: viewModel.onOpen, "aria-label": "change sorting" })), !!text !== false && (jsx(Button, { leftIcon: icon, variant: "ghost", onClick: viewModel.onOpen, children: text })), jsxs(Modal, { isOpen: viewModel.isOpen, onClose: viewModel.onClose, size: ["full", "full", "md", "md"], children: [jsx(ModalOverlay, {}), jsxs(ModalContent, { padding: "0 0 1rem 0", children: [jsx(ModalHeader, { children: title }), jsx(ModalCloseButton, {}), jsx(ModalBody, { children: jsx(TableViewer, {}) })] })] })] }));
-};
-
-const GlobalFilter = ({ icon = MdSearch }) => {
-    const { globalFilter, setGlobalFilter } = useDataTable();
-    return (jsx(Fragment, { children: jsx(Box, { children: jsxs(InputGroup, { children: [jsx(InputLeftElement, { pointerEvents: "none", children: jsx(Icon, { as: icon, color: "gray.300" }) }), jsx(Input, { value: globalFilter, onChange: (e) => {
-                            setGlobalFilter(e.target.value);
-                        } })] }) }) }));
-};
-
-const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
-    const { table } = useDataTable();
-    return (jsx(Fragment, { children: jsxs(Menu, { children: [jsx(MenuButton, { as: Button, variant: "ghost", rightIcon: jsx(ChevronDownIcon, {}), gap: "0.5rem", children: table.getState().pagination.pageSize }), jsx(MenuList, { children: pageSizes.map((pageSize) => (jsx(MenuItem, { onClick: () => {
-                            table.setPageSize(Number(pageSize));
-                        }, children: pageSize }, crypto.randomUUID()))) })] }) }));
-};
-
-const RowCountText = () => {
-    const { table } = useContext(TableContext);
-    return jsx(Text, { children: table.getRowCount() });
-};
-
-const TableFilterTags = () => {
-    const { table } = useDataTable();
-    return (jsx(Flex, { gap: "0.5rem", flexFlow: "wrap", children: table.getState().columnFilters.map(({ id, value }, index) => {
-            return (jsxs(Tag, { display: "flex", gap: "0.5rem", alignItems: "center", children: [jsx(Text, { children: `${id}: ${value}` }), jsx(IconButton, { size: "xs", variant: "ghost", icon: jsx(CloseIcon, {}), onClick: () => {
-                            table.setColumnFilters(table.getState().columnFilters.filter((value, curIndex) => {
-                                return curIndex != index;
-                            }));
-                        }, "aria-label": "remove filter" })] }, `${id}-${value}`));
-        }) }));
-};
-
-const TablePagination = ({}) => {
-    const { firstPage, getCanPreviousPage, previousPage, getState, nextPage, getCanNextPage, lastPage, } = useDataTable().table;
-    return (jsxs(ButtonGroup, { isAttached: true, children: [jsx(IconButton, { icon: jsx(MdFirstPage, {}), onClick: () => firstPage(), isDisabled: !getCanPreviousPage(), "aria-label": "first-page", variant: "ghost" }), jsx(IconButton, { icon: jsx(MdArrowBack, {}), onClick: () => previousPage(), isDisabled: !getCanPreviousPage(), "aria-label": "previous-page", variant: "ghost" }), jsx(Button, { variant: "ghost", onClick: () => { }, disabled: !getCanPreviousPage(), children: getState().pagination.pageIndex + 1 }), jsx(IconButton, { onClick: () => nextPage(), isDisabled: !getCanNextPage(), "aria-label": "next-page", variant: "ghost", children: jsx(MdArrowForward, {}) }), jsx(IconButton, { onClick: () => lastPage(), isDisabled: !getCanNextPage(), "aria-label": "last-page", variant: "ghost", children: jsx(MdLastPage, {}) })] }));
-};
-
-const FilterOptions = ({ column }) => {
-    const { table } = useDataTable();
-    const tableColumn = table.getColumn(column);
-    const options = tableColumn?.columnDef.meta?.filterOptions ?? [];
-    return (jsx(Fragment, { children: options.map((option) => {
-            const selected = table.getColumn(column)?.getFilterValue() === option;
-            return (jsxs(Button, { size: "sm", onClick: () => {
-                    if (selected) {
-                        table.setColumnFilters((state) => {
-                            return state.filter((filter) => {
-                                return filter.id !== column;
-                            });
-                        });
-                        return;
-                    }
-                    table.getColumn(column)?.setFilterValue(option);
-                }, variant: selected ? "solid" : "outline", display: 'flex', gap: '0.25rem', children: [option, selected && jsx(MdClose, {})] }, option));
-        }) }));
-};
-
 const TableControls = ({ totalText = "Total:", showFilter = false, fitTableWidth = false, fitTableHeight = false, isMobile = false, children = jsx(Fragment, {}), showFilterName = false, showFilterTags = false, filterOptions = [], }) => {
-    return (jsxs(Grid, { templateRows: "auto auto auto 1fr auto", templateColumns: "1fr 1fr", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", justifySelf: "center", alignSelf: "center", gap: "0.5rem", children: [jsxs(Flex, { justifyContent: "space-between", gridColumn: "1 / span 2", children: [jsx(Box, { children: jsx(EditViewButton, { text: isMobile ? undefined : "View", icon: jsx(MdOutlineViewColumn, {}) }) }), jsx(Flex, { gap: "1rem", justifySelf: "end", children: showFilter && (jsxs(Fragment, { children: [jsx(GlobalFilter, {}), jsx(EditFilterButton, { text: isMobile ? undefined : "Advanced Filter" })] })) })] }), jsx(Flex, { gridColumn: "1 / span 2", flexFlow: 'column', gap: '0.5rem', children: filterOptions.map((column) => {
+    return (jsxs(Grid, { templateRows: "auto auto auto 1fr auto", templateColumns: "1fr 1fr", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", justifySelf: "center", alignSelf: "center", gap: "0.5rem", children: [jsxs(Flex, { justifyContent: "space-between", gridColumn: "1 / span 2", children: [jsx(Box, { children: jsx(EditViewButton, { text: isMobile ? undefined : "View", icon: jsx(MdOutlineViewColumn, {}) }) }), jsx(Flex, { gap: "1rem", justifySelf: "end", children: showFilter && (jsxs(Fragment, { children: [jsx(GlobalFilter, {}), jsx(EditFilterButton, { text: isMobile ? undefined : "Advanced Filter" })] })) })] }), jsx(Flex, { gridColumn: "1 / span 2", flexFlow: "column", gap: "0.5rem", children: filterOptions.map((column) => {
                     return (jsxs(Flex, { alignItems: "center", flexFlow: "wrap", gap: "0.5rem", children: [showFilterName && jsxs(Text, { children: [column, ":"] }), jsx(FilterOptions, { column: column })] }));
                 }) }), jsx(Flex, { gridColumn: "1 / span 2", children: showFilterTags && jsx(TableFilterTags, {}) }), jsx(Box, { overflow: "auto", gridColumn: "1 / span 2", width: "100%", height: "100%", children: children }), jsxs(Flex, { gap: "1rem", alignItems: "center", children: [jsx(PageSizeControl, {}), jsxs(Flex, { children: [jsx(Text, { paddingRight: "0.5rem", children: totalText }), jsx(RowCountText, {})] })] }), jsx(Box, { justifySelf: "end", children: jsx(TablePagination, {}) })] }));
 };
 
+const useDataTable = () => {
+    const { table, refreshData, globalFilter, setGlobalFilter, loading } = useContext(TableContext);
+    return { table, refreshData, globalFilter, setGlobalFilter, loading };
+};
+
 const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
     const table = useDataTable().table;
     const SELECTION_BOX_WIDTH = 20;
@@ -616,9 +472,25 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
                                                         header.column.pin("left");
                                                     }, children: "Pin Column" })), header.column.getIsPinned() && (jsx(MenuItem, { icon: jsx(MdCancel, {}), onClick: () => {
                                                         header.column.pin(false);
-                                                    }, children: "Cancel Pin" })), header.column.getCanSort() && (jsxs(Fragment, { children: [jsx(MenuItem, { icon: jsx(MdSort, {}), onClick: () => {
-                                                                header.column.toggleSorting();
-                                                            }, children: "Toggle Sorting" }), header.column.getIsSorted() && (jsx(MenuItem, { icon: jsx(IoMdClose, {}), onClick: () => {
+                                                    }, children: "Cancel Pin" })), header.column.getCanSort() && (jsxs(Fragment, { children: [jsx(MenuItem, { icon: jsx(GrAscend, {}), onClick: () => {
+                                                                table.setSorting((state) => {
+                                                                    return [
+                                                                        ...state.filter((column) => {
+                                                                            return column.id !== header.id;
+                                                                        }),
+                                                                        { id: header.id, desc: false },
+                                                                    ];
+                                                                });
+                                                            }, children: "Sort Ascending" }), jsx(MenuItem, { icon: jsx(GrDescend, {}), onClick: () => {
+                                                                table.setSorting((state) => {
+                                                                    return [
+                                                                        ...state.filter((column) => {
+                                                                            return column.id !== header.id;
+                                                                        }),
+                                                                        { id: header.id, desc: true },
+                                                                    ];
+                                                                });
+                                                            }, children: "Sort Descending" }), header.column.getIsSorted() && (jsx(MenuItem, { icon: jsx(MdClear, {}), onClick: () => {
                                                                 header.column.clearSorting();
                                                             }, children: "Clear Sorting" }))] }))] }) })] }), canResize && (jsx(Box, { borderRight: "0.2rem solid", borderRightColor: header.column.getIsResizing() ? "gray.700" : "transparent", position: "absolute", right: "0", top: "0", height: "100%", width: "5px", userSelect: "none", style: { touchAction: "none" }, _hover: {
                                     borderRightColor: header.column.getIsResizing()
@@ -641,57 +513,9 @@ const DensityToggleButton = ({ text, icon = jsx(AiOutlineColumnWidth, {}), }) =>
                 }, children: text }))] }));
 };
 
-const ColumnOrderChanger = ({ columns }) => {
-    const [order, setOrder] = useState([]);
-    const [originalOrder, setOriginalOrder] = useState([]);
-    const { table } = useDataTable();
-    const handleChangeOrder = (startIndex, endIndex) => {
-        const newOrder = Array.from(order);
-        const [removed] = newOrder.splice(startIndex, 1);
-        newOrder.splice(endIndex, 0, removed);
-        setOrder(newOrder);
-    };
-    useEffect(() => {
-        setOrder(columns);
-    }, [columns]);
-    useEffect(() => {
-        if (originalOrder.length > 0) {
-            return;
-        }
-        if (columns.length <= 0) {
-            return;
-        }
-        setOriginalOrder(columns);
-    }, [columns]);
-    return (jsxs(Flex, { gap: "0.5rem", flexFlow: "column", children: [jsx(Flex, { gap: "0.5rem", flexFlow: "column", children: order.map((columnId, index) => (jsxs(Flex, { gap: "0.5rem", alignItems: "center", justifyContent: "space-between", children: [jsx(IconButton, { onClick: () => {
-                                const prevIndex = index - 1;
-                                if (prevIndex >= 0) {
-                                    handleChangeOrder(index, prevIndex);
-                                }
-                            }, disabled: index === 0, "aria-label": "", children: jsx(MdArrowUpward, {}) }), table
-                            .getAllFlatColumns()
-                            .filter((column) => {
-                            return column.id === columnId;
-                        })
-                            .map((column) => {
-                            const displayName = column.columnDef.meta === undefined
-                                ? column.id
-                                : column.columnDef.meta.displayName;
-                            return jsx("span", { children: displayName }, column.id);
-                        }), jsx(IconButton, { onClick: () => {
-                                const nextIndex = index + 1;
-                                if (nextIndex < order.length) {
-                                    handleChangeOrder(index, nextIndex);
-                                }
-                            }, disabled: index === order.length - 1, "aria-label": "", children: jsx(MdArrowDownward, {}) })] }, columnId))) }), jsxs(Flex, { gap: "0.25rem", children: [jsx(Button, { onClick: () => {
-                            table.setColumnOrder(order);
-                        }, children: "Apply" }), jsx(Button, { onClick: () => {
-                            table.setColumnOrder(originalOrder);
-                        }, children: "Reset" })] })] }));
-};
-const TableOrderer = () => {
-    const { table } = useDataTable();
-    return (jsx(Fragment, { children: jsx(ColumnOrderChanger, { columns: table.getState().columnOrder }) }));
+const EditFilterButton = ({ text, title = "Edit Filter", closeText = "Close", resetText = "Reset", icon = jsx(MdFilterAlt, {}), ...props }) => {
+    const filterModal = useDisclosure();
+    return (jsxs(Fragment, { children: [!!text === false && (jsx(IconButton, { icon: icon, variant: "ghost", onClick: filterModal.onOpen, "aria-label": "filter", ...props })), !!text !== false && (jsx(Button, { leftIcon: icon, variant: "ghost", onClick: filterModal.onOpen, ...props, children: text })), jsxs(Modal, { isOpen: filterModal.isOpen, onClose: filterModal.onClose, size: ["full", "full", "md", "md"], children: [jsx(ModalOverlay, {}), jsxs(ModalContent, { children: [jsx(ModalHeader, { children: title }), jsx(ModalCloseButton, {}), jsx(ModalBody, { children: jsxs(Flex, { flexFlow: "column", gap: "1rem", children: [jsx(TableFilter, {}), jsx(ResetFilteringButton, { text: resetText })] }) }), jsx(ModalFooter, { children: jsx(Button, { onClick: filterModal.onClose, children: closeText }) })] })] })] }));
 };
 
 const EditOrderButton = ({ text, icon = jsx(MdOutlineMoveDown, {}), title = "Change Order", }) => {
@@ -699,13 +523,6 @@ const EditOrderButton = ({ text, icon = jsx(MdOutlineMoveDown, {}), title = "Cha
     return (jsxs(Fragment, { children: [!!text === false && (jsx(IconButton, { icon: icon, variant: "ghost", onClick: orderModal.onOpen, "aria-label": "change order" })), !!text !== false && (jsx(Button, { leftIcon: icon, variant: "ghost", onClick: orderModal.onOpen, children: text })), jsxs(Modal, { isOpen: orderModal.isOpen, onClose: orderModal.onClose, size: ["full", "full", "md", "md"], children: [jsx(ModalOverlay, {}), jsxs(ModalContent, { padding: "0 0 1rem 0", children: [jsx(ModalHeader, { children: title }), jsx(ModalCloseButton, {}), jsx(ModalBody, { children: jsx(Flex, { flexFlow: "column", gap: "0.25rem", children: jsx(TableOrderer, {}) }) })] })] })] }));
 };
 
-const ResetSortingButton = ({ text = "Reset Sorting", }) => {
-    const { table } = useDataTable();
-    return (jsx(Button, { onClick: () => {
-            table.resetSorting();
-        }, children: text }));
-};
-
 const TableSorter = () => {
     const { table } = useDataTable();
     return (jsx(Fragment, { children: table.getHeaderGroups().map((headerGroup) => (jsx(Fragment, { children: headerGroup.headers.map((header) => {
@@ -731,6 +548,52 @@ const EditSortingButton = ({ text, icon = jsx(MdOutlineSort, {}), title = "Edit
     return (jsxs(Fragment, { children: [!!text === false && (jsx(IconButton, { icon: icon, variant: "ghost", onClick: sortingModal.onOpen, "aria-label": "change sorting" })), !!text !== false && (jsx(Button, { leftIcon: icon, variant: "ghost", onClick: sortingModal.onOpen, children: text })), jsxs(Modal, { isOpen: sortingModal.isOpen, onClose: sortingModal.onClose, size: ["full", "full", "md", "md"], children: [jsx(ModalOverlay, {}), jsxs(ModalContent, { padding: "0 0 1rem 0", children: [jsx(ModalHeader, { children: title }), jsx(ModalCloseButton, {}), jsx(ModalBody, { children: jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(TableSorter, {}), jsx(ResetSortingButton, {})] }) })] })] })] }));
 };
 
+const EditViewButton = ({ text, icon = jsx(IoMdEye, {}), title = "Edit View", }) => {
+    const viewModel = useDisclosure();
+    return (jsxs(Fragment, { children: [!!text === false && (jsx(IconButton, { icon: icon, variant: "ghost", onClick: viewModel.onOpen, "aria-label": "change sorting" })), !!text !== false && (jsx(Button, { leftIcon: icon, variant: "ghost", onClick: viewModel.onOpen, children: text })), jsxs(Modal, { isOpen: viewModel.isOpen, onClose: viewModel.onClose, size: ["full", "full", "md", "md"], children: [jsx(ModalOverlay, {}), jsxs(ModalContent, { padding: "0 0 1rem 0", children: [jsx(ModalHeader, { children: title }), jsx(ModalCloseButton, {}), jsx(ModalBody, { children: jsx(TableViewer, {}) })] })] })] }));
+};
+
+const FilterOptions = ({ column }) => {
+    const { table } = useDataTable();
+    const tableColumn = table.getColumn(column);
+    const options = tableColumn?.columnDef.meta?.filterOptions ?? [];
+    return (jsx(Fragment, { children: options.map((option) => {
+            const selected = table.getColumn(column)?.getFilterValue() === option;
+            return (jsxs(Button, { size: "sm", onClick: () => {
+                    if (selected) {
+                        table.setColumnFilters((state) => {
+                            return state.filter((filter) => {
+                                return filter.id !== column;
+                            });
+                        });
+                        return;
+                    }
+                    table.getColumn(column)?.setFilterValue(option);
+                }, variant: selected ? "solid" : "outline", display: "flex", gap: "0.25rem", children: [option, selected && jsx(MdClose, {})] }, option));
+        }) }));
+};
+
+const GlobalFilter = ({ icon = MdSearch }) => {
+    const { globalFilter, setGlobalFilter } = useDataTable();
+    return (jsx(Fragment, { children: jsx(Box, { children: jsxs(InputGroup, { children: [jsx(InputLeftElement, { pointerEvents: "none", children: jsx(Icon, { as: icon, color: "gray.300" }) }), jsx(Input, { value: globalFilter, onChange: (e) => {
+                            setGlobalFilter(e.target.value);
+                        } })] }) }) }));
+};
+
+const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
+    const { table } = useDataTable();
+    return (jsx(Fragment, { children: jsxs(Menu, { children: [jsx(MenuButton, { as: Button, variant: "ghost", rightIcon: jsx(ChevronDownIcon, {}), gap: "0.5rem", children: table.getState().pagination.pageSize }), jsx(MenuList, { children: pageSizes.map((pageSize) => (jsx(MenuItem, { onClick: () => {
+                            table.setPageSize(Number(pageSize));
+                        }, children: pageSize }, crypto.randomUUID()))) })] }) }));
+};
+
+const ResetFilteringButton = ({ text = "Reset Filtering", }) => {
+    const { table } = useDataTable();
+    return (jsx(Button, { onClick: () => {
+            table.resetColumnFilters();
+        }, children: text }));
+};
+
 const ResetSelectionButton = ({ text = "Reset Selection", }) => {
     const { table } = useDataTable();
     return (jsx(Button, { onClick: () => {
@@ -738,6 +601,26 @@ const ResetSelectionButton = ({ text = "Reset Selection", }) => {
         }, children: text }));
 };
 
+const ResetSortingButton = ({ text = "Reset Sorting", }) => {
+    const { table } = useDataTable();
+    return (jsx(Button, { onClick: () => {
+            table.resetSorting();
+        }, children: text }));
+};
+
+const RowCountText = () => {
+    const { table } = useDataTable();
+    return jsx(Text, { children: table.getRowCount() });
+};
+
+const Table = ({ children, showLoading = false, loadingComponent = jsx(Fragment, { children: "Loading..." }), ...props }) => {
+    const { table, loading } = useDataTable();
+    if (showLoading) {
+        return (jsxs(Fragment, { children: [loading && loadingComponent, !loading && (jsx(Table$1, { width: table.getCenterTotalSize(), overflow: "auto", ...props, children: children }))] }));
+    }
+    return (jsx(Fragment, { children: jsx(Table$1, { width: table.getCenterTotalSize(), overflowX: "auto", ...props, children: children }) }));
+};
+
 const TableCardContainer = ({ children, ...props }) => {
     return (jsx(Grid, { gridTemplateColumns: ["1fr", "1fr 1fr", "1fr 1fr 1fr"], gap: "0.5rem", ...props, children: children }));
 };
@@ -761,11 +644,186 @@ const TableComponent = ({ render = () => {
     return render(table);
 };
 
+const DateRangeFilter = ({ startDate, endDate, setStartDate, setEndDate, }) => {
+    console.log(startDate, endDate, "dflp");
+    return (jsx(Box, { p: '1rem', children: jsxs(VStack, { spacing: 4, children: [jsxs(FormControl, { children: [jsx(FormLabel, { htmlFor: "start-date", children: "Start Date" }), jsx(Input, { id: "start-date", type: "date", value: startDate, onChange: (e) => setStartDate(e.target.value) })] }), jsxs(FormControl, { children: [jsx(FormLabel, { htmlFor: "end-date", children: "End Date" }), jsx(Input, { id: "end-date", type: "date", value: endDate, onChange: (e) => setEndDate(e.target.value) })] })] }) }));
+};
+
+const RangeFilter = ({ range, setRange, defaultValue, min, max, step, }) => {
+    return (jsx(Box, { p: 8, children: jsxs(VStack, { spacing: 4, children: [jsxs(Text, { children: ["Selected Range: ", range[0], " - ", range[1]] }), jsxs(RangeSlider, { "aria-label": ["min", "max"], defaultValue: defaultValue, min: min, max: max, step: step, onChangeEnd: (val) => setRange(val), children: [jsx(RangeSliderTrack, { children: jsx(RangeSliderFilledTrack, {}) }), jsx(RangeSliderThumb, { index: 0 }), jsx(RangeSliderThumb, { index: 1 })] })] }) }));
+};
+
+const TagFilter = ({ availableTags, selectedTags, onTagChange, }) => {
+    const toggleTag = (tag) => {
+        if (selectedTags.includes(tag)) {
+            onTagChange(selectedTags.filter((t) => t !== tag));
+        }
+        else {
+            onTagChange([...selectedTags, tag]);
+        }
+    };
+    return (jsx(Flex, { flexFlow: "wrap", p: "0.5rem", gap: "0.5rem", children: availableTags.map((tag) => (jsx(WrapItem, { children: jsxs(Tag, { size: "lg", variant: selectedTags.includes(tag) ? "solid" : "outline", cursor: "pointer", onClick: () => toggleTag(tag), children: [jsx(TagLabel, { children: tag }), selectedTags.includes(tag) && jsx(TagCloseButton, {})] }) }, tag))) }));
+};
+
+function Filter({ column }) {
+    const { filterVariant } = column.columnDef.meta ?? {};
+    const displayName = column.columnDef.meta?.displayName ?? column.id;
+    const filterOptions = column.columnDef.meta?.filterOptions ?? [];
+    if (column.columns.length > 0) {
+        return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), column.columns.map((column) => {
+                    return jsx(Filter, { column: column }, column.id);
+                })] }, column.id));
+    }
+    if (!column.getCanFilter()) {
+        return jsx(Fragment, {});
+    }
+    if (filterVariant === "select") {
+        return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(Select, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", placeholder: "Select option", onChange: (e) => {
+                        column.setFilterValue(e.target.value);
+                    }, children: filterOptions.map((option) => {
+                        return (jsx("option", { value: option, children: option }, `${option}`));
+                    }) })] }, column.id));
+    }
+    if (filterVariant === "tag") {
+        return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(TagFilter, { availableTags: filterOptions, selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
+                        if (tags.length === 0) {
+                            return column.setFilterValue(undefined);
+                        }
+                        column.setFilterValue(tags);
+                    } })] }, column.id));
+    }
+    if (filterVariant === "boolean") {
+        return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(TagFilter, { availableTags: ["true", "false"], selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
+                        if (tags.length === 0) {
+                            return column.setFilterValue(undefined);
+                        }
+                        column.setFilterValue(tags);
+                    } })] }, column.id));
+    }
+    if (filterVariant === "range") {
+        const filterValue = column.getFilterValue() ?? [
+            undefined,
+            undefined,
+        ];
+        const { min, max, step, defaultValue } = column.columnDef.meta
+            ?.filterRangeConfig ?? {
+            min: 0,
+            max: 100,
+            step: 1,
+            defaultValue: [4, 50],
+        };
+        return (jsx(RangeFilter, { range: filterValue, setRange: function (value) {
+                // throw new Error("Function not implemented.");
+                column.setFilterValue(value);
+            }, defaultValue: defaultValue, min: min, max: max, step: step }));
+    }
+    if (filterVariant === "dateRange") {
+        const [start, end] = column.getFilterValue() ?? [
+            "",
+            "",
+        ];
+        return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(DateRangeFilter, { startDate: start, endDate: end, setStartDate: function (value) {
+                        column.setFilterValue((state) => {
+                            return [value, (state ?? ["", ""])[1]];
+                        });
+                    }, setEndDate: function (value) {
+                        column.setFilterValue((state) => {
+                            return [(state ?? ["", ""])[0], value];
+                        });
+                    } })] }, column.id));
+    }
+    if (filterVariant === "custom") {
+        const renderFilter = column.columnDef.meta?.renderFilter;
+        if (renderFilter === undefined) {
+            throw new Error("renderFilter is undefined");
+        }
+        return jsx(Fragment, { children: renderFilter(column) });
+    }
+    return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(Input, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", onChange: (e) => {
+                    column.setFilterValue(e.target.value);
+                } })] }, column.id));
+}
+const TableFilter = () => {
+    const { table } = useDataTable();
+    return (jsx(Fragment, { children: table.getAllColumns().map((column) => {
+            return jsx(Filter, { column: column }, column.id);
+        }) }));
+};
+
+const TableFilterTags = () => {
+    const { table } = useDataTable();
+    return (jsx(Flex, { gap: "0.5rem", flexFlow: "wrap", children: table.getState().columnFilters.map(({ id, value }, index) => {
+            return (jsxs(Tag, { display: "flex", gap: "0.5rem", alignItems: "center", children: [jsx(Text, { children: `${id}: ${value}` }), jsx(IconButton, { size: "xs", variant: "ghost", icon: jsx(CloseIcon, {}), onClick: () => {
+                            table.setColumnFilters(table.getState().columnFilters.filter((value, curIndex) => {
+                                return curIndex != index;
+                            }));
+                        }, "aria-label": "remove filter" })] }, `${id}-${value}`));
+        }) }));
+};
+
 const TableLoadingComponent = ({ render, }) => {
     const { loading } = useDataTable();
     return jsx(Fragment, { children: render(loading) });
 };
 
+const ColumnOrderChanger = ({ columns }) => {
+    const [order, setOrder] = useState([]);
+    const [originalOrder, setOriginalOrder] = useState([]);
+    const { table } = useDataTable();
+    const handleChangeOrder = (startIndex, endIndex) => {
+        const newOrder = Array.from(order);
+        const [removed] = newOrder.splice(startIndex, 1);
+        newOrder.splice(endIndex, 0, removed);
+        setOrder(newOrder);
+    };
+    useEffect(() => {
+        setOrder(columns);
+    }, [columns]);
+    useEffect(() => {
+        if (originalOrder.length > 0) {
+            return;
+        }
+        if (columns.length <= 0) {
+            return;
+        }
+        setOriginalOrder(columns);
+    }, [columns]);
+    return (jsxs(Flex, { gap: "0.5rem", flexFlow: "column", children: [jsx(Flex, { gap: "0.5rem", flexFlow: "column", children: order.map((columnId, index) => (jsxs(Flex, { gap: "0.5rem", alignItems: "center", justifyContent: "space-between", children: [jsx(IconButton, { onClick: () => {
+                                const prevIndex = index - 1;
+                                if (prevIndex >= 0) {
+                                    handleChangeOrder(index, prevIndex);
+                                }
+                            }, disabled: index === 0, "aria-label": "", children: jsx(MdArrowUpward, {}) }), table
+                            .getAllFlatColumns()
+                            .filter((column) => {
+                            return column.id === columnId;
+                        })
+                            .map((column) => {
+                            const displayName = column.columnDef.meta === undefined
+                                ? column.id
+                                : column.columnDef.meta.displayName;
+                            return jsx("span", { children: displayName }, column.id);
+                        }), jsx(IconButton, { onClick: () => {
+                                const nextIndex = index + 1;
+                                if (nextIndex < order.length) {
+                                    handleChangeOrder(index, nextIndex);
+                                }
+                            }, disabled: index === order.length - 1, "aria-label": "", children: jsx(MdArrowDownward, {}) })] }, columnId))) }), jsxs(Flex, { gap: "0.25rem", children: [jsx(Button, { onClick: () => {
+                            table.setColumnOrder(order);
+                        }, children: "Apply" }), jsx(Button, { onClick: () => {
+                            table.setColumnOrder(originalOrder);
+                        }, children: "Reset" })] })] }));
+};
+const TableOrderer = () => {
+    const { table } = useDataTable();
+    return (jsx(Fragment, { children: jsx(ColumnOrderChanger, { columns: table.getState().columnOrder }) }));
+};
+
+const TablePagination = ({}) => {
+    const { firstPage, getCanPreviousPage, previousPage, getState, nextPage, getCanNextPage, lastPage, } = useDataTable().table;
+    return (jsxs(ButtonGroup, { isAttached: true, children: [jsx(IconButton, { icon: jsx(MdFirstPage, {}), onClick: () => firstPage(), isDisabled: !getCanPreviousPage(), "aria-label": "first-page", variant: "ghost" }), jsx(IconButton, { icon: jsx(MdArrowBack, {}), onClick: () => previousPage(), isDisabled: !getCanPreviousPage(), "aria-label": "previous-page", variant: "ghost" }), jsx(Button, { variant: "ghost", onClick: () => { }, disabled: !getCanPreviousPage(), children: getState().pagination.pageIndex + 1 }), jsx(IconButton, { onClick: () => nextPage(), isDisabled: !getCanNextPage(), "aria-label": "next-page", variant: "ghost", children: jsx(MdArrowForward, {}) }), jsx(IconButton, { onClick: () => lastPage(), isDisabled: !getCanNextPage(), "aria-label": "last-page", variant: "ghost", children: jsx(MdLastPage, {}) })] }));
+};
+
 const ReloadButton = ({ text = "Reload" }) => {
     const { refreshData } = useDataTable();
     return (jsx(Button, { leftIcon: jsx(IoReload, {}), onClick: () => {
@@ -774,7 +832,7 @@ const ReloadButton = ({ text = "Reload" }) => {
 };
 
 const SelectAllRowsToggle = ({ selectAllIcon = jsx(MdOutlineChecklist, {}), clearAllIcon = jsx(MdClear, {}), selectAllText, clearAllText, }) => {
-    const { table } = useContext(TableContext);
+    const { table } = useDataTable();
     return (jsxs(Fragment, { children: [!!selectAllText === false && (jsx(IconButton, { icon: table.getIsAllRowsSelected() ? clearAllIcon : selectAllIcon, variant: "ghost", "aria-label": table.getIsAllRowsSelected() ? clearAllText : selectAllText, onClick: (event) => {
                     table.getToggleAllRowsSelectedHandler()(event);
                 } })), !!selectAllText !== false && (jsx(Button, { leftIcon: table.getIsAllRowsSelected() ? clearAllIcon : selectAllIcon, variant: "ghost", onClick: (event) => {
@@ -789,6 +847,29 @@ const TableSelector = () => {
                 }, "aria-label": "reset selection" }))] }));
 };
 
+const TableViewer = () => {
+    const { table } = useDataTable();
+    const columns = table.getAllLeafColumns();
+    const [columnOrder, setColumnOrder] = useState(columns.map((column, index) => {
+        return column.id;
+    }));
+    const handleDragEnd = (result) => {
+        if (!result.destination)
+            return;
+        const newColumnOrder = Array.from(columnOrder);
+        const [removed] = newColumnOrder.splice(result.source.index, 1);
+        newColumnOrder.splice(result.destination.index, 0, removed);
+        setColumnOrder(newColumnOrder);
+        table.setColumnOrder(newColumnOrder);
+    };
+    return (jsx(Fragment, { children: jsx(DragDropContext, { onDragEnd: handleDragEnd, children: jsx(Droppable, { droppableId: "columns", children: (provided) => (jsxs(Flex, { flexFlow: "column", gap: "0.5rem", ref: provided.innerRef, ...provided.droppableProps, children: [columns.map((column, i) => {
+                            const displayName = column.columnDef.meta === undefined
+                                ? column.id
+                                : column.columnDef.meta.displayName;
+                            return (jsx(Draggable, { draggableId: column.id, index: i, children: (provided) => (jsxs(Grid, { ref: provided.innerRef, ...provided.draggableProps, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", children: [jsx(Flex, { ...provided.dragHandleProps, alignItems: "center", padding: "auto 0 auto 0", children: jsx(Icon, { as: FaGripLinesVertical, color: "gray.400" }) }), jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxs(Box, { children: [" ", displayName] }), jsx(Switch, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() })] })] }, column.id)) }, column.id));
+                        }), provided.placeholder] })) }) }) }));
+};
+
 const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, tooltipProps, ...props }) => {
     if (label) {
         return (jsx(Flex, { alignItems: "center", height: "100%", padding: padding, children: jsx(Tooltip, { label: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", ...tooltipProps, children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, ...props, children: children }) }) }));

package/dist/types/components/Controls/DensityFeature.d.ts

@@ -0,0 +1,23 @@
+import { OnChangeFn, Updater, RowData, TableFeature } from "@tanstack/react-table";
+export type DensityState = "sm" | "md" | "lg";
+export interface DensityTableState {
+    density: DensityState;
+}
+export interface DensityOptions {
+    enableDensity?: boolean;
+    onDensityChange?: OnChangeFn<DensityState>;
+}
+export interface DensityInstance {
+    setDensity: (updater: Updater<DensityState>) => void;
+    toggleDensity: (value?: DensityState) => void;
+    getDensityValue: (value?: DensityState) => number;
+}
+declare module "@tanstack/react-table" {
+    interface TableState extends DensityTableState {
+    }
+    interface TableOptionsResolved<TData extends RowData> extends DensityOptions {
+    }
+    interface Table<TData extends RowData> extends DensityInstance {
+    }
+}
+export declare const DensityFeature: TableFeature<any>;