@bsol-oss/react-datatable5 12.0.0-beta.68 → 12.0.0-beta.69

package/dist/index.d.ts

@@ -227,7 +227,7 @@ interface UseDataTableReturn {
 }
 declare const useDataTable: ({ default: { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, }, keyPrefix, }?: UseDataTableProps) => UseDataTableReturn;
 
-interface UseDataTableServerProps extends UseDataTableProps {
+interface UseDataTableServerProps<TData> extends UseDataTableProps {
     /**
      * Delay to send the request if the `refreshData` called multiple times
      *
@@ -240,7 +240,51 @@ interface UseDataTableServerProps extends UseDataTableProps {
      * default: `1000`
      */
     debounceDelay?: number;
-    url: string;
+    /**
+     * The url to fetch the data from.
+     *
+     * Remark:
+     * it is the server responsibility to handle the params and return the data.
+     * especially the pagination and sorting.
+     *
+     * The response must be like this:
+     * ```ts
+     * {
+     *   data: TData[],
+     *   count: number,
+     * }
+     * ```
+     *
+     * Example:
+     * ```ts
+     * const url = "https://jsonplaceholder.typicode.com/posts";
+     * ```
+     *
+     * If not provided, the `queryFn` will be used.
+     *
+     * @default undefined
+     */
+    url?: string;
+    placeholderData?: DataResponse<TData>;
+    /**
+     * The query function to fetch the data from.
+     *
+     * Remark:
+     * it is the server responsibility to handle the params and return the data.
+     * especially the pagination and sorting.
+     *
+     * Example:
+     * ```ts
+     * const queryFn = (params: QueryParams) => {
+     *   return axios.get<DataResponse<TData>>(url, { params });
+     * };
+     * ```
+     *
+     * If not provided, the `url` will be used.
+     *
+     * @default undefined
+     */
+    queryFn?: (params: QueryParams) => Promise<DataResponse<TData>>;
 }
 interface UseDataTableServerReturn<TData> extends UseDataTableReturn {
     query: UseQueryResult<DataResponse<TData>, Error>;
@@ -251,7 +295,14 @@ interface Result<T = unknown> {
 interface DataResponse<T = unknown> extends Result<T> {
     count: number;
 }
-declare const useDataTableServer: <TData>({ url, default: { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, }, keyPrefix, }: UseDataTableServerProps) => UseDataTableServerReturn<TData>;
+interface QueryParams {
+    offset: number;
+    limit: number;
+    sorting: SortingState;
+    where: ColumnFiltersState;
+    searching: string;
+}
+declare const useDataTableServer: <TData>(props: UseDataTableServerProps<TData>) => UseDataTableServerReturn<TData>;
 
 interface DataTableServerProps<TData = unknown> {
     children: ReactNode | ReactNode[];
@@ -283,7 +334,7 @@ interface DataTableServerProps<TData = unknown> {
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;
     query: UseQueryResult<DataResponse<TData>>;
-    url: string;
+    url?: string;
     translate: UseTranslationResponse<any, any>;
     tableLabel?: DataTableLabel;
 }
@@ -738,4 +789,4 @@ declare module "@tanstack/react-table" {
     }
 }
 
-export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerLabels, type DatePickerProps, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, ErrorAlert, type ErrorAlertProps, FilterDialog, FormBody, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, Pagination, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, type TableHeaderTexts, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, ViewDialog, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
+export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerLabels, type DatePickerProps, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, ErrorAlert, type ErrorAlertProps, FilterDialog, FormBody, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, type TableHeaderTexts, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, ViewDialog, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };

package/dist/index.js

@@ -3474,50 +3474,43 @@ const useDataTable = ({ default: { sorting: defaultSorting = [], pagination: def
     };
 };
 
-const useDataTableServer = ({ url, 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: {
+const useDataTableServer = (props) => {
+    const { url, default: defaultProps, keyPrefix, placeholderData, queryFn: customQueryFn, } = props;
+    const { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, } = defaultProps || {};
+    const [sorting, setSorting] = React.useState(defaultSorting || []);
+    const [columnFilters, setColumnFilters] = React.useState(defaultColumnFilters || []); // can set initial column filter state here
+    const [pagination, setPagination] = React.useState(defaultPagination || {
         pageIndex: 0, //initial page index
-        pageSize: 10, //age size
-    },
-    rowSelection: {},
-    columnFilters: [],
-    columnOrder: [],
-    columnVisibility: {},
-    globalFilter: "",
-    density: "sm",
-}, keyPrefix, }) => {
-    const [sorting, setSorting] = React.useState(defaultSorting);
-    const [columnFilters, setColumnFilters] = React.useState(defaultColumnFilters); // can set initial column filter state here
-    const [pagination, setPagination] = React.useState(defaultPagination);
-    const [rowSelection, setRowSelection] = React.useState(defaultRowSelection);
-    const [columnOrder, setColumnOrder] = React.useState(defaultColumnOrder);
-    const [globalFilter, setGlobalFilter] = React.useState(defaultGlobalFilter);
-    const [density, setDensity] = React.useState(defaultDensity);
-    const [columnVisibility, setColumnVisibility] = React.useState(defaultColumnVisibility);
+        pageSize: 10, //default page size
+    });
+    const [rowSelection, setRowSelection] = React.useState(defaultRowSelection || {});
+    const [columnOrder, setColumnOrder] = React.useState(defaultColumnOrder || []);
+    const [globalFilter, setGlobalFilter] = React.useState(defaultGlobalFilter || "");
+    const [density, setDensity] = React.useState(defaultDensity || "sm");
+    const [columnVisibility, setColumnVisibility] = React.useState(defaultColumnVisibility || {});
+    const { pageSize, pageIndex } = pagination;
     const params = {
-        offset: pagination.pageIndex * pagination.pageSize,
-        limit: pagination.pageSize,
+        offset: pageIndex * pageSize,
+        limit: pageSize,
         sorting,
         where: columnFilters,
         searching: globalFilter,
     };
+    const defaultQueryFn = async () => {
+        if (!url) {
+            throw new Error("url is required");
+        }
+        const response = await axios.get(url, {
+            params,
+        });
+        return response.data;
+    };
     const query = reactQuery.useQuery({
         queryKey: [url, JSON.stringify(params)],
-        queryFn: () => {
-            return axios
-                .get(url, {
-                params,
-            })
-                .then((res) => res.data);
-        },
-        placeholderData: {
-            count: 0,
-            data: [],
-        },
+        queryFn: customQueryFn !== undefined
+            ? () => customQueryFn(params)
+            : defaultQueryFn,
+        placeholderData,
     });
     const translate = reactI18next.useTranslation("", { keyPrefix });
     return {

package/dist/index.mjs

@@ -3454,50 +3454,43 @@ const useDataTable = ({ default: { sorting: defaultSorting = [], pagination: def
     };
 };
 
-const useDataTableServer = ({ url, 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: {
+const useDataTableServer = (props) => {
+    const { url, default: defaultProps, keyPrefix, placeholderData, queryFn: customQueryFn, } = props;
+    const { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, } = defaultProps || {};
+    const [sorting, setSorting] = useState(defaultSorting || []);
+    const [columnFilters, setColumnFilters] = useState(defaultColumnFilters || []); // can set initial column filter state here
+    const [pagination, setPagination] = useState(defaultPagination || {
         pageIndex: 0, //initial page index
-        pageSize: 10, //age size
-    },
-    rowSelection: {},
-    columnFilters: [],
-    columnOrder: [],
-    columnVisibility: {},
-    globalFilter: "",
-    density: "sm",
-}, keyPrefix, }) => {
-    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);
+        pageSize: 10, //default page size
+    });
+    const [rowSelection, setRowSelection] = useState(defaultRowSelection || {});
+    const [columnOrder, setColumnOrder] = useState(defaultColumnOrder || []);
+    const [globalFilter, setGlobalFilter] = useState(defaultGlobalFilter || "");
+    const [density, setDensity] = useState(defaultDensity || "sm");
+    const [columnVisibility, setColumnVisibility] = useState(defaultColumnVisibility || {});
+    const { pageSize, pageIndex } = pagination;
     const params = {
-        offset: pagination.pageIndex * pagination.pageSize,
-        limit: pagination.pageSize,
+        offset: pageIndex * pageSize,
+        limit: pageSize,
         sorting,
         where: columnFilters,
         searching: globalFilter,
     };
+    const defaultQueryFn = async () => {
+        if (!url) {
+            throw new Error("url is required");
+        }
+        const response = await axios.get(url, {
+            params,
+        });
+        return response.data;
+    };
     const query = useQuery({
         queryKey: [url, JSON.stringify(params)],
-        queryFn: () => {
-            return axios
-                .get(url, {
-                params,
-            })
-                .then((res) => res.data);
-        },
-        placeholderData: {
-            count: 0,
-            data: [],
-        },
+        queryFn: customQueryFn !== undefined
+            ? () => customQueryFn(params)
+            : defaultQueryFn,
+        placeholderData,
     });
     const translate = useTranslation("", { keyPrefix });
     return {

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

@@ -35,7 +35,7 @@ export interface DataTableServerProps<TData = unknown> {
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;
     query: UseQueryResult<DataResponse<TData>>;
-    url: string;
+    url?: string;
     translate: UseTranslationResponse<any, any>;
     tableLabel?: DataTableLabel;
 }

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

@@ -1,6 +1,7 @@
 import { UseQueryResult } from "@tanstack/react-query";
+import { ColumnFiltersState, SortingState } from "@tanstack/react-table";
 import { UseDataTableProps, UseDataTableReturn } from "./useDataTable";
-export interface UseDataTableServerProps extends UseDataTableProps {
+export interface UseDataTableServerProps<TData> extends UseDataTableProps {
     /**
      * Delay to send the request if the `refreshData` called multiple times
      *
@@ -13,7 +14,51 @@ export interface UseDataTableServerProps extends UseDataTableProps {
      * default: `1000`
      */
     debounceDelay?: number;
-    url: string;
+    /**
+     * The url to fetch the data from.
+     *
+     * Remark:
+     * it is the server responsibility to handle the params and return the data.
+     * especially the pagination and sorting.
+     *
+     * The response must be like this:
+     * ```ts
+     * {
+     *   data: TData[],
+     *   count: number,
+     * }
+     * ```
+     *
+     * Example:
+     * ```ts
+     * const url = "https://jsonplaceholder.typicode.com/posts";
+     * ```
+     *
+     * If not provided, the `queryFn` will be used.
+     *
+     * @default undefined
+     */
+    url?: string;
+    placeholderData?: DataResponse<TData>;
+    /**
+     * The query function to fetch the data from.
+     *
+     * Remark:
+     * it is the server responsibility to handle the params and return the data.
+     * especially the pagination and sorting.
+     *
+     * Example:
+     * ```ts
+     * const queryFn = (params: QueryParams) => {
+     *   return axios.get<DataResponse<TData>>(url, { params });
+     * };
+     * ```
+     *
+     * If not provided, the `url` will be used.
+     *
+     * @default undefined
+     */
+    queryFn?: (params: QueryParams) => Promise<DataResponse<TData>>;
 }
 export interface UseDataTableServerReturn<TData> extends UseDataTableReturn {
     query: UseQueryResult<DataResponse<TData>, Error>;
@@ -24,4 +69,11 @@ export interface Result<T = unknown> {
 export interface DataResponse<T = unknown> extends Result<T> {
     count: number;
 }
-export declare const useDataTableServer: <TData>({ url, default: { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, }, keyPrefix, }: UseDataTableServerProps) => UseDataTableServerReturn<TData>;
+export interface QueryParams {
+    offset: number;
+    limit: number;
+    sorting: SortingState;
+    where: ColumnFiltersState;
+    searching: string;
+}
+export declare const useDataTableServer: <TData>(props: UseDataTableServerProps<TData>) => UseDataTableServerReturn<TData>;

package/package.json

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