@bsol-oss/react-datatable5 7.3.0 → 7.3.2

package/dist/index.d.ts

@@ -144,7 +144,66 @@ interface DataTableProps<TData> {
 }
 declare function DataTable<TData = unknown>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, 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> {
+interface DataTableDefaultState {
+    sorting?: SortingState;
+    columnFilters?: ColumnFiltersState;
+    pagination?: PaginationState;
+    rowSelection?: RowSelectionState;
+    columnOrder?: ColumnOrderState;
+    globalFilter?: string;
+    columnVisibility?: VisibilityState;
+    density?: DensityState;
+}
+interface UseDataTableProps {
+    default?: DataTableDefaultState;
+}
+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 extends UseDataTableProps {
+    /**
+     * Delay to send the request if the `refreshData` called multiple times
+     *
+     * default: `true`
+     */
+    debounce?: boolean;
+    /**
+     * The time to wait before sending the request
+     *
+     * default: `1000`
+     */
+    debounceDelay?: number;
+    url: string;
+}
+interface UseDataTableServerReturn<TData> extends UseDataTableReturn {
+    query: UseQueryResult<DataResponse<TData>, Error>;
+}
+interface Result<T = unknown> {
+    data: T[];
+}
+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, }, }: UseDataTableServerProps) => UseDataTableServerReturn<TData>;
+
+interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown>> {
     children: ReactNode | ReactNode[];
     columns: ColumnDef<TData>[];
     enableRowSelection?: boolean;
@@ -169,7 +228,7 @@ interface DataTableServerProps<TData> {
     query: UseQueryResult<TData>;
     url: string;
 }
-declare function DataTableServer<TData = unknown>({ columns, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, children, url, }: DataTableServerProps<TData>): react_jsx_runtime.JSX.Element;
+declare function DataTableServer<TData extends DataResponse = DataResponse<unknown>>({ columns, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, children, url, }: DataTableServerProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface TableBodyProps {
     pinnedBgColor?: {
@@ -307,39 +366,6 @@ interface TextCellProps {
 }
 declare const TextCell: ({ label, containerProps, textProps, children, }: TextCellProps) => react_jsx_runtime.JSX.Element;
 
-interface DataTableDefaultState {
-    sorting?: SortingState;
-    columnFilters?: ColumnFiltersState;
-    pagination?: PaginationState;
-    rowSelection?: RowSelectionState;
-    columnOrder?: ColumnOrderState;
-    globalFilter?: string;
-    columnVisibility?: VisibilityState;
-    density?: DensityState;
-}
-interface UseDataTableProps {
-    default?: DataTableDefaultState;
-}
-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 DataTableContext<TData> {
     table: Table$1<TData>;
     globalFilter: string;
@@ -350,32 +376,6 @@ declare const DataTableContext: React$1.Context<DataTableContext<any>>;
 
 declare const useDataTableContext: <TData>() => DataTableContext<TData>;
 
-interface UseDataTableServerProps extends UseDataTableProps {
-    /**
-     * Delay to send the request if the `refreshData` called multiple times
-     *
-     * default: `true`
-     */
-    debounce?: boolean;
-    /**
-     * The time to wait before sending the request
-     *
-     * default: `1000`
-     */
-    debounceDelay?: number;
-    url: string;
-}
-interface UseDataTableServerReturn<TData> extends UseDataTableReturn {
-    query: UseQueryResult<DataResponse<TData>, Error>;
-}
-interface Result<T> {
-    data: T[];
-}
-interface DataResponse<T> 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, }, }: UseDataTableServerProps) => UseDataTableServerReturn<TData>;
-
 interface GetColumnsConfigs<K extends RowData> {
     schema: JSONSchema7;
     ignore?: K[];
@@ -389,13 +389,14 @@ declare const widthSanityCheck: <K extends unknown>(widthList: number[], ignoreL
 declare const getColumns: <TData extends unknown>({ schema, ignore, width, meta, defaultWidth, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
 
 interface EmptyStateProps {
-    title: string;
-    description: string;
+    query: UseQueryResult;
+    title?: string;
+    description?: string;
 }
 declare const EmptyState: ({ title, description, }: EmptyStateProps) => react_jsx_runtime.JSX.Element;
 
 interface ErrorAlertProps {
-    showMessage: boolean;
+    showMessage?: boolean;
 }
 declare const ErrorAlert: ({ showMessage }: ErrorAlertProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -846,7 +846,7 @@ function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSel
             globalFilter,
             setGlobalFilter,
             type: "server",
-        }, children: jsxRuntime.jsx(DataTableServerContext.Provider, { value: { url }, children: children }) }));
+        }, children: jsxRuntime.jsx(DataTableServerContext.Provider, { value: { url, query }, children: children }) }));
 }
 
 const Checkbox = React__namespace.forwardRef(function Checkbox(props, ref) {
@@ -1113,7 +1113,10 @@ const DefaultTable = ({ showFooter = false, tableProps = {}, tableHeaderProps =
 };
 
 const useDataTableServerContext = () => {
-    return React.useContext(DataTableServerContext);
+    const context = React.useContext(DataTableServerContext);
+    const { query } = context;
+    const isEmpty = (query.data?.count ?? 0) <= 0;
+    return { ...context, isEmpty };
 };
 
 const ReloadButton = ({ text = "Reload", variant = "icon", }) => {
@@ -1501,12 +1504,11 @@ const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth =
 };
 
 const EmptyState = ({ title = "No records", description = "Add a new events to get started or refine your search", }) => {
-    const { query } = useDataTableContext();
-    const { data } = query;
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (data ?? { count: 0 }).count <= 0 && (jsxRuntime.jsx(react.EmptyState.Root, { children: jsxRuntime.jsxs(react.EmptyState.Content, { children: [jsxRuntime.jsx(react.EmptyState.Indicator, { children: jsxRuntime.jsx(hi.HiColorSwatch, {}) }), jsxRuntime.jsxs(react.VStack, { textAlign: "center", children: [jsxRuntime.jsx(react.EmptyState.Title, { children: title }), jsxRuntime.jsx(react.EmptyState.Description, { children: description })] })] }) })) }));
+    const { isEmpty } = useDataTableServerContext();
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isEmpty && (jsxRuntime.jsx(react.EmptyState.Root, { children: jsxRuntime.jsxs(react.EmptyState.Content, { children: [jsxRuntime.jsx(react.EmptyState.Indicator, { children: jsxRuntime.jsx(hi.HiColorSwatch, {}) }), jsxRuntime.jsxs(react.VStack, { textAlign: "center", children: [jsxRuntime.jsx(react.EmptyState.Title, { children: title }), jsxRuntime.jsx(react.EmptyState.Description, { children: description })] })] }) })) }));
 };
 
-const ErrorAlert = ({ showMessage }) => {
+const ErrorAlert = ({ showMessage = true }) => {
     const { query } = useDataTableContext();
     const { isError, error } = query;
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isError && (jsxRuntime.jsxs(react.Alert.Root, { status: "error", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsxs(react.Alert.Content, { children: [jsxRuntime.jsx(react.Alert.Title, { children: error.name }), showMessage && (jsxRuntime.jsx(react.Alert.Description, { children: error.message }))] })] })) }));

package/dist/index.mjs

@@ -826,7 +826,7 @@ function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSel
             globalFilter,
             setGlobalFilter,
             type: "server",
-        }, children: jsx(DataTableServerContext.Provider, { value: { url }, children: children }) }));
+        }, children: jsx(DataTableServerContext.Provider, { value: { url, query }, children: children }) }));
 }
 
 const Checkbox = React.forwardRef(function Checkbox(props, ref) {
@@ -1093,7 +1093,10 @@ const DefaultTable = ({ showFooter = false, tableProps = {}, tableHeaderProps =
 };
 
 const useDataTableServerContext = () => {
-    return useContext(DataTableServerContext);
+    const context = useContext(DataTableServerContext);
+    const { query } = context;
+    const isEmpty = (query.data?.count ?? 0) <= 0;
+    return { ...context, isEmpty };
 };
 
 const ReloadButton = ({ text = "Reload", variant = "icon", }) => {
@@ -1481,12 +1484,11 @@ const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth =
 };
 
 const EmptyState = ({ title = "No records", description = "Add a new events to get started or refine your search", }) => {
-    const { query } = useDataTableContext();
-    const { data } = query;
-    return (jsx(Fragment, { children: (data ?? { count: 0 }).count <= 0 && (jsx(EmptyState$2.Root, { children: jsxs(EmptyState$2.Content, { children: [jsx(EmptyState$2.Indicator, { children: jsx(HiColorSwatch, {}) }), jsxs(VStack, { textAlign: "center", children: [jsx(EmptyState$2.Title, { children: title }), jsx(EmptyState$2.Description, { children: description })] })] }) })) }));
+    const { isEmpty } = useDataTableServerContext();
+    return (jsx(Fragment, { children: isEmpty && (jsx(EmptyState$2.Root, { children: jsxs(EmptyState$2.Content, { children: [jsx(EmptyState$2.Indicator, { children: jsx(HiColorSwatch, {}) }), jsxs(VStack, { textAlign: "center", children: [jsx(EmptyState$2.Title, { children: title }), jsx(EmptyState$2.Description, { children: description })] })] }) })) }));
 };
 
-const ErrorAlert = ({ showMessage }) => {
+const ErrorAlert = ({ showMessage = true }) => {
     const { query } = useDataTableContext();
     const { isError, error } = query;
     return (jsx(Fragment, { children: isError && (jsxs(Alert.Root, { status: "error", children: [jsx(Alert.Indicator, {}), jsxs(Alert.Content, { children: [jsx(Alert.Title, { children: error.name }), showMessage && (jsx(Alert.Description, { children: error.message }))] })] })) }));

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

@@ -2,7 +2,8 @@ import { ReactNode } from "react";
 import { UseQueryResult } from "@tanstack/react-query";
 import { ColumnDef, ColumnFiltersState, ColumnOrderState, OnChangeFn, PaginationState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
 import { DensityState } from "../Controls/DensityFeature";
-export interface DataTableServerProps<TData> {
+import { DataResponse } from "./useDataTableServer";
+export interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown>> {
     children: ReactNode | ReactNode[];
     columns: ColumnDef<TData>[];
     enableRowSelection?: boolean;
@@ -27,4 +28,4 @@ export interface DataTableServerProps<TData> {
     query: UseQueryResult<TData>;
     url: string;
 }
-export declare function DataTableServer<TData = unknown>({ columns, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, children, url, }: DataTableServerProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableServer<TData extends DataResponse = DataResponse<unknown>>({ columns, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, children, url, }: DataTableServerProps<TData>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,7 @@
+import { UseQueryResult } from "@tanstack/react-query";
 export interface EmptyStateProps {
-    title: string;
-    description: string;
+    query: UseQueryResult;
+    title?: string;
+    description?: string;
 }
 export declare const EmptyState: ({ title, description, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
 export interface ErrorAlertProps {
-    showMessage: boolean;
+    showMessage?: boolean;
 }
 export declare const ErrorAlert: ({ showMessage }: ErrorAlertProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/context/DataTableServerContext.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="react" />
-export interface DataTableServerContext {
+import { UseQueryResult } from "@tanstack/react-query";
+import { DataResponse } from "../useDataTableServer";
+export interface DataTableServerContext<T extends DataResponse = DataResponse<unknown>> {
     url: string;
+    query: UseQueryResult<T>;
 }
-export declare const DataTableServerContext: import("react").Context<DataTableServerContext>;
+export declare const DataTableServerContext: import("react").Context<DataTableServerContext<DataResponse<unknown>>>;

package/dist/types/components/DataTable/context/useDataTableServerContext.d.ts

@@ -1,2 +1,5 @@
 import { DataTableServerContext } from "./DataTableServerContext";
-export declare const useDataTableServerContext: () => DataTableServerContext;
+export interface UseDataTableServerContext extends DataTableServerContext {
+    isEmpty: boolean;
+}
+export declare const useDataTableServerContext: () => UseDataTableServerContext;

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

@@ -18,10 +18,10 @@ export interface UseDataTableServerProps extends UseDataTableProps {
 export interface UseDataTableServerReturn<TData> extends UseDataTableReturn {
     query: UseQueryResult<DataResponse<TData>, Error>;
 }
-export interface Result<T> {
+export interface Result<T = unknown> {
     data: T[];
 }
-export interface DataResponse<T> extends Result<T> {
+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, }, }: UseDataTableServerProps) => UseDataTableServerReturn<TData>;

package/package.json

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