@bsol-oss/react-datatable5 12.0.0-beta.6 → 12.0.0-beta.8

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Row, Table as Table$1, OnChangeFn, RowData, Updater, FilterFn, ColumnDef, RowSelectionState, ColumnOrderState, ColumnFiltersState, PaginationState, SortingState, VisibilityState, Column } from '@tanstack/react-table';
+import { Row, RowData, OnChangeFn, Updater, FilterFn, ColumnDef, RowSelectionState, ColumnOrderState, ColumnFiltersState, PaginationState, SortingState, VisibilityState, Table as Table$1, Column } from '@tanstack/react-table';
 import * as React$1 from 'react';
 import React__default, { ReactNode, Dispatch, SetStateAction } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -85,23 +85,6 @@ interface ErrorAlertProps {
 }
 declare const ErrorAlert: ({ showMessage }: ErrorAlertProps) => react_jsx_runtime.JSX.Element;
 
-interface DataTableContext<TData = unknown> {
-    table: Table$1<TData>;
-    globalFilter: string;
-    setGlobalFilter: OnChangeFn<string>;
-    type: "client" | "server";
-    translate: UseTranslationResponse<any, any>;
-}
-declare const DataTableContext: React$1.Context<DataTableContext<unknown>>;
-
-declare const useDataTableContext: <TData>() => DataTableContext<TData>;
-
-interface DataDisplayProps {
-    variant?: "horizontal" | "stats" | "";
-    translate?: UseTranslationResponse<any, any>;
-}
-declare const DataDisplay: ({ variant }: DataDisplayProps) => react_jsx_runtime.JSX.Element;
-
 type DensityState = "sm" | "md" | "lg";
 interface DensityTableState {
     density: DensityState;
@@ -183,6 +166,23 @@ interface DataTableProps<TData = unknown> {
  */
 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, translate, children, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
 
+interface DataTableContext<TData = unknown> extends DataTableProps {
+    table: Table$1<TData>;
+    globalFilter: string;
+    setGlobalFilter: OnChangeFn<string>;
+    type: "client" | "server";
+    translate: UseTranslationResponse<any, any>;
+}
+declare const DataTableContext: React$1.Context<DataTableContext<unknown>>;
+
+declare const useDataTableContext: <TData>() => DataTableContext<TData>;
+
+interface DataDisplayProps {
+    variant?: "horizontal" | "stats" | "";
+    translate?: UseTranslationResponse<any, any>;
+}
+declare const DataDisplay: ({ variant }: DataDisplayProps) => react_jsx_runtime.JSX.Element;
+
 interface DataTableDefaultState {
     sorting?: SortingState;
     columnFilters?: ColumnFiltersState;
@@ -441,6 +441,8 @@ interface GetColumnsConfigs<K extends RowData> {
 declare const widthSanityCheck: <K extends unknown>(widthList: number[], ignoreList: K[], properties: { [key in K as string]?: object | undefined; }) => void;
 declare const getColumns: <TData extends unknown>({ schema, include, ignore, width, meta, defaultWidth, translate, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
 
+declare const TableDataDisplay: () => react_jsx_runtime.JSX.Element;
+
 interface FilterOptionsProps {
     column: string;
 }
@@ -612,4 +614,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 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, FilterOptions, type FilterOptionsProps, 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, 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, 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 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, FilterOptions, type FilterOptionsProps, 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, 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, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, 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

@@ -2814,6 +2814,21 @@ function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSel
             setGlobalFilter,
             type: "client",
             translate,
+            columns,
+            sorting,
+            setSorting,
+            columnFilters,
+            setColumnFilters,
+            pagination,
+            setPagination,
+            rowSelection,
+            setRowSelection,
+            columnOrder,
+            setColumnOrder,
+            density,
+            setDensity,
+            columnVisibility,
+            setColumnVisibility,
         }, children: children }));
 }
 
@@ -2882,6 +2897,21 @@ function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSel
             setGlobalFilter,
             type: "server",
             translate,
+            columns,
+            sorting,
+            setSorting,
+            columnFilters,
+            setColumnFilters,
+            pagination,
+            setPagination,
+            rowSelection,
+            setRowSelection,
+            columnOrder,
+            setColumnOrder,
+            density,
+            setDensity,
+            columnVisibility,
+            setColumnVisibility,
         }, children: jsxRuntime.jsx(DataTableServerContext.Provider, { value: { url, query }, children: children }) }));
 }
 
@@ -3488,6 +3518,52 @@ const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {},
     return columns;
 };
 
+const TableDataDisplay = () => {
+    const { table, columns, translate } = useDataTableContext();
+    const { query } = useDataTableServerContext();
+    const { data } = query;
+    const columnDef = table._getColumnDefs();
+    console.log(columnDef, "glp");
+    console.log(columnDef, columns, table.getState().columnOrder, data, "glp");
+    const columnsMap = Object.fromEntries(columns.map((def) => {
+        return [def.accessorKey, def];
+    }));
+    const columnHeaders = Object.keys(columnsMap);
+    const columnWidths = columns
+        .map(({ size }) => {
+        if (!!size === false) {
+            return "1fr";
+        }
+        return `${size}px`;
+    })
+        .join(" ");
+    console.log({ columnWidths }, "hadfg");
+    const cellProps = {
+        flex: "1 0 0%",
+        overflow: "auto",
+        paddingX: "2",
+        py: "1",
+        borderBottomColor: { base: "colorPalette.200", _dark: "colorPalette.800" },
+        borderBottomWidth: "1px",
+    };
+    return (jsxRuntime.jsxs(react.Grid, { templateColumns: `${columnWidths}`, overflow: "auto", borderWidth: "1px", borderColor: { base: "colorPalette.200", _dark: "colorPalette.800" }, children: [jsxRuntime.jsx(react.Grid, { templateColumns: `${columnWidths}`, column: `1/span ${columns.length}`, bg: { base: "colorPalette.200", _dark: "colorPalette.800" }, children: columnHeaders.map((header) => {
+                    return (jsxRuntime.jsx(react.Box, { flex: "1 0 0%", paddingX: "2", py: "1", children: translate.t(`column_header.${header}`) }));
+                }) }), data?.data.map((record) => {
+                return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: columnHeaders.map((header) => {
+                        if (!!record === false) {
+                            return (jsxRuntime.jsx(react.Box, { ...cellProps, children: translate.t(`column_cell.placeholder`) }));
+                        }
+                        if (!!record[header] === false) {
+                            return (jsxRuntime.jsx(react.Box, { ...cellProps, children: translate.t(`column_cell.placeholder`) }));
+                        }
+                        if (typeof record[header] === "object") {
+                            return (jsxRuntime.jsx(react.Box, { ...cellProps, children: jsxRuntime.jsx(RecordDisplay, { object: record[header] }) }));
+                        }
+                        return jsxRuntime.jsx(react.Box, { ...cellProps, children: record[header] ?? "" });
+                    }) }));
+            })] }));
+};
+
 const AccordionItemTrigger = React__namespace.forwardRef(function AccordionItemTrigger(props, ref) {
     const { children, indicatorPlacement = "end", ...rest } = props;
     return (jsxRuntime.jsxs(react.Accordion.ItemTrigger, { ...rest, ref: ref, children: [indicatorPlacement === "start" && (jsxRuntime.jsx(react.Accordion.ItemIndicator, { rotate: { base: "-90deg", _open: "0deg" }, children: jsxRuntime.jsx(lu.LuChevronDown, {}) })), jsxRuntime.jsx(react.HStack, { gap: "4", flex: "1", textAlign: "start", width: "full", children: children }), indicatorPlacement === "end" && (jsxRuntime.jsx(react.Accordion.ItemIndicator, { children: jsxRuntime.jsx(lu.LuChevronDown, {}) }))] }));
@@ -5105,6 +5181,7 @@ exports.TableCardContainer = TableCardContainer;
 exports.TableCards = TableCards;
 exports.TableComponent = TableComponent;
 exports.TableControls = TableControls;
+exports.TableDataDisplay = TableDataDisplay;
 exports.TableFilter = TableFilter;
 exports.TableFilterTags = TableFilterTags;
 exports.TableFooter = TableFooter;

package/dist/index.mjs

@@ -2794,6 +2794,21 @@ function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSel
             setGlobalFilter,
             type: "client",
             translate,
+            columns,
+            sorting,
+            setSorting,
+            columnFilters,
+            setColumnFilters,
+            pagination,
+            setPagination,
+            rowSelection,
+            setRowSelection,
+            columnOrder,
+            setColumnOrder,
+            density,
+            setDensity,
+            columnVisibility,
+            setColumnVisibility,
         }, children: children }));
 }
 
@@ -2862,6 +2877,21 @@ function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSel
             setGlobalFilter,
             type: "server",
             translate,
+            columns,
+            sorting,
+            setSorting,
+            columnFilters,
+            setColumnFilters,
+            pagination,
+            setPagination,
+            rowSelection,
+            setRowSelection,
+            columnOrder,
+            setColumnOrder,
+            density,
+            setDensity,
+            columnVisibility,
+            setColumnVisibility,
         }, children: jsx(DataTableServerContext.Provider, { value: { url, query }, children: children }) }));
 }
 
@@ -3468,6 +3498,52 @@ const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {},
     return columns;
 };
 
+const TableDataDisplay = () => {
+    const { table, columns, translate } = useDataTableContext();
+    const { query } = useDataTableServerContext();
+    const { data } = query;
+    const columnDef = table._getColumnDefs();
+    console.log(columnDef, "glp");
+    console.log(columnDef, columns, table.getState().columnOrder, data, "glp");
+    const columnsMap = Object.fromEntries(columns.map((def) => {
+        return [def.accessorKey, def];
+    }));
+    const columnHeaders = Object.keys(columnsMap);
+    const columnWidths = columns
+        .map(({ size }) => {
+        if (!!size === false) {
+            return "1fr";
+        }
+        return `${size}px`;
+    })
+        .join(" ");
+    console.log({ columnWidths }, "hadfg");
+    const cellProps = {
+        flex: "1 0 0%",
+        overflow: "auto",
+        paddingX: "2",
+        py: "1",
+        borderBottomColor: { base: "colorPalette.200", _dark: "colorPalette.800" },
+        borderBottomWidth: "1px",
+    };
+    return (jsxs(Grid, { templateColumns: `${columnWidths}`, overflow: "auto", borderWidth: "1px", borderColor: { base: "colorPalette.200", _dark: "colorPalette.800" }, children: [jsx(Grid, { templateColumns: `${columnWidths}`, column: `1/span ${columns.length}`, bg: { base: "colorPalette.200", _dark: "colorPalette.800" }, children: columnHeaders.map((header) => {
+                    return (jsx(Box, { flex: "1 0 0%", paddingX: "2", py: "1", children: translate.t(`column_header.${header}`) }));
+                }) }), data?.data.map((record) => {
+                return (jsx(Fragment, { children: columnHeaders.map((header) => {
+                        if (!!record === false) {
+                            return (jsx(Box, { ...cellProps, children: translate.t(`column_cell.placeholder`) }));
+                        }
+                        if (!!record[header] === false) {
+                            return (jsx(Box, { ...cellProps, children: translate.t(`column_cell.placeholder`) }));
+                        }
+                        if (typeof record[header] === "object") {
+                            return (jsx(Box, { ...cellProps, children: jsx(RecordDisplay, { object: record[header] }) }));
+                        }
+                        return jsx(Box, { ...cellProps, children: record[header] ?? "" });
+                    }) }));
+            })] }));
+};
+
 const AccordionItemTrigger = React.forwardRef(function AccordionItemTrigger(props, ref) {
     const { children, indicatorPlacement = "end", ...rest } = props;
     return (jsxs(Accordion.ItemTrigger, { ...rest, ref: ref, children: [indicatorPlacement === "start" && (jsx(Accordion.ItemIndicator, { rotate: { base: "-90deg", _open: "0deg" }, children: jsx(LuChevronDown, {}) })), jsx(HStack, { gap: "4", flex: "1", textAlign: "start", width: "full", children: children }), indicatorPlacement === "end" && (jsx(Accordion.ItemIndicator, { children: jsx(LuChevronDown, {}) }))] }));
@@ -5054,4 +5130,4 @@ const getMultiDates = ({ selected, selectedDate, selectedDates, selectable, }) =
     }
 };
 
-export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultForm, DefaultTable, DensityToggleButton, EditSortingButton, EmptyState$1 as EmptyState, ErrorAlert, FilterDialog, FilterOptions, FormBody, FormRoot, FormTitle, GlobalFilter, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, ViewDialog, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
+export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultForm, DefaultTable, DensityToggleButton, EditSortingButton, EmptyState$1 as EmptyState, ErrorAlert, FilterDialog, FilterOptions, FormBody, FormRoot, FormTitle, GlobalFilter, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, ViewDialog, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };

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

@@ -1,7 +1,7 @@
 import { ColumnDef, ColumnFiltersState, ColumnOrderState, FilterFn, OnChangeFn, PaginationState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
 import { ReactNode } from "react";
 import { RankingInfo } from "@tanstack/match-sorter-utils";
-import { DensityState } from "../Controls/DensityFeature";
+import { DensityState } from "./controls/DensityFeature";
 import { UseTranslationResponse } from "react-i18next";
 declare module "@tanstack/react-table" {
     interface FilterFns {

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

@@ -1,7 +1,7 @@
 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";
+import { DensityState } from "./controls/DensityFeature";
 import { DataResponse } from "./useDataTableServer";
 import { UseTranslationResponse } from "react-i18next";
 export interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown>> {

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

@@ -1,9 +1,9 @@
 import { TableHeaderProps as ChakraHeaderProps } from "@chakra-ui/react";
-import { TableBodyProps } from "./TableBody";
-import { TableControlsProps } from "./TableControls";
-import { TableFooterProps } from "./TableFooter";
-import { TableHeaderProps } from "./TableHeader";
-import { TableProps } from "./Table";
+import { TableBodyProps } from "./display/TableBody";
+import { TableControlsProps } from "./controls/TableControls";
+import { TableFooterProps } from "./display/TableFooter";
+import { TableHeaderProps } from "./display/TableHeader";
+import { TableProps } from "./display/Table";
 export interface DefaultTableProps {
     showFooter?: boolean;
     showSelector?: boolean;

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { OnChangeFn, Table } from "@tanstack/react-table";
 import { UseTranslationResponse } from "react-i18next";
-export interface DataTableContext<TData = unknown> {
+import { DataTableProps } from "../DataTable";
+export interface DataTableContext<TData = unknown> extends DataTableProps {
     table: Table<TData>;
     globalFilter: string;
     setGlobalFilter: OnChangeFn<string>;

package/dist/types/components/DataTable/controls/DensityFeature.d.ts

@@ -0,0 +1,23 @@
+import { OnChangeFn, Updater, RowData, TableFeature } from "@tanstack/react-table";
+export type DensityState = "sm" | "md" | "lg";
+export interface DensityTableState {
+    density: DensityState;
+}
+export interface DensityOptions {
+    enableDensity?: boolean;
+    onDensityChange?: OnChangeFn<DensityState>;
+}
+export interface DensityInstance {
+    setDensity: (updater: Updater<DensityState>) => void;
+    toggleDensity: (value?: DensityState) => void;
+    getDensityValue: (value?: DensityState) => number;
+}
+declare module "@tanstack/react-table" {
+    interface TableState extends DensityTableState {
+    }
+    interface TableOptionsResolved<TData extends RowData> extends DensityOptions {
+    }
+    interface Table<TData extends RowData> extends DensityInstance {
+    }
+}
+export declare const DensityFeature: TableFeature<any>;

package/dist/types/components/DataTable/controls/DensityToggleButton.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface DensityToggleButtonProps {
+    icon?: React.ReactElement;
+    text?: string;
+}
+export declare const DensityToggleButton: ({ text, icon, }: DensityToggleButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/controls/EditSortingButton.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface EditSortingButtonProps {
+    title?: string;
+    icon?: React.ReactElement;
+    text?: string;
+}
+export declare const EditSortingButton: ({ text, icon, title, }: EditSortingButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/controls/FilterDialog.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface EditFilterButtonProps {
+    icon?: React.ReactElement;
+}
+export declare const FilterDialog: ({ icon, }: EditFilterButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/controls/PageSizeControl.d.ts

@@ -0,0 +1,4 @@
+export interface PageSizeControlProps {
+    pageSizes?: number[];
+}
+export declare const PageSizeControl: ({ pageSizes, }: PageSizeControlProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/controls/Pagination.d.ts

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

package/dist/types/components/DataTable/controls/ReloadButton.d.ts

@@ -0,0 +1,5 @@
+export interface ReloadButtonProps {
+    text?: string;
+    variant?: string;
+}
+export declare const ReloadButton: ({ text, variant, }: ReloadButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/controls/ResetFilteringButton.d.ts

@@ -0,0 +1,4 @@
+export interface ResetFilteringButtonProps {
+    text?: string;
+}
+export declare const ResetFilteringButton: ({ text, }: ResetFilteringButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/controls/ResetSelectionButton.d.ts

@@ -0,0 +1,4 @@
+export interface ResetSelectionButtonProps {
+    text?: string;
+}
+export declare const ResetSelectionButton: ({ text, }: ResetSelectionButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/controls/ResetSortingButton.d.ts

@@ -0,0 +1,4 @@
+export interface ResetSortingButtonProps {
+    text?: string;
+}
+export declare const ResetSortingButton: ({ text, }: ResetSortingButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/controls/RowCountText.d.ts

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

package/dist/types/components/DataTable/controls/SelectAllRowsToggle.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface SelectAllRowsToggleProps {
+    selectAllIcon?: React.ReactElement;
+    clearAllIcon?: React.ReactElement;
+    selectAllText?: string;
+    clearAllText?: string;
+}
+export declare const SelectAllRowsToggle: ({ selectAllIcon, clearAllIcon, selectAllText, clearAllText, }: SelectAllRowsToggleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/controls/TableControls.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+export interface TableControlsProps {
+    totalText?: string;
+    fitTableWidth?: boolean;
+    fitTableHeight?: boolean;
+    children?: ReactNode;
+    showGlobalFilter?: boolean;
+    showFilter?: boolean;
+    showFilterName?: boolean;
+    showFilterTags?: boolean;
+    showReload?: boolean;
+    showPagination?: boolean;
+    showPageSizeControl?: boolean;
+    showPageCountText?: boolean;
+    showView?: boolean;
+    filterOptions?: string[];
+    extraItems?: ReactNode;
+    loading?: boolean;
+    hasError?: boolean;
+}
+export declare const TableControls: ({ fitTableWidth, fitTableHeight, children, showGlobalFilter, showFilter, showFilterName, showFilterTags, showReload, showPagination, showPageSizeControl, showPageCountText, showView, filterOptions, extraItems, loading, hasError, }: TableControlsProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/types/components/DataTable/controls/TableFilters.d.ts

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

package/dist/types/components/DataTable/controls/TableSelector.d.ts

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

package/dist/types/components/DataTable/controls/TableSorter.d.ts

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

package/dist/types/components/DataTable/controls/TableViewer.d.ts

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

package/dist/types/components/DataTable/controls/ViewDialog.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface EditViewButtonProps {
+    icon?: React.ReactElement;
+}
+export declare const ViewDialog: ({ icon }: EditViewButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/display/CardHeader.d.ts

@@ -0,0 +1,13 @@
+import { ImageProps } from "@chakra-ui/react";
+import { Row } from "@tanstack/react-table";
+import { IconType } from "react-icons";
+export interface CardHeaderProps<TData> {
+    row: Row<TData>;
+    imageColumnId?: keyof TData;
+    titleColumnId?: keyof TData;
+    tagColumnId?: keyof TData;
+    tagIcon?: IconType;
+    showTag?: boolean;
+    imageProps?: ImageProps;
+}
+export declare const CardHeader: <TData>({ row, imageColumnId, titleColumnId, tagColumnId, tagIcon, showTag, imageProps, }: CardHeaderProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/display/DataDisplay.d.ts

@@ -0,0 +1,6 @@
+import { UseTranslationResponse } from "react-i18next";
+export interface DataDisplayProps {
+    variant?: "horizontal" | "stats" | "";
+    translate?: UseTranslationResponse<any, any>;
+}
+export declare const DataDisplay: ({ variant }: DataDisplayProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

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

package/dist/types/components/DataTable/display/RecordDisplay.d.ts

@@ -0,0 +1,9 @@
+import { BoxProps } from "@chakra-ui/react";
+import { UseTranslationResponse } from "react-i18next";
+export interface RecordDisplayProps {
+    object: object | null;
+    boxProps?: BoxProps;
+    translate?: UseTranslationResponse<any, any>;
+    prefix?: string;
+}
+export declare const RecordDisplay: ({ object, boxProps, translate, prefix, }: RecordDisplayProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/display/Table.d.ts

@@ -0,0 +1,10 @@
+import { TableRootProps } from "@chakra-ui/react";
+import { ReactNode } from "react";
+export interface TableProps extends TableRootProps {
+    showLoading?: boolean;
+    loadingComponent?: ReactNode;
+    emptyComponent?: ReactNode;
+    canResize?: boolean;
+    children: ReactNode;
+}
+export declare const Table: ({ children, emptyComponent, canResize, ...props }: TableProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;

package/dist/types/components/DataTable/display/TableBody.d.ts

@@ -0,0 +1,21 @@
+import { Row } from "@tanstack/react-table";
+export interface TableBodyProps {
+    pinnedBgColor?: {
+        light: string;
+        dark: string;
+    };
+    showSelector?: boolean;
+    alwaysShowSelector?: boolean;
+    canResize?: boolean;
+}
+export interface TableRowSelectorProps<TData> {
+    index: number;
+    row: Row<TData>;
+    hoveredRow: number;
+    pinnedBgColor?: {
+        light: string;
+        dark: string;
+    };
+    alwaysShowSelector?: boolean;
+}
+export declare const TableBody: ({ pinnedBgColor, showSelector, alwaysShowSelector, canResize, }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/display/TableCardContainer.d.ts

@@ -0,0 +1,7 @@
+import { GridProps } from "@chakra-ui/react";
+import { ReactNode } from "react";
+export interface TableCardContainerProps extends GridProps {
+    children: ReactNode;
+    variant?: "carousel" | "";
+}
+export declare const TableCardContainer: ({ children, variant, ...props }: TableCardContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/display/TableCards.d.ts

@@ -0,0 +1,11 @@
+import { CardBodyProps } from "@chakra-ui/react";
+import { Row } from "@tanstack/react-table";
+import { ReactNode } from "react";
+export interface TableCardsProps<TData> {
+    isSelectable?: boolean;
+    showDisplayNameOnly?: boolean;
+    renderTitle?: (row: Row<TData>) => ReactNode | undefined;
+    cardBodyProps?: CardBodyProps;
+}
+export declare const DefaultCardTitle: () => import("react/jsx-runtime").JSX.Element;
+export declare const TableCards: <TData>({ isSelectable, showDisplayNameOnly, renderTitle, cardBodyProps, }: TableCardsProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/display/TableComponent.d.ts

@@ -0,0 +1,6 @@
+import { Table } from "@tanstack/react-table";
+import React from "react";
+export interface TableRendererProps<TData> {
+    render: (render: Table<TData>) => React.ReactElement;
+}
+export declare const TableComponent: <TData>({ render, }: TableRendererProps<TData>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/dist/types/components/DataTable/display/TableDataDisplay.d.ts

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

package/dist/types/components/DataTable/display/TableFooter.d.ts

@@ -0,0 +1,9 @@
+export interface TableFooterProps {
+    pinnedBgColor?: {
+        light: string;
+        dark: string;
+    };
+    showSelector?: boolean;
+    alwaysShowSelector?: boolean;
+}
+export declare const TableFooter: ({ pinnedBgColor, showSelector, alwaysShowSelector, }: TableFooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/display/TableHeader.d.ts

@@ -0,0 +1,13 @@
+import { TableHeaderProps as ChakraTableHeaderProps } from "@chakra-ui/react";
+export interface TableHeaderProps {
+    canResize?: boolean;
+    pinnedBgColor?: {
+        light: string;
+        dark: string;
+    };
+    showSelector?: boolean;
+    isSticky?: boolean;
+    alwaysShowSelector?: boolean;
+    tHeadProps?: ChakraTableHeaderProps;
+}
+export declare const TableHeader: ({ canResize, pinnedBgColor, showSelector, isSticky, alwaysShowSelector, tHeadProps, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/display/TableLoadingComponent.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export interface TableLoadingComponentProps {
+    render: (loading: boolean) => ReactNode;
+}
+export declare const TableLoadingComponent: ({ render, }: TableLoadingComponentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/display/TextCell.d.ts

@@ -0,0 +1,10 @@
+import { FlexProps, TextProps } from "@chakra-ui/react";
+import { ReactNode } from "react";
+export interface TextCellProps {
+    label?: string;
+    noOfLines?: number[];
+    children: string | number | ReactNode | ReactNode[];
+    containerProps?: FlexProps;
+    textProps?: TextProps;
+}
+export declare const TextCell: ({ label, containerProps, textProps, children, }: TextCellProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { ColumnFiltersState, ColumnOrderState, OnChangeFn, PaginationState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
-import { DensityState } from "../Controls/DensityFeature";
+import { DensityState } from "./controls/DensityFeature";
 import { UseTranslationResponse } from "react-i18next";
 export interface DataTableDefaultState {
     sorting?: SortingState;

package/dist/types/index.d.ts

@@ -57,43 +57,44 @@ declare module "@tanstack/react-table" {
         renderFilter?: (column: Column<TData>) => ReactNode;
     }
 }
-export * from "./components/Controls/DensityToggleButton";
-export * from "./components/Controls/EditSortingButton";
-export * from "./components/Controls/FilterDialog";
-export * from "./components/Controls/PageSizeControl";
-export * from "./components/Controls/Pagination";
-export * from "./components/Controls/ResetFilteringButton";
-export * from "./components/Controls/ResetSelectionButton";
-export * from "./components/Controls/ResetSortingButton";
-export * from "./components/Controls/RowCountText";
-export * from "./components/Controls/ViewDialog";
-export * from "./components/DataTable/CardHeader";
-export * from "./components/DataTable/components/EmptyState";
-export * from "./components/DataTable/components/ErrorAlert";
+export * from "./components/DataTable/controls/DensityToggleButton";
+export * from "./components/DataTable/controls/EditSortingButton";
+export * from "./components/DataTable/controls/FilterDialog";
+export * from "./components/DataTable/controls/PageSizeControl";
+export * from "./components/DataTable/controls/Pagination";
+export * from "./components/DataTable/controls/ResetFilteringButton";
+export * from "./components/DataTable/controls/ResetSelectionButton";
+export * from "./components/DataTable/controls/ResetSortingButton";
+export * from "./components/DataTable/controls/RowCountText";
+export * from "./components/DataTable/controls/ViewDialog";
+export * from "./components/DataTable/display/CardHeader";
+export * from "./components/DataTable/display/EmptyState";
+export * from "./components/DataTable/display/ErrorAlert";
 export * from "./components/DataTable/context/useDataTableContext";
-export * from "./components/DataTable/DataDisplay";
+export * from "./components/DataTable/display/DataDisplay";
 export * from "./components/DataTable/DataTable";
 export * from "./components/DataTable/DataTableServer";
 export * from "./components/DataTable/DefaultTable";
-export * from "./components/DataTable/ReloadButton";
-export * from "./components/DataTable/Table";
-export * from "./components/DataTable/TableBody";
-export * from "./components/DataTable/TableCardContainer";
-export * from "./components/DataTable/TableCards";
-export * from "./components/DataTable/TableComponent";
-export * from "./components/DataTable/TableControls";
-export * from "./components/DataTable/TableFilters";
-export * from "./components/DataTable/TableFilterTags";
-export * from "./components/DataTable/TableFooter";
-export * from "./components/DataTable/TableHeader";
-export * from "./components/DataTable/TableLoadingComponent";
-export * from "./components/DataTable/TableSelector";
-export * from "./components/DataTable/TableSorter";
-export * from "./components/DataTable/TableViewer";
-export * from "./components/DataTable/components/TextCell";
+export * from "./components/DataTable/controls/ReloadButton";
+export * from "./components/DataTable/display/Table";
+export * from "./components/DataTable/display/TableBody";
+export * from "./components/DataTable/display/TableCardContainer";
+export * from "./components/DataTable/display/TableCards";
+export * from "./components/DataTable/display/TableComponent";
+export * from "./components/DataTable/controls/TableControls";
+export * from "./components/DataTable/controls/TableFilters";
+export * from "./components/DataTable/controls/TableFilterTags";
+export * from "./components/DataTable/display/TableFooter";
+export * from "./components/DataTable/display/TableHeader";
+export * from "./components/DataTable/display/TableLoadingComponent";
+export * from "./components/DataTable/controls/TableSelector";
+export * from "./components/DataTable/controls/TableSorter";
+export * from "./components/DataTable/controls/TableViewer";
+export * from "./components/DataTable/display/TextCell";
 export * from "./components/DataTable/useDataTable";
 export * from "./components/DataTable/useDataTableServer";
 export * from "./components/DataTable/utils/getColumns";
+export * from "./components/DataTable/display/TableDataDisplay";
 export * from "./components/Filter/FilterOptions";
 export * from "./components/Filter/GlobalFilter";
 export * from "./components/Form/components/core/DefaultForm";
@@ -105,4 +106,4 @@ export * from "./components/DatePicker/DatePicker";
 export * from "./components/DatePicker/getMultiDates";
 export * from "./components/DatePicker/getRangeDates";
 export * from "./components/DatePicker/RangeDatePicker";
-export * from "./components/DataTable/components/RecordDisplay";
+export * from "./components/DataTable/display/RecordDisplay";

package/package.json

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