@bsol-oss/react-datatable5 1.0.7 → 1.0.8

package/dist/index.d.ts

@@ -1,6 +1,8 @@
+/// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { Column } from '@tanstack/react-table';
+import * as _tanstack_table_core from '@tanstack/table-core';
 
 interface DataTableProps<T> {
     children: ReactNode;
@@ -19,6 +21,10 @@ declare const DataTable: <TData>({ columns, url, children, }: DataTableProps<TDa
 
 declare const EditViewButton: () => react_jsx_runtime.JSX.Element;
 
+declare const EditFilterButton: () => react_jsx_runtime.JSX.Element;
+
+declare const EditSortingButton: () => react_jsx_runtime.JSX.Element;
+
 interface PageSizeControlProps {
     pageSizes?: number[];
 }
@@ -35,6 +41,13 @@ declare const Table: ({ children }: TableProps) => react_jsx_runtime.JSX.Element
 
 declare const TableBody: () => react_jsx_runtime.JSX.Element;
 
+interface TableCardContainerProps {
+    children: JSX.Element;
+}
+declare const TableCardContainer: ({ children, ...props }: TableCardContainerProps) => react_jsx_runtime.JSX.Element;
+
+declare const TableCards: () => react_jsx_runtime.JSX.Element;
+
 declare const TableFilter: () => react_jsx_runtime.JSX.Element;
 
 declare const TableFooter: () => react_jsx_runtime.JSX.Element;
@@ -44,10 +57,30 @@ interface TableHeaderProps {
 }
 declare const TableHeader: ({ canResize }: TableHeaderProps) => react_jsx_runtime.JSX.Element;
 
+declare const TableSorter: () => react_jsx_runtime.JSX.Element;
+
+interface useDataFromUrlReturn<T> {
+    data: T;
+    loading: boolean;
+    hasError: boolean;
+    refreshData: () => void;
+}
+interface useDataFromUrlProps<T> {
+    url: string;
+    params?: object;
+    defaultData: T;
+}
+declare const useDataFromUrl: <T>({ url, params, defaultData, }: useDataFromUrlProps<T>) => useDataFromUrlReturn<T>;
+
+declare const useDataTable: () => {
+    table: _tanstack_table_core.Table<any>;
+    refreshData: () => void;
+};
+
 interface PaginationProps {
 }
 declare const TablePagination: ({}: PaginationProps) => react_jsx_runtime.JSX.Element;
 
 declare const TextCell: ({ label, children }: any) => react_jsx_runtime.JSX.Element;
 
-export { type DataResponse, DataTable, type DataTableProps, EditViewButton, PageSizeControl, type PageSizeControlProps, type PaginationProps, ResetFilteringButton, ResetSortingButton, type Result, Table, TableBody, TableFilter, TableFooter, TableHeader, type TableHeaderProps, TablePagination, type TableProps, TextCell };
+export { type DataResponse, DataTable, type DataTableProps, EditFilterButton, EditSortingButton, EditViewButton, PageSizeControl, type PageSizeControlProps, type PaginationProps, ResetFilteringButton, ResetSortingButton, type Result, Table, TableBody, TableCardContainer, type TableCardContainerProps, TableCards, TableFilter, TableFooter, TableHeader, type TableHeaderProps, TablePagination, type TableProps, TableSorter, TextCell, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };

package/dist/index.js

@@ -6,9 +6,9 @@ var reactTable = require('@tanstack/react-table');
 var axios = require('axios');
 var react$1 = require('@chakra-ui/react');
 var io = require('react-icons/io');
-var table = require('@chakra-ui/table');
 var md = require('react-icons/md');
 var icons = require('@chakra-ui/icons');
+var table = require('@chakra-ui/table');
 
 const TableContext = react.createContext({
     table: {},
@@ -109,13 +109,6 @@ const EditViewButton = () => {
                             }) }) })] })] }));
 };
 
-const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
-    const { table } = react.useContext(TableContext);
-    return (jsxRuntime.jsx("select", { value: table.getState().pagination.pageSize, onChange: (e) => {
-            table.setPageSize(Number(e.target.value));
-        }, children: pageSizes.map((pageSize) => (jsxRuntime.jsx("option", { value: pageSize, children: pageSize }, pageSize))) }));
-};
-
 const ResetFilteringButton = () => {
     const { table } = react.useContext(TableContext);
     return (jsxRuntime.jsx(react$1.Button, { onClick: () => {
@@ -123,6 +116,26 @@ const ResetFilteringButton = () => {
         }, children: "Reset Filtering" }));
 };
 
+const useDataTable = () => {
+    const { table, refreshData } = react.useContext(TableContext);
+    return { table, refreshData };
+};
+
+const TableFilter = () => {
+    const { table } = useDataTable();
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getLeafHeaders().map((header) => {
+            return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: header.column.getCanFilter() && (jsxRuntime.jsxs(react$1.Box, { children: [jsxRuntime.jsx(react$1.Text, { children: header.column.id }), jsxRuntime.jsx(react$1.Input, { value: header.column.getFilterValue()
+                                ? String(header.column.getFilterValue())
+                                : "", onChange: (e) => {
+                                header.column.setFilterValue(e.target.value);
+                            } })] })) }));
+        }) }));
+};
+
+const EditFilterButton = () => {
+    return (jsxRuntime.jsxs(react$1.Popover, { placement: "bottom-end", children: [jsxRuntime.jsx(react$1.Tooltip, { label: "Filter", children: jsxRuntime.jsx(react$1.PopoverTrigger, { children: jsxRuntime.jsx(react$1.IconButton, { "aria-label": "filter", icon: jsxRuntime.jsx(md.MdFilterAlt, {}) }) }) }), jsxRuntime.jsxs(react$1.PopoverContent, { width: "auto", children: [jsxRuntime.jsx(react$1.PopoverArrow, {}), jsxRuntime.jsx(react$1.PopoverBody, { children: jsxRuntime.jsxs(react$1.Flex, { flexFlow: "column", gap: "1rem", children: [jsxRuntime.jsx(TableFilter, {}), jsxRuntime.jsx(ResetFilteringButton, {})] }) })] })] }));
+};
+
 const ResetSortingButton = () => {
     const { table } = react.useContext(TableContext);
     return (jsxRuntime.jsx(react$1.Button, { onClick: () => {
@@ -130,9 +143,32 @@ const ResetSortingButton = () => {
         }, children: "Reset Sorting" }));
 };
 
-const useDataTable = () => {
-    const { table, refreshData } = react.useContext(TableContext);
-    return { table, refreshData };
+const TableSorter = () => {
+    const { table } = useDataTable();
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerGroup.headers.map((header) => {
+                return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: header.column.getCanSort() && (jsxRuntime.jsxs(react$1.Flex, { alignItems: "center", gap: "0.5rem", padding: "0.5rem", children: [jsxRuntime.jsx(react$1.Text, { children: header.column.id }), jsxRuntime.jsxs(react$1.Button, { onClick: (e) => {
+                                    header.column.toggleSorting();
+                                }, children: [header.column.getNextSortingOrder() === false && (
+                                    // <Text>To No sort</Text>
+                                    jsxRuntime.jsx(icons.ChevronUpIcon, {})), header.column.getNextSortingOrder() === "asc" && (
+                                    // <Text>To asc</Text>
+                                    jsxRuntime.jsx(icons.UpDownIcon, {})), header.column.getNextSortingOrder() === "desc" && (
+                                    // <Text>To desc</Text>
+                                    jsxRuntime.jsx(icons.ChevronDownIcon, {}))] }), header.column.getIsSorted() && (jsxRuntime.jsx(react$1.Button, { onClick: (e) => {
+                                    header.column.clearSorting();
+                                }, children: jsxRuntime.jsx(icons.CloseIcon, {}) }))] })) }));
+            }) }))) }));
+};
+
+const EditSortingButton = () => {
+    return (jsxRuntime.jsxs(react$1.Popover, { placement: "bottom-end", children: [jsxRuntime.jsx(react$1.Tooltip, { label: "Filter", children: jsxRuntime.jsx(react$1.PopoverTrigger, { children: jsxRuntime.jsx(react$1.IconButton, { "aria-label": "filter", icon: jsxRuntime.jsx(md.MdOutlineSort, {}) }) }) }), jsxRuntime.jsxs(react$1.PopoverContent, { width: "auto", children: [jsxRuntime.jsx(react$1.PopoverArrow, {}), jsxRuntime.jsx(react$1.PopoverBody, { children: jsxRuntime.jsxs(react$1.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(TableSorter, {}), jsxRuntime.jsx(ResetSortingButton, {})] }) })] })] }));
+};
+
+const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
+    const { table } = react.useContext(TableContext);
+    return (jsxRuntime.jsx("select", { value: table.getState().pagination.pageSize, onChange: (e) => {
+            table.setPageSize(Number(e.target.value));
+        }, children: pageSizes.map((pageSize) => (jsxRuntime.jsx("option", { value: pageSize, children: pageSize }, pageSize))) }));
 };
 
 const Table = ({ children }) => {
@@ -145,14 +181,16 @@ const TableBody = () => {
     return (jsxRuntime.jsx(table.Tbody, { children: table$1.getRowModel().rows.map((row) => (jsxRuntime.jsx(table.Tr, { children: row.getVisibleCells().map((cell) => (jsxRuntime.jsx(table.Td, { width: `${cell.column.getSize()}px`, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, crypto.randomUUID()))) }, crypto.randomUUID()))) }));
 };
 
-const TableFilter = () => {
-    const { table } = useDataTable();
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getLeafHeaders().map((header) => {
-            return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: header.column.getCanFilter() && (jsxRuntime.jsxs(react$1.Box, { children: [jsxRuntime.jsx(react$1.Text, { children: header.column.id }), jsxRuntime.jsx(react$1.Input, { value: header.column.getFilterValue()
-                                ? String(header.column.getFilterValue())
-                                : "", onChange: (e) => {
-                                header.column.setFilterValue(e.target.value);
-                            } })] })) }));
+const TableCardContainer = ({ children, ...props }) => {
+    return (jsxRuntime.jsx(react$1.Grid, { gridTemplateColumns: ["1fr", "1fr 1fr", "1fr 1fr 1fr"], gap: "0.5rem", ...props, children: children }));
+};
+
+const TableCards = () => {
+    const { table } = react.useContext(TableContext);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getRowModel().rows.map((row) => {
+            return (jsxRuntime.jsx(react$1.Card, { children: jsxRuntime.jsx(react$1.CardBody, { display: "flex", flexFlow: "column", gap: "0.5rem", children: row.getVisibleCells().map((cell) => {
+                        return (jsxRuntime.jsxs(react$1.Box, { children: [jsxRuntime.jsx(react$1.Text, { children: `${cell.column.id}: ` }), jsxRuntime.jsx(react$1.Box, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) })] }));
+                    }) }) }, crypto.randomUUID()));
         }) }));
 };
 
@@ -200,14 +238,21 @@ const TextCell = ({ label, children }) => {
 };
 
 exports.DataTable = DataTable;
+exports.EditFilterButton = EditFilterButton;
+exports.EditSortingButton = EditSortingButton;
 exports.EditViewButton = EditViewButton;
 exports.PageSizeControl = PageSizeControl;
 exports.ResetFilteringButton = ResetFilteringButton;
 exports.ResetSortingButton = ResetSortingButton;
 exports.Table = Table;
 exports.TableBody = TableBody;
+exports.TableCardContainer = TableCardContainer;
+exports.TableCards = TableCards;
 exports.TableFilter = TableFilter;
 exports.TableFooter = TableFooter;
 exports.TableHeader = TableHeader;
 exports.TablePagination = TablePagination;
+exports.TableSorter = TableSorter;
 exports.TextCell = TextCell;
+exports.useDataFromUrl = useDataFromUrl;
+exports.useDataTable = useDataTable;

package/dist/index.mjs

@@ -2,11 +2,11 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, useState, useEffect, useContext } from 'react';
 import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import axios from 'axios';
-import { Popover, PopoverTrigger, IconButton, PopoverContent, PopoverArrow, PopoverBody, Flex, FormControl, Checkbox, Button, Container, Table as Table$1, Box, Text, Input, Tfoot, Tr as Tr$1, Th, Thead, ButtonGroup, Tooltip } from '@chakra-ui/react';
+import { Popover, PopoverTrigger, IconButton, PopoverContent, PopoverArrow, PopoverBody, Flex, FormControl, Checkbox, Button, Box, Text, Input, Tooltip, Container, Table as Table$1, Grid, Card, CardBody, Tfoot, Tr as Tr$1, Th, Thead, ButtonGroup } from '@chakra-ui/react';
 import { IoMdEye } from 'react-icons/io';
-import { Tbody, Tr, Td } from '@chakra-ui/table';
-import { MdFilterListAlt, MdFirstPage, MdArrowBack, MdArrowForward, MdLastPage } from 'react-icons/md';
+import { MdFilterAlt, MdOutlineSort, MdFilterListAlt, MdFirstPage, MdArrowBack, MdArrowForward, MdLastPage } from 'react-icons/md';
 import { ChevronUpIcon, UpDownIcon, ChevronDownIcon, CloseIcon } from '@chakra-ui/icons';
+import { Tbody, Tr, Td } from '@chakra-ui/table';
 
 const TableContext = createContext({
     table: {},
@@ -107,13 +107,6 @@ const EditViewButton = () => {
                             }) }) })] })] }));
 };
 
-const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
-    const { table } = useContext(TableContext);
-    return (jsx("select", { value: table.getState().pagination.pageSize, onChange: (e) => {
-            table.setPageSize(Number(e.target.value));
-        }, children: pageSizes.map((pageSize) => (jsx("option", { value: pageSize, children: pageSize }, pageSize))) }));
-};
-
 const ResetFilteringButton = () => {
     const { table } = useContext(TableContext);
     return (jsx(Button, { onClick: () => {
@@ -121,6 +114,26 @@ const ResetFilteringButton = () => {
         }, children: "Reset Filtering" }));
 };
 
+const useDataTable = () => {
+    const { table, refreshData } = useContext(TableContext);
+    return { table, refreshData };
+};
+
+const TableFilter = () => {
+    const { table } = useDataTable();
+    return (jsx(Fragment, { children: table.getLeafHeaders().map((header) => {
+            return (jsx(Fragment, { children: header.column.getCanFilter() && (jsxs(Box, { children: [jsx(Text, { children: header.column.id }), jsx(Input, { value: header.column.getFilterValue()
+                                ? String(header.column.getFilterValue())
+                                : "", onChange: (e) => {
+                                header.column.setFilterValue(e.target.value);
+                            } })] })) }));
+        }) }));
+};
+
+const EditFilterButton = () => {
+    return (jsxs(Popover, { placement: "bottom-end", children: [jsx(Tooltip, { label: "Filter", children: jsx(PopoverTrigger, { children: jsx(IconButton, { "aria-label": "filter", icon: jsx(MdFilterAlt, {}) }) }) }), jsxs(PopoverContent, { width: "auto", children: [jsx(PopoverArrow, {}), jsx(PopoverBody, { children: jsxs(Flex, { flexFlow: "column", gap: "1rem", children: [jsx(TableFilter, {}), jsx(ResetFilteringButton, {})] }) })] })] }));
+};
+
 const ResetSortingButton = () => {
     const { table } = useContext(TableContext);
     return (jsx(Button, { onClick: () => {
@@ -128,9 +141,32 @@ const ResetSortingButton = () => {
         }, children: "Reset Sorting" }));
 };
 
-const useDataTable = () => {
-    const { table, refreshData } = useContext(TableContext);
-    return { table, refreshData };
+const TableSorter = () => {
+    const { table } = useDataTable();
+    return (jsx(Fragment, { children: table.getHeaderGroups().map((headerGroup) => (jsx(Fragment, { children: headerGroup.headers.map((header) => {
+                return (jsx(Fragment, { children: header.column.getCanSort() && (jsxs(Flex, { alignItems: "center", gap: "0.5rem", padding: "0.5rem", children: [jsx(Text, { children: header.column.id }), jsxs(Button, { onClick: (e) => {
+                                    header.column.toggleSorting();
+                                }, children: [header.column.getNextSortingOrder() === false && (
+                                    // <Text>To No sort</Text>
+                                    jsx(ChevronUpIcon, {})), header.column.getNextSortingOrder() === "asc" && (
+                                    // <Text>To asc</Text>
+                                    jsx(UpDownIcon, {})), header.column.getNextSortingOrder() === "desc" && (
+                                    // <Text>To desc</Text>
+                                    jsx(ChevronDownIcon, {}))] }), header.column.getIsSorted() && (jsx(Button, { onClick: (e) => {
+                                    header.column.clearSorting();
+                                }, children: jsx(CloseIcon, {}) }))] })) }));
+            }) }))) }));
+};
+
+const EditSortingButton = () => {
+    return (jsxs(Popover, { placement: "bottom-end", children: [jsx(Tooltip, { label: "Filter", children: jsx(PopoverTrigger, { children: jsx(IconButton, { "aria-label": "filter", icon: jsx(MdOutlineSort, {}) }) }) }), jsxs(PopoverContent, { width: "auto", children: [jsx(PopoverArrow, {}), jsx(PopoverBody, { children: jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(TableSorter, {}), jsx(ResetSortingButton, {})] }) })] })] }));
+};
+
+const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
+    const { table } = useContext(TableContext);
+    return (jsx("select", { value: table.getState().pagination.pageSize, onChange: (e) => {
+            table.setPageSize(Number(e.target.value));
+        }, children: pageSizes.map((pageSize) => (jsx("option", { value: pageSize, children: pageSize }, pageSize))) }));
 };
 
 const Table = ({ children }) => {
@@ -143,14 +179,16 @@ const TableBody = () => {
     return (jsx(Tbody, { children: table.getRowModel().rows.map((row) => (jsx(Tr, { children: row.getVisibleCells().map((cell) => (jsx(Td, { width: `${cell.column.getSize()}px`, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, crypto.randomUUID()))) }, crypto.randomUUID()))) }));
 };
 
-const TableFilter = () => {
-    const { table } = useDataTable();
-    return (jsx(Fragment, { children: table.getLeafHeaders().map((header) => {
-            return (jsx(Fragment, { children: header.column.getCanFilter() && (jsxs(Box, { children: [jsx(Text, { children: header.column.id }), jsx(Input, { value: header.column.getFilterValue()
-                                ? String(header.column.getFilterValue())
-                                : "", onChange: (e) => {
-                                header.column.setFilterValue(e.target.value);
-                            } })] })) }));
+const TableCardContainer = ({ children, ...props }) => {
+    return (jsx(Grid, { gridTemplateColumns: ["1fr", "1fr 1fr", "1fr 1fr 1fr"], gap: "0.5rem", ...props, children: children }));
+};
+
+const TableCards = () => {
+    const { table } = useContext(TableContext);
+    return (jsx(Fragment, { children: table.getRowModel().rows.map((row) => {
+            return (jsx(Card, { children: jsx(CardBody, { display: "flex", flexFlow: "column", gap: "0.5rem", children: row.getVisibleCells().map((cell) => {
+                        return (jsxs(Box, { children: [jsx(Text, { children: `${cell.column.id}: ` }), jsx(Box, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) })] }));
+                    }) }) }, crypto.randomUUID()));
         }) }));
 };
 
@@ -197,4 +235,4 @@ const TextCell = ({ label, children }) => {
     return (jsx(Tooltip, { label: label, children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [1, 2, 3], children: children }) }));
 };
 
-export { DataTable, EditViewButton, PageSizeControl, ResetFilteringButton, ResetSortingButton, Table, TableBody, TableFilter, TableFooter, TableHeader, TablePagination, TextCell };
+export { DataTable, EditFilterButton, EditSortingButton, EditViewButton, PageSizeControl, ResetFilteringButton, ResetSortingButton, Table, TableBody, TableCardContainer, TableCards, TableFilter, TableFooter, TableHeader, TablePagination, TableSorter, TextCell, useDataFromUrl, useDataTable };

package/dist/types/index.d.ts

@@ -1,12 +1,19 @@
 export * from "./components/DataTable";
 export * from "./components/EditViewButton";
+export * from "./components/EditFilterButton";
+export * from "./components/EditSortingButton";
 export * from "./components/PageSizeControl";
 export * from "./components/ResetFilteringButton";
 export * from "./components/ResetSortingButton";
 export * from "./components/Table";
 export * from "./components/TableBody";
+export * from "./components/TableCardContainer";
+export * from "./components/TableCards";
 export * from "./components/TableFilter";
 export * from "./components/TableFooter";
 export * from "./components/TableHeader";
+export * from "./components/TableSorter";
+export * from "./components/useDataFromUrl";
+export * from "./components/useDataTable";
 export * from "./components/TablePagination";
 export * from "./components/TextCell";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",