@bsol-oss/react-datatable5 2.2.0 → 3.0.0

package/dist/index.d.ts

@@ -122,9 +122,70 @@ interface DataTableProps<TData> {
 }
 declare const DataTable: <TData>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, children, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
 
-interface DataTableServerProps<TData> {
-    children: JSX.Element | JSX.Element[];
+interface UseDataFromUrlReturn<T> {
+    data: T;
+    loading: boolean;
+    hasError: boolean;
+    refreshData: () => void;
+}
+interface UseDataFromUrlProps<T> {
     url: string;
+    params?: object;
+    defaultData: T;
+    disableFirstFetch?: boolean;
+    onFetchSuccess?: (data: T) => void;
+}
+declare const useDataFromUrl: <T>({ url, params, disableFirstFetch, onFetchSuccess, defaultData, }: UseDataFromUrlProps<T>) => UseDataFromUrlReturn<T>;
+
+interface UseDataTableProps {
+    default?: {
+        sorting?: SortingState;
+        columnFilters?: ColumnFiltersState;
+        pagination?: PaginationState;
+        rowSelection?: RowSelectionState;
+        columnOrder?: ColumnOrderState;
+        globalFilter?: string;
+        columnVisibility?: VisibilityState;
+        density?: DensityState;
+    };
+}
+interface UseDataTableReturn {
+    sorting: SortingState;
+    columnFilters: ColumnFiltersState;
+    pagination: PaginationState;
+    rowSelection: RowSelectionState;
+    columnOrder: ColumnOrderState;
+    globalFilter: string;
+    columnVisibility: VisibilityState;
+    density: DensityState;
+    setPagination: OnChangeFn<PaginationState>;
+    setSorting: OnChangeFn<SortingState>;
+    setColumnFilters: OnChangeFn<ColumnFiltersState>;
+    setRowSelection: OnChangeFn<RowSelectionState>;
+    setGlobalFilter: OnChangeFn<string>;
+    setColumnOrder: OnChangeFn<ColumnOrderState>;
+    setDensity: OnChangeFn<DensityState>;
+    setColumnVisibility: OnChangeFn<VisibilityState>;
+}
+declare const useDataTable: ({ default: { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, }, }?: UseDataTableProps) => UseDataTableReturn;
+
+interface UseDataTableServerProps<TData> extends Omit<UseDataFromUrlProps<DataResponse<TData>>, keyof {
+    defaultData: any;
+}>, UseDataTableProps {
+}
+interface UseDataTableServerReturn<TData> extends UseDataFromUrlReturn<DataResponse<TData>>, UseDataTableReturn {
+}
+interface Result<T> {
+    results: T[];
+}
+interface DataResponse<T> extends Result<T> {
+    success: boolean;
+    count: number;
+}
+declare const useDataTableServer: <TData>({ url, onFetchSuccess, default: { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, }, }: UseDataTableServerProps<TData>) => UseDataTableServerReturn<TData>;
+
+interface DataTableServerProps<TData> extends UseDataFromUrlReturn<DataResponse<TData>> {
+    children: JSX.Element | JSX.Element[];
     columns: ColumnDef<TData, any>[];
     enableRowSelection?: boolean;
     enableMultiRowSelection?: boolean;
@@ -146,16 +207,8 @@ interface DataTableServerProps<TData> {
     setColumnOrder: OnChangeFn<ColumnOrderState>;
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;
-    onFetchSuccess?: (response: DataResponse<TData>) => void;
 }
-interface Result<T> {
-    results: T[];
-}
-interface DataResponse<T> extends Result<T> {
-    success: boolean;
-    count: number;
-}
-declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, onFetchSuccess, children, }: DataTableServerProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const DataTableServer: <TData>({ columns, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, data, loading, hasError, refreshData, children, }: DataTableServerProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface TableControlsProps {
     totalText?: string;
@@ -269,53 +322,6 @@ interface TextCellProps extends TextProps {
 }
 declare const TextCell: ({ label, noOfLines, padding, children, tooltipProps, ...props }: TextCellProps) => 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;
-    disableFirstFetch?: boolean;
-    onFetchSuccess?: (data: T) => void;
-}
-declare const useDataFromUrl: <T>({ url, params, disableFirstFetch, onFetchSuccess, defaultData, }: useDataFromUrlProps<T>) => useDataFromUrlReturn<T>;
-
-interface UseDataTableProps {
-    default: {
-        sorting?: SortingState;
-        columnFilters?: ColumnFiltersState;
-        pagination?: PaginationState;
-        rowSelection?: RowSelectionState;
-        columnOrder?: ColumnOrderState;
-        globalFilter?: string;
-        columnVisibility?: VisibilityState;
-        density?: DensityState;
-    };
-}
-interface UseDataTableReturn {
-    sorting: SortingState;
-    columnFilters: ColumnFiltersState;
-    pagination: PaginationState;
-    rowSelection: RowSelectionState;
-    columnOrder: ColumnOrderState;
-    globalFilter: string;
-    columnVisibility: VisibilityState;
-    density: DensityState;
-    setPagination: OnChangeFn<PaginationState>;
-    setSorting: OnChangeFn<SortingState>;
-    setColumnFilters: OnChangeFn<ColumnFiltersState>;
-    setRowSelection: OnChangeFn<RowSelectionState>;
-    setGlobalFilter: OnChangeFn<string>;
-    setColumnOrder: OnChangeFn<ColumnOrderState>;
-    setDensity: OnChangeFn<DensityState>;
-    setColumnVisibility: OnChangeFn<VisibilityState>;
-}
-declare const useDataTable: ({ default: { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, }, }?: UseDataTableProps) => UseDataTableReturn;
-
 declare const useDataTableContext: () => {
     table: _tanstack_table_core.Table<any>;
     refreshData: () => void;
@@ -386,4 +392,4 @@ declare module "@tanstack/react-table" {
     }
 }
 
-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, FilterOptions, type FilterOptionsProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, type PaginationProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, type ResetFilteringButtonProps, ResetSelectionButton, type ResetSelectionButtonProps, ResetSortingButton, type ResetSortingButtonProps, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableLoadingComponent, type TableLoadingComponentProps, TableOrderer, TablePagination, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable, useDataTableContext };
+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, FilterOptions, type FilterOptionsProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, type PaginationProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, type ResetFilteringButtonProps, ResetSelectionButton, type ResetSelectionButtonProps, ResetSortingButton, type ResetSortingButtonProps, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableLoadingComponent, type TableLoadingComponentProps, TableOrderer, TablePagination, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type UseDataFromUrlProps, type UseDataFromUrlReturn, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, useDataFromUrl, useDataTable, useDataTableContext, useDataTableServer };

package/dist/index.js

@@ -9,13 +9,13 @@ var react$1 = require('react');
 var io = require('react-icons/io');
 var reactTable = require('@tanstack/react-table');
 var matchSorterUtils = require('@tanstack/match-sorter-utils');
-var axios = require('axios');
 var table = require('@chakra-ui/table');
 var bs = require('react-icons/bs');
 var gr = require('react-icons/gr');
 var io5 = require('react-icons/io5');
 var reactBeautifulDnd = require('react-beautiful-dnd');
 var fa = require('react-icons/fa');
+var axios = require('axios');
 
 const DensityToggleButton = ({ text, icon = jsxRuntime.jsx(ai.AiOutlineColumnWidth, {}), }) => {
     const { table } = useDataTableContext();
@@ -263,66 +263,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
         }, children: children }));
 };
 
-const useDataFromUrl = ({ url, params = {}, disableFirstFetch = false, onFetchSuccess = () => { }, defaultData, }) => {
-    const [loading, setLoading] = react$1.useState(true);
-    const [hasError, setHasError] = react$1.useState(false);
-    const [data, setData] = react$1.useState(defaultData);
-    const refreshData = async () => {
-        await getData();
-    };
-    const getData = async () => {
-        try {
-            setHasError(false);
-            setLoading(true);
-            const { data } = await axios.get(url, { params: params });
-            console.debug("get DataFromUrl success", data);
-            onFetchSuccess(data);
-            setLoading(false);
-            setData(data);
-        }
-        catch (e) {
-            console.log("Error", e);
-            setLoading(false);
-            setHasError(true);
-        }
-    };
-    react$1.useEffect(() => {
-        if (disableFirstFetch) {
-            return;
-        }
-        getData().catch((e) => {
-            console.error(e);
-        });
-    }, [url]);
-    return { data, loading, hasError, refreshData };
-};
-
-const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, onRowSelect = () => { }, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, onFetchSuccess, children, }) => {
-    const { data, loading, hasError, refreshData } = useDataFromUrl({
-        url: url,
-        defaultData: {
-            success: false,
-            results: [],
-            count: 0,
-        },
-        params: {
-            pagination: JSON.stringify({
-                offset: pagination.pageIndex * pagination.pageSize,
-                rows: pagination.pageSize,
-            }),
-            sorting: JSON.stringify(sorting.length > 0
-                ? { field: sorting[0].id, sort: sorting[0].desc ? "desc" : "asc" }
-                : {}),
-            where: JSON.stringify(columnFilters.reduce((accumulator, filter) => {
-                const obj = {};
-                obj[filter.id] = filter.value;
-                return { ...accumulator, ...obj };
-            }, {})),
-            searching: globalFilter,
-        },
-        disableFirstFetch: true,
-        onFetchSuccess: onFetchSuccess,
-    });
+const DataTableServer = ({ columns, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, onRowSelect = () => { }, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, data, loading, hasError, refreshData, children, }) => {
     const table = reactTable.useReactTable({
         _features: [DensityFeature],
         data: data.results,
@@ -370,9 +311,6 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
         },
         // for tanstack-table ts bug end
     });
-    react$1.useEffect(() => {
-        refreshData();
-    }, [pagination, sorting, columnFilters, globalFilter, url]);
     react$1.useEffect(() => {
         setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
     }, []);
@@ -381,7 +319,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
     }, [table.getState().rowSelection]);
     react$1.useEffect(() => {
         table.resetPagination();
-    }, [sorting, columnFilters, globalFilter, url]);
+    }, [sorting, columnFilters, globalFilter]);
     return (jsxRuntime.jsx(TableContext.Provider, { value: {
             table: { ...table },
             refreshData: refreshData,
@@ -847,6 +785,40 @@ const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, tooltipP
     return (jsxRuntime.jsx(react.Flex, { alignItems: "center", height: "100%", padding: padding, children: jsxRuntime.jsx(react.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, ...props, children: children }) }));
 };
 
+const useDataFromUrl = ({ url, params = {}, disableFirstFetch = false, onFetchSuccess = () => { }, defaultData, }) => {
+    const [loading, setLoading] = react$1.useState(true);
+    const [hasError, setHasError] = react$1.useState(false);
+    const [data, setData] = react$1.useState(defaultData);
+    const refreshData = async () => {
+        await getData();
+    };
+    const getData = async () => {
+        try {
+            setHasError(false);
+            setLoading(true);
+            const { data } = await axios.get(url, { params: params });
+            console.debug("get DataFromUrl success", data);
+            onFetchSuccess(data);
+            setLoading(false);
+            setData(data);
+        }
+        catch (e) {
+            console.log("Error", e);
+            setLoading(false);
+            setHasError(true);
+        }
+    };
+    react$1.useEffect(() => {
+        if (disableFirstFetch) {
+            return;
+        }
+        getData().catch((e) => {
+            console.error(e);
+        });
+    }, [url]);
+    return { data, loading, hasError, refreshData };
+};
+
 const useDataTable = ({ default: { sorting: defaultSorting = [], pagination: defaultPagination = {
     pageIndex: 0, //initial page index
     pageSize: 10, //default page size
@@ -905,6 +877,82 @@ const useDataTable = ({ default: { sorting: defaultSorting = [], pagination: def
     };
 };
 
+const useDataTableServer = ({ url, onFetchSuccess = () => { }, default: { sorting: defaultSorting = [], pagination: defaultPagination = {
+    pageIndex: 0, //initial page index
+    pageSize: 10, //default page size
+}, rowSelection: defaultRowSelection = {}, columnFilters: defaultColumnFilters = [], columnOrder: defaultColumnOrder = [], columnVisibility: defaultColumnVisibility = {}, globalFilter: defaultGlobalFilter = "", density: defaultDensity = "sm", } = {
+    sorting: [],
+    pagination: {
+        pageIndex: 0, //initial page index
+        pageSize: 10, //age size
+    },
+    rowSelection: {},
+    columnFilters: [],
+    columnOrder: [],
+    columnVisibility: {},
+    globalFilter: "",
+    density: "sm",
+}, }) => {
+    const [sorting, setSorting] = react$1.useState(defaultSorting);
+    const [columnFilters, setColumnFilters] = react$1.useState(defaultColumnFilters); // can set initial column filter state here
+    const [pagination, setPagination] = react$1.useState(defaultPagination);
+    const [rowSelection, setRowSelection] = react$1.useState(defaultRowSelection);
+    const [columnOrder, setColumnOrder] = react$1.useState(defaultColumnOrder);
+    const [globalFilter, setGlobalFilter] = react$1.useState(defaultGlobalFilter);
+    const [density, setDensity] = react$1.useState(defaultDensity);
+    const [columnVisibility, setColumnVisibility] = react$1.useState(defaultColumnVisibility);
+    const { data, loading, hasError, refreshData } = useDataFromUrl({
+        url: url,
+        defaultData: {
+            success: false,
+            results: [],
+            count: 0,
+        },
+        params: {
+            pagination: JSON.stringify({
+                offset: pagination.pageIndex * pagination.pageSize,
+                rows: pagination.pageSize,
+            }),
+            sorting: JSON.stringify(sorting.length > 0
+                ? { field: sorting[0].id, sort: sorting[0].desc ? "desc" : "asc" }
+                : {}),
+            where: JSON.stringify(columnFilters.reduce((accumulator, filter) => {
+                const obj = {};
+                obj[filter.id] = filter.value;
+                return { ...accumulator, ...obj };
+            }, {})),
+            searching: globalFilter,
+        },
+        disableFirstFetch: true,
+        onFetchSuccess: onFetchSuccess,
+    });
+    react$1.useEffect(() => {
+        refreshData();
+    }, [pagination, sorting, columnFilters, globalFilter, url]);
+    return {
+        sorting,
+        setSorting,
+        columnFilters,
+        setColumnFilters,
+        pagination,
+        setPagination,
+        rowSelection,
+        setRowSelection,
+        columnOrder,
+        setColumnOrder,
+        globalFilter,
+        setGlobalFilter,
+        density,
+        setDensity,
+        columnVisibility,
+        setColumnVisibility,
+        data,
+        loading,
+        hasError,
+        refreshData,
+    };
+};
+
 const FilterOptions = ({ column }) => {
     const { table } = useDataTableContext();
     const tableColumn = table.getColumn(column);
@@ -971,3 +1019,4 @@ exports.TextCell = TextCell;
 exports.useDataFromUrl = useDataFromUrl;
 exports.useDataTable = useDataTable;
 exports.useDataTableContext = useDataTableContext;
+exports.useDataTableServer = useDataTableServer;

package/dist/index.mjs

@@ -7,13 +7,13 @@ import { createContext, useContext, useEffect, useState } from 'react';
 import { IoMdEye, IoMdCheckbox } from 'react-icons/io';
 import { makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
 import { rankItem } from '@tanstack/match-sorter-utils';
-import axios from 'axios';
 import { Tbody, Tr, Td } from '@chakra-ui/table';
 import { BsExclamationCircleFill } from 'react-icons/bs';
 import { GrAscend, GrDescend } from 'react-icons/gr';
 import { IoReload } from 'react-icons/io5';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { FaGripLinesVertical } from 'react-icons/fa';
+import axios from 'axios';
 
 const DensityToggleButton = ({ text, icon = jsx(AiOutlineColumnWidth, {}), }) => {
     const { table } = useDataTableContext();
@@ -261,66 +261,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
         }, children: children }));
 };
 
-const useDataFromUrl = ({ url, params = {}, disableFirstFetch = false, onFetchSuccess = () => { }, defaultData, }) => {
-    const [loading, setLoading] = useState(true);
-    const [hasError, setHasError] = useState(false);
-    const [data, setData] = useState(defaultData);
-    const refreshData = async () => {
-        await getData();
-    };
-    const getData = async () => {
-        try {
-            setHasError(false);
-            setLoading(true);
-            const { data } = await axios.get(url, { params: params });
-            console.debug("get DataFromUrl success", data);
-            onFetchSuccess(data);
-            setLoading(false);
-            setData(data);
-        }
-        catch (e) {
-            console.log("Error", e);
-            setLoading(false);
-            setHasError(true);
-        }
-    };
-    useEffect(() => {
-        if (disableFirstFetch) {
-            return;
-        }
-        getData().catch((e) => {
-            console.error(e);
-        });
-    }, [url]);
-    return { data, loading, hasError, refreshData };
-};
-
-const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, onRowSelect = () => { }, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, onFetchSuccess, children, }) => {
-    const { data, loading, hasError, refreshData } = useDataFromUrl({
-        url: url,
-        defaultData: {
-            success: false,
-            results: [],
-            count: 0,
-        },
-        params: {
-            pagination: JSON.stringify({
-                offset: pagination.pageIndex * pagination.pageSize,
-                rows: pagination.pageSize,
-            }),
-            sorting: JSON.stringify(sorting.length > 0
-                ? { field: sorting[0].id, sort: sorting[0].desc ? "desc" : "asc" }
-                : {}),
-            where: JSON.stringify(columnFilters.reduce((accumulator, filter) => {
-                const obj = {};
-                obj[filter.id] = filter.value;
-                return { ...accumulator, ...obj };
-            }, {})),
-            searching: globalFilter,
-        },
-        disableFirstFetch: true,
-        onFetchSuccess: onFetchSuccess,
-    });
+const DataTableServer = ({ columns, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, onRowSelect = () => { }, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, data, loading, hasError, refreshData, children, }) => {
     const table = useReactTable({
         _features: [DensityFeature],
         data: data.results,
@@ -368,9 +309,6 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
         },
         // for tanstack-table ts bug end
     });
-    useEffect(() => {
-        refreshData();
-    }, [pagination, sorting, columnFilters, globalFilter, url]);
     useEffect(() => {
         setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
     }, []);
@@ -379,7 +317,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
     }, [table.getState().rowSelection]);
     useEffect(() => {
         table.resetPagination();
-    }, [sorting, columnFilters, globalFilter, url]);
+    }, [sorting, columnFilters, globalFilter]);
     return (jsx(TableContext.Provider, { value: {
             table: { ...table },
             refreshData: refreshData,
@@ -845,6 +783,40 @@ const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, tooltipP
     return (jsx(Flex, { alignItems: "center", height: "100%", padding: padding, children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, ...props, children: children }) }));
 };
 
+const useDataFromUrl = ({ url, params = {}, disableFirstFetch = false, onFetchSuccess = () => { }, defaultData, }) => {
+    const [loading, setLoading] = useState(true);
+    const [hasError, setHasError] = useState(false);
+    const [data, setData] = useState(defaultData);
+    const refreshData = async () => {
+        await getData();
+    };
+    const getData = async () => {
+        try {
+            setHasError(false);
+            setLoading(true);
+            const { data } = await axios.get(url, { params: params });
+            console.debug("get DataFromUrl success", data);
+            onFetchSuccess(data);
+            setLoading(false);
+            setData(data);
+        }
+        catch (e) {
+            console.log("Error", e);
+            setLoading(false);
+            setHasError(true);
+        }
+    };
+    useEffect(() => {
+        if (disableFirstFetch) {
+            return;
+        }
+        getData().catch((e) => {
+            console.error(e);
+        });
+    }, [url]);
+    return { data, loading, hasError, refreshData };
+};
+
 const useDataTable = ({ default: { sorting: defaultSorting = [], pagination: defaultPagination = {
     pageIndex: 0, //initial page index
     pageSize: 10, //default page size
@@ -903,6 +875,82 @@ const useDataTable = ({ default: { sorting: defaultSorting = [], pagination: def
     };
 };
 
+const useDataTableServer = ({ url, onFetchSuccess = () => { }, default: { sorting: defaultSorting = [], pagination: defaultPagination = {
+    pageIndex: 0, //initial page index
+    pageSize: 10, //default page size
+}, rowSelection: defaultRowSelection = {}, columnFilters: defaultColumnFilters = [], columnOrder: defaultColumnOrder = [], columnVisibility: defaultColumnVisibility = {}, globalFilter: defaultGlobalFilter = "", density: defaultDensity = "sm", } = {
+    sorting: [],
+    pagination: {
+        pageIndex: 0, //initial page index
+        pageSize: 10, //age size
+    },
+    rowSelection: {},
+    columnFilters: [],
+    columnOrder: [],
+    columnVisibility: {},
+    globalFilter: "",
+    density: "sm",
+}, }) => {
+    const [sorting, setSorting] = useState(defaultSorting);
+    const [columnFilters, setColumnFilters] = useState(defaultColumnFilters); // can set initial column filter state here
+    const [pagination, setPagination] = useState(defaultPagination);
+    const [rowSelection, setRowSelection] = useState(defaultRowSelection);
+    const [columnOrder, setColumnOrder] = useState(defaultColumnOrder);
+    const [globalFilter, setGlobalFilter] = useState(defaultGlobalFilter);
+    const [density, setDensity] = useState(defaultDensity);
+    const [columnVisibility, setColumnVisibility] = useState(defaultColumnVisibility);
+    const { data, loading, hasError, refreshData } = useDataFromUrl({
+        url: url,
+        defaultData: {
+            success: false,
+            results: [],
+            count: 0,
+        },
+        params: {
+            pagination: JSON.stringify({
+                offset: pagination.pageIndex * pagination.pageSize,
+                rows: pagination.pageSize,
+            }),
+            sorting: JSON.stringify(sorting.length > 0
+                ? { field: sorting[0].id, sort: sorting[0].desc ? "desc" : "asc" }
+                : {}),
+            where: JSON.stringify(columnFilters.reduce((accumulator, filter) => {
+                const obj = {};
+                obj[filter.id] = filter.value;
+                return { ...accumulator, ...obj };
+            }, {})),
+            searching: globalFilter,
+        },
+        disableFirstFetch: true,
+        onFetchSuccess: onFetchSuccess,
+    });
+    useEffect(() => {
+        refreshData();
+    }, [pagination, sorting, columnFilters, globalFilter, url]);
+    return {
+        sorting,
+        setSorting,
+        columnFilters,
+        setColumnFilters,
+        pagination,
+        setPagination,
+        rowSelection,
+        setRowSelection,
+        columnOrder,
+        setColumnOrder,
+        globalFilter,
+        setGlobalFilter,
+        density,
+        setDensity,
+        columnVisibility,
+        setColumnVisibility,
+        data,
+        loading,
+        hasError,
+        refreshData,
+    };
+};
+
 const FilterOptions = ({ column }) => {
     const { table } = useDataTableContext();
     const tableColumn = table.getColumn(column);
@@ -933,4 +981,4 @@ const GlobalFilter = ({ icon = MdSearch }) => {
                         } })] }) }) }));
 };
 
-export { DataTable, DataTableServer, DefaultTable, DensityToggleButton, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, FilterOptions, GlobalFilter, PageSizeControl, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableOrderer, TablePagination, TableSelector, TableSorter, TableViewer, TextCell, useDataFromUrl, useDataTable, useDataTableContext };
+export { DataTable, DataTableServer, DefaultTable, DensityToggleButton, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, FilterOptions, GlobalFilter, PageSizeControl, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableOrderer, TablePagination, TableSelector, TableSorter, TableViewer, TextCell, useDataFromUrl, useDataTable, useDataTableContext, useDataTableServer };

package/dist/types/components/DataTable/DataTableServer.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import { ColumnDef, ColumnFiltersState, ColumnOrderState, OnChangeFn, PaginationState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
 import { DensityState } from "../Controls/DensityFeature";
-export interface DataTableServerProps<TData> {
+import { UseDataFromUrlReturn } from "./useDataFromUrl";
+import { DataResponse } from "./useDataTableServer";
+export interface DataTableServerProps<TData> extends UseDataFromUrlReturn<DataResponse<TData>> {
     children: JSX.Element | JSX.Element[];
-    url: string;
     columns: ColumnDef<TData, any>[];
     enableRowSelection?: boolean;
     enableMultiRowSelection?: boolean;
@@ -25,13 +26,5 @@ export interface DataTableServerProps<TData> {
     setColumnOrder: OnChangeFn<ColumnOrderState>;
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;
-    onFetchSuccess?: (response: DataResponse<TData>) => void;
 }
-export interface Result<T> {
-    results: T[];
-}
-export interface DataResponse<T> extends Result<T> {
-    success: boolean;
-    count: number;
-}
-export declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, onFetchSuccess, children, }: DataTableServerProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTableServer: <TData>({ columns, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, onRowSelect, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, data, loading, hasError, refreshData, children, }: DataTableServerProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/useDataFromUrl.d.ts

@@ -1,14 +1,14 @@
-export interface useDataFromUrlReturn<T> {
+export interface UseDataFromUrlReturn<T> {
     data: T;
     loading: boolean;
     hasError: boolean;
     refreshData: () => void;
 }
-export interface useDataFromUrlProps<T> {
+export interface UseDataFromUrlProps<T> {
     url: string;
     params?: object;
     defaultData: T;
     disableFirstFetch?: boolean;
     onFetchSuccess?: (data: T) => void;
 }
-export declare const useDataFromUrl: <T>({ url, params, disableFirstFetch, onFetchSuccess, defaultData, }: useDataFromUrlProps<T>) => useDataFromUrlReturn<T>;
+export declare const useDataFromUrl: <T>({ url, params, disableFirstFetch, onFetchSuccess, defaultData, }: UseDataFromUrlProps<T>) => UseDataFromUrlReturn<T>;

package/dist/types/components/DataTable/useDataTable.d.ts

@@ -1,7 +1,7 @@
 import { ColumnFiltersState, ColumnOrderState, OnChangeFn, PaginationState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
 import { DensityState } from "../Controls/DensityFeature";
 export interface UseDataTableProps {
-    default: {
+    default?: {
         sorting?: SortingState;
         columnFilters?: ColumnFiltersState;
         pagination?: PaginationState;

package/dist/types/components/DataTable/useDataTableServer.d.ts

@@ -0,0 +1,16 @@
+import { UseDataFromUrlProps, UseDataFromUrlReturn } from "./useDataFromUrl";
+import { UseDataTableProps, UseDataTableReturn } from "./useDataTable";
+export interface UseDataTableServerProps<TData> extends Omit<UseDataFromUrlProps<DataResponse<TData>>, keyof {
+    defaultData: any;
+}>, UseDataTableProps {
+}
+export interface UseDataTableServerReturn<TData> extends UseDataFromUrlReturn<DataResponse<TData>>, UseDataTableReturn {
+}
+export interface Result<T> {
+    results: T[];
+}
+export interface DataResponse<T> extends Result<T> {
+    success: boolean;
+    count: number;
+}
+export declare const useDataTableServer: <TData>({ url, onFetchSuccess, default: { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, }, }: UseDataTableServerProps<TData>) => UseDataTableServerReturn<TData>;

package/dist/types/index.d.ts

@@ -84,6 +84,7 @@ export * from "./components/DataTable/TableViewer";
 export * from "./components/DataTable/TextCell";
 export * from "./components/DataTable/useDataFromUrl";
 export * from "./components/DataTable/useDataTable";
+export * from "./components/DataTable/useDataTableServer";
 export * from "./components/DataTable/useDataTableContext";
 export * from "./components/Filter/FilterOptions";
 export * from "./components/Filter/GlobalFilter";

package/package.json

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