@bsol-oss/react-datatable5 1.0.49 → 1.0.50

package/README.md

@@ -70,9 +70,17 @@ Example Url generated by the DataTableServer
 GET http://localhost:8333/api/v1/gpt/chat/history/all?pagination={"offset":0,"rows":10}&sorting={}&where={}&searching=hello
 ```
 
+### DefaultTable
+
+```tsx
+<DataTable columns={columns} data={data}>
+  <DefaultTable />
+</DataTable>
+```
+
 ## Development
 
 ```
 npm install
 npm run storybook
-```
+```

package/dist/index.d.ts

@@ -205,6 +205,8 @@ declare const TableComponent: <TData>({ render, }: TableRendererProps<TData>) =>
 
 declare const TableFilter: () => react_jsx_runtime.JSX.Element;
 
+declare const TableFilterTags: () => react_jsx_runtime.JSX.Element;
+
 interface TableFooterProps {
     pinnedBgColor?: {
         light: string;
@@ -264,4 +266,4 @@ declare const useDataTable: () => {
     loading: boolean;
 };
 
-export { type DataResponse, DataTable, type DataTableProps, DataTableServer, type DataTableServerProps, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, EditFilterButton, type EditFilterButtonProps, EditOrderButton, type EditOrderButtonProps, EditSortingButton, type EditSortingButtonProps, EditViewButton, type EditViewButtonProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, type PaginationProps, ResetFilteringButton, type ResetFilteringButtonProps, ResetSelectionButton, type ResetSelectionButtonProps, ResetSortingButton, type ResetSortingButtonProps, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableFilter, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableOrderer, TablePagination, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };
+export { type DataResponse, DataTable, type DataTableProps, DataTableServer, type DataTableServerProps, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, EditFilterButton, type EditFilterButtonProps, EditOrderButton, type EditOrderButtonProps, EditSortingButton, type EditSortingButtonProps, EditViewButton, type EditViewButtonProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, type PaginationProps, ResetFilteringButton, type ResetFilteringButtonProps, ResetSelectionButton, type ResetSelectionButtonProps, ResetSortingButton, type ResetSortingButtonProps, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableOrderer, TablePagination, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };

package/dist/index.js

@@ -8,6 +8,8 @@ var axios = require('axios');
 var react$1 = require('@chakra-ui/react');
 var md = require('react-icons/md');
 var io = require('react-icons/io');
+var reactBeautifulDnd = require('react-beautiful-dnd');
+var fa = require('react-icons/fa');
 var icons = require('@chakra-ui/icons');
 var table = require('@chakra-ui/table');
 var ai = require('react-icons/ai');
@@ -330,12 +332,25 @@ const EditFilterButton = ({ text, title = "Edit Filter", closeText = "Close", re
 
 const TableViewer = () => {
     const { table } = useDataTable();
-    return (jsxRuntime.jsx(react$1.Flex, { flexFlow: "column", gap: "1rem", children: table.getAllLeafColumns().map((column) => {
-            const displayName = column.columnDef.meta === undefined
-                ? column.id
-                : column.columnDef.meta.displayName;
-            return (jsxRuntime.jsxs(react$1.Flex, { flexFlow: "row", gap: "0.5rem", alignItems: "center", children: [jsxRuntime.jsx(react$1.Switch, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), displayName] }));
-        }) }));
+    const columns = table.getAllLeafColumns();
+    const [columnOrder, setColumnOrder] = react.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 (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(reactBeautifulDnd.DragDropContext, { onDragEnd: handleDragEnd, children: jsxRuntime.jsx(reactBeautifulDnd.Droppable, { droppableId: "columns", children: (provided) => (jsxRuntime.jsxs(react$1.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 (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(reactBeautifulDnd.Draggable, { draggableId: column.id, index: i, children: (provided) => (jsxRuntime.jsxs(react$1.Grid, { ref: provided.innerRef, ...provided.draggableProps, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", children: [jsxRuntime.jsx(react$1.Flex, { ...provided.dragHandleProps, alignItems: "center", padding: "auto 0 auto 0", children: jsxRuntime.jsx(react$1.Icon, { as: fa.FaGripLinesVertical, color: "gray.400" }) }), jsxRuntime.jsxs(react$1.Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsxs(react$1.Box, { children: [" ", displayName] }), jsxRuntime.jsx(react$1.Switch, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() })] })] })) }, column.id) }));
+                        }), provided.placeholder] })) }) }) }));
 };
 
 const EditViewButton = ({ text, icon = jsxRuntime.jsx(io.IoMdEye, {}), title = "Edit View", }) => {
@@ -671,6 +686,17 @@ const TableComponent = ({ render = () => {
     return render(table);
 };
 
+const TableFilterTags = () => {
+    const { table } = useDataTable();
+    return (jsxRuntime.jsx(react$1.Flex, { gap: "0.5rem", flexFlow: 'wrap', children: table.getState().columnFilters.map(({ id, value }, index) => {
+            return (jsxRuntime.jsxs(react$1.Tag, { children: [`${id}: ${value}`, jsxRuntime.jsx(react$1.IconButton, { size: "xs", icon: jsxRuntime.jsx(icons.CloseIcon, {}), onClick: () => {
+                            table.setColumnFilters(table.getState().columnFilters.filter((value, curIndex) => {
+                                return curIndex != index;
+                            }));
+                        }, "aria-label": "" })] }));
+        }) }));
+};
+
 const SelectAllRowsToggle = ({ selectAllIcon = jsxRuntime.jsx(md.MdOutlineChecklist, {}), clearAllIcon = jsxRuntime.jsx(md.MdClear, {}), selectAllText, clearAllText, }) => {
     const { table } = react.useContext(TableContext);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!selectAllText === false && (jsxRuntime.jsx(react$1.IconButton, { icon: table.getIsAllRowsSelected() ? clearAllIcon : selectAllIcon, variant: "ghost", "aria-label": table.getIsAllRowsSelected() ? clearAllText : selectAllText, onClick: (event) => {
@@ -714,6 +740,7 @@ exports.TableCardContainer = TableCardContainer;
 exports.TableCards = TableCards;
 exports.TableComponent = TableComponent;
 exports.TableFilter = TableFilter;
+exports.TableFilterTags = TableFilterTags;
 exports.TableFooter = TableFooter;
 exports.TableHeader = TableHeader;
 exports.TableOrderer = TableOrderer;

package/dist/index.mjs

@@ -3,9 +3,11 @@ 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 { Button, Box, Text, Input, useDisclosure, IconButton, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, ModalFooter, Switch, InputGroup, InputLeftElement, Icon, Menu, MenuButton, MenuList, MenuItem, Table as Table$1, FormLabel, Checkbox, Tfoot, Tr as Tr$1, Th, Thead, Portal, ButtonGroup, Grid, Card, CardBody, Tooltip } from '@chakra-ui/react';
+import { Button, Box, Text, Input, useDisclosure, IconButton, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, ModalFooter, Grid, Icon, Switch, InputGroup, InputLeftElement, Menu, MenuButton, MenuList, MenuItem, Table as Table$1, FormLabel, Checkbox, Tfoot, Tr as Tr$1, Th, Thead, Portal, ButtonGroup, Card, CardBody, Tag, Tooltip } from '@chakra-ui/react';
 import { MdFilterAlt, MdSearch, MdFilterListAlt, MdPushPin, MdCancel, MdSort, MdFirstPage, MdArrowBack, MdArrowForward, MdLastPage, MdOutlineViewColumn, 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, ChevronUpIcon, UpDownIcon, CloseIcon } from '@chakra-ui/icons';
 import { Tbody, Tr, Td } from '@chakra-ui/table';
 import { AiOutlineColumnWidth } from 'react-icons/ai';
@@ -328,12 +330,25 @@ const EditFilterButton = ({ text, title = "Edit Filter", closeText = "Close", re
 
 const TableViewer = () => {
     const { table } = useDataTable();
-    return (jsx(Flex, { flexFlow: "column", gap: "1rem", children: table.getAllLeafColumns().map((column) => {
-            const displayName = column.columnDef.meta === undefined
-                ? column.id
-                : column.columnDef.meta.displayName;
-            return (jsxs(Flex, { flexFlow: "row", gap: "0.5rem", alignItems: "center", children: [jsx(Switch, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), displayName] }));
-        }) }));
+    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(Fragment, { children: 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) }));
+                        }), provided.placeholder] })) }) }) }));
 };
 
 const EditViewButton = ({ text, icon = jsx(IoMdEye, {}), title = "Edit View", }) => {
@@ -669,6 +684,17 @@ const TableComponent = ({ render = () => {
     return render(table);
 };
 
+const TableFilterTags = () => {
+    const { table } = useDataTable();
+    return (jsx(Flex, { gap: "0.5rem", flexFlow: 'wrap', children: table.getState().columnFilters.map(({ id, value }, index) => {
+            return (jsxs(Tag, { children: [`${id}: ${value}`, jsx(IconButton, { size: "xs", icon: jsx(CloseIcon, {}), onClick: () => {
+                            table.setColumnFilters(table.getState().columnFilters.filter((value, curIndex) => {
+                                return curIndex != index;
+                            }));
+                        }, "aria-label": "" })] }));
+        }) }));
+};
+
 const SelectAllRowsToggle = ({ selectAllIcon = jsx(MdOutlineChecklist, {}), clearAllIcon = jsx(MdClear, {}), selectAllText, clearAllText, }) => {
     const { table } = useContext(TableContext);
     return (jsxs(Fragment, { children: [!!selectAllText === false && (jsx(IconButton, { icon: table.getIsAllRowsSelected() ? clearAllIcon : selectAllIcon, variant: "ghost", "aria-label": table.getIsAllRowsSelected() ? clearAllText : selectAllText, onClick: (event) => {
@@ -692,4 +718,4 @@ const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, tooltipP
     return (jsx(Box, { padding: padding, children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, ...props, children: children }) }));
 };
 
-export { DataTable, DataTableServer, DefaultTable, DensityToggleButton, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, GlobalFilter, PageSizeControl, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableFilter, TableFooter, TableHeader, TableOrderer, TablePagination, TableSelector, TableSorter, TableViewer, TextCell, useDataFromUrl, useDataTable };
+export { DataTable, DataTableServer, DefaultTable, DensityToggleButton, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, GlobalFilter, PageSizeControl, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableFilter, TableFilterTags, TableFooter, TableHeader, TableOrderer, TablePagination, TableSelector, TableSorter, TableViewer, TextCell, useDataFromUrl, useDataTable };

package/dist/types/components/TableFilterTags.d.ts

@@ -0,0 +1 @@
+export declare const TableFilterTags: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/index.d.ts

@@ -18,6 +18,7 @@ export * from "./components/TableCardContainer";
 export * from "./components/TableCards";
 export * from "./components/TableComponent";
 export * from "./components/TableFilter";
+export * from "./components/TableFilterTags";
 export * from "./components/TableFooter";
 export * from "./components/TableHeader";
 export * from "./components/TableOrderer";
@@ -25,7 +26,6 @@ export * from "./components/TablePagination";
 export * from "./components/TableSelector";
 export * from "./components/TableSorter";
 export * from "./components/TableViewer";
-export * from "./components/TableComponent";
 export * from "./components/TextCell";
 export * from "./components/useDataFromUrl";
 export * from "./components/useDataTable";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "1.0.49",
+  "version": "1.0.50",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -44,6 +44,7 @@
     "axios": "^1.6.8",
     "framer-motion": "^11.0.22",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.0"
   },
@@ -59,6 +60,7 @@
     "@storybook/react-vite": "^8.0.4",
     "@storybook/test": "^8.0.4",
     "@types/react": "^18.2.66",
+    "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",