@bsol-oss/react-datatable5 9.2.0 → 10.0.0

package/README.md

@@ -1,6 +1,6 @@
 # React Datatable
 
-The datetable package is built on top of `@tanstack/react-table` and `chakra-ui` to create a robust datatable. This hook simplifies to initialize the state management for controlling the datatable, and it offers several predefined tables and controls in to enhance data visualization.
+The datetable package is built on top of `@tanstack/react-table` and `chakra-ui` to create a datatable. This hook simplifies to initialize the state management for controlling the datatable, and it offers several predefined tables and controls in to enhance data visualization.
 
 ## Installation
 
@@ -23,22 +23,7 @@ const datatableServer = useDataTableServer({ url: "<some-url>" });
 
 ```tsx
 <DataTable columns={columns} data={data} {...datatable}>
-  <Flex>
-    <TablePagination />
-    <EditViewButton />
-    <EditFilterButton />
-    <EditOrderButton />
-    <PageSizeControl />
-    <TableSelector />
-    <GlobalFilter />
-  </Flex>
-  <Table>
-    <TableHeader canResize />
-    <TableBody />
-    <TableFooter />
-  </Table>
-  <PageSizeControl />
-  <TablePagination />
+  <DataDisplay />
 </DataTable>
 ```
 
@@ -46,29 +31,7 @@ const datatableServer = useDataTableServer({ url: "<some-url>" });
 
 ```tsx
 <DataTableServer columns={columns} {...datatable}>
-  <Flex>
-    <TablePagination />
-    <EditViewButton />
-    <EditFilterButton />
-    <DensityToggleButton />
-    <EditOrderButton />
-    <PageSizeControl />
-    <TableSelector />
-    <GlobalFilter />
-  </Flex>
-  <Table>
-    <TableHeader canResize />
-    <TableBody />
-    <TableFooter />
-  </Table>
-  <Flex>
-    <TablePagination />
-    <EditViewButton />
-    <EditFilterButton />
-    <EditOrderButton />
-    <PageSizeControl />
-    <TableSelector />
-  </Flex>
+  <DataDisplay />
 </DataTableServer>
 ```
 

package/dist/index.d.ts

@@ -22,13 +22,9 @@ interface DensityToggleButtonProps {
 declare const DensityToggleButton: ({ text, icon, }: DensityToggleButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface EditFilterButtonProps {
-    text?: string;
-    title?: string;
-    closeText?: string;
-    resetText?: string;
     icon?: React.ReactElement;
 }
-declare const EditFilterButton: ({ text, title, closeText, resetText, icon, }: EditFilterButtonProps) => react_jsx_runtime.JSX.Element;
+declare const FilterDialog: ({ icon, }: EditFilterButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface EditOrderButtonProps {
     title?: string;
@@ -45,11 +41,9 @@ interface EditSortingButtonProps {
 declare const EditSortingButton: ({ text, icon, title, }: EditSortingButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface EditViewButtonProps {
-    text?: string;
     icon?: React__default.ReactElement;
-    title?: string;
 }
-declare const EditViewButton: ({ text, icon, title, }: EditViewButtonProps) => react_jsx_runtime.JSX.Element;
+declare const ViewDialog: ({ icon }: EditViewButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface PageSizeControlProps {
     pageSizes?: number[];
@@ -73,7 +67,7 @@ declare const ResetSortingButton: ({ text, }: ResetSortingButtonProps) => react_
 
 declare const RowCountText: () => react_jsx_runtime.JSX.Element;
 
-declare const TablePagination: () => react_jsx_runtime.JSX.Element;
+declare const Pagination: () => react_jsx_runtime.JSX.Element;
 
 interface CardHeaderProps<TData> {
     row: Row<TData>;
@@ -159,6 +153,7 @@ interface DataTableProps<TData = unknown> {
     setColumnOrder: OnChangeFn<ColumnOrderState>;
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;
+    translate: UseTranslationResponse<any, any>;
 }
 /**
  * DataTable will create a context to hold all values to
@@ -170,7 +165,7 @@ interface DataTableProps<TData = unknown> {
  *
  * @link https://tanstack.com/table/latest/docs/guide/column-defs
  */
-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;
+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 DataTableDefaultState {
     sorting?: SortingState;
@@ -184,6 +179,7 @@ interface DataTableDefaultState {
 }
 interface UseDataTableProps {
     default?: DataTableDefaultState;
+    keyPrefix?: string;
 }
 interface UseDataTableReturn {
     sorting: SortingState;
@@ -202,8 +198,9 @@ interface UseDataTableReturn {
     setColumnOrder: OnChangeFn<ColumnOrderState>;
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;
+    translate: UseTranslationResponse<any, any>;
 }
-declare const useDataTable: ({ default: { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, }, }?: UseDataTableProps) => 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 {
     /**
@@ -229,7 +226,7 @@ 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, }, }: UseDataTableServerProps) => UseDataTableServerReturn<TData>;
+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 DataTableServerProps<TData extends DataResponse = DataResponse<unknown>> {
     children: ReactNode | ReactNode[];
@@ -262,6 +259,7 @@ interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown
     setColumnVisibility: OnChangeFn<VisibilityState>;
     query: UseQueryResult<TData>;
     url: string;
+    translate: UseTranslationResponse<any, any>;
 }
 /**
  * DataTableServer will create a context to hold all values to
@@ -274,7 +272,7 @@ interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown
  *
  * @link https://tanstack.com/table/latest/docs/guide/column-defs
  */
-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;
+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, url, translate, children, }: DataTableServerProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface TableBodyProps {
     pinnedBgColor?: {
@@ -301,7 +299,6 @@ interface TableControlsProps {
     totalText?: string;
     fitTableWidth?: boolean;
     fitTableHeight?: boolean;
-    isMobile?: boolean;
     children?: ReactNode;
     showGlobalFilter?: boolean;
     showFilter?: boolean;
@@ -311,12 +308,13 @@ interface TableControlsProps {
     showPagination?: boolean;
     showPageSizeControl?: boolean;
     showPageCountText?: boolean;
+    showView?: boolean;
     filterOptions?: string[];
     extraItems?: ReactNode;
     loading?: boolean;
     hasError?: boolean;
 }
-declare const TableControls: ({ totalText, fitTableWidth, fitTableHeight, isMobile, children, showGlobalFilter, showFilter, showFilterName, showFilterTags, showReload, showPagination, showPageSizeControl, showPageCountText, filterOptions, extraItems, loading, hasError, }: TableControlsProps) => react_jsx_runtime.JSX.Element;
+declare const TableControls: ({ fitTableWidth, fitTableHeight, children, showGlobalFilter, showFilter, showFilterName, showFilterTags, showReload, showPagination, showPageSizeControl, showPageCountText, showView, filterOptions, extraItems, loading, hasError, }: TableControlsProps) => react_jsx_runtime.JSX.Element;
 
 interface TableFooterProps {
     pinnedBgColor?: {
@@ -420,6 +418,7 @@ interface DataTableContext<TData = unknown> {
     globalFilter: string;
     setGlobalFilter: OnChangeFn<string>;
     type: "client" | "server";
+    translate: UseTranslationResponse<any, any>;
 }
 declare const DataTableContext: React$1.Context<DataTableContext<unknown>>;
 
@@ -601,4 +600,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, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, EditFilterButton, type EditFilterButtonProps, EditOrderButton, type EditOrderButtonProps, EditSortingButton, type EditSortingButtonProps, EditViewButton, type EditViewButtonProps, EmptyState, type EmptyStateProps, ErrorAlert, type ErrorAlertProps, FilterOptions, type FilterOptionsProps, Form, type FormProps, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, 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, TableOrderer, TablePagination, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, getColumns, getMultiDates, getRangeDates, 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, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditOrderButton, type EditOrderButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, ErrorAlert, type ErrorAlertProps, FilterDialog, FilterOptions, type FilterOptionsProps, Form, type FormProps, 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, TableOrderer, 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, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };

package/dist/index.js

@@ -26,11 +26,11 @@ var reactQuery = require('@tanstack/react-query');
 var io5 = require('react-icons/io5');
 var gr = require('react-icons/gr');
 var hi = require('react-icons/hi');
+var reactI18next = require('react-i18next');
 var axios = require('axios');
 var reactHookForm = require('react-hook-form');
 var dayjs = require('dayjs');
 var ti = require('react-icons/ti');
-var reactI18next = require('react-i18next');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -56,6 +56,7 @@ const DataTableContext = React.createContext({
     globalFilter: "",
     setGlobalFilter: () => { },
     type: "client",
+    translate: {},
 });
 
 const useDataTableContext = () => {
@@ -95,7 +96,7 @@ react.Dialog.Backdrop;
 const DialogTitle = react.Dialog.Title;
 react.Dialog.Description;
 const DialogTrigger = react.Dialog.Trigger;
-const DialogActionTrigger = react.Dialog.ActionTrigger;
+react.Dialog.ActionTrigger;
 
 const Radio = React__namespace.forwardRef(function Radio(props, ref) {
     const { children, inputProps, rootRef, ...rest } = props;
@@ -373,9 +374,10 @@ const ResetFilteringButton = ({ text = "Reset Filtering", }) => {
         }, children: text }));
 };
 
-const EditFilterButton = ({ text, title = "Edit Filter", closeText = "Close", resetText = "Reset", icon = jsxRuntime.jsx(md.MdFilterAlt, {}), }) => {
+const FilterDialog = ({ icon = jsxRuntime.jsx(md.MdFilterAlt, {}), }) => {
     const filterModal = react.useDisclosure();
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(DialogRoot, { size: ["full", "full", "md", "md"], open: filterModal.open, children: jsxRuntime.jsxs(DialogRoot, { children: [jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { as: react.Box, variant: "ghost", onClick: filterModal.onOpen, children: [icon, " ", text] }) }), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogHeader, { children: jsxRuntime.jsx(DialogTitle, { children: title }) }), jsxRuntime.jsx(DialogBody, { children: jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "1rem", children: [jsxRuntime.jsx(TableFilter, {}), jsxRuntime.jsx(ResetFilteringButton, { text: resetText })] }) }), jsxRuntime.jsxs(DialogFooter, { children: [jsxRuntime.jsx(DialogActionTrigger, { asChild: true, children: jsxRuntime.jsx(react.Button, { onClick: filterModal.onClose, children: closeText }) }), jsxRuntime.jsx(react.Button, { children: "Save" })] }), jsxRuntime.jsx(DialogCloseTrigger, {})] })] }) }) }));
+    const { translate } = useDataTableContext();
+    return (jsxRuntime.jsxs(DialogRoot, { size: ["full", "full", "md", "md"], open: filterModal.open, children: [jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { as: react.Box, variant: "ghost", onClick: filterModal.onOpen, children: [icon, " ", translate.t("filterDialog.buttonText")] }) }), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogHeader, { children: jsxRuntime.jsx(DialogTitle, { children: translate.t("filterDialog.title") }) }), jsxRuntime.jsx(DialogBody, { display: "flex", flexFlow: "column", children: jsxRuntime.jsx(TableFilter, {}) }), jsxRuntime.jsxs(DialogFooter, { children: [jsxRuntime.jsx(ResetFilteringButton, { text: translate.t("filterDialog.reset") }), jsxRuntime.jsx(react.Button, { onClick: filterModal.onClose, variant: "subtle", children: translate.t("filterDialog.close") })] }), jsxRuntime.jsx(DialogCloseTrigger, { onClick: filterModal.onClose })] })] }));
 };
 
 const ColumnOrderChanger = ({ columns }) => {
@@ -2452,9 +2454,10 @@ const TableViewer = () => {
         }) }));
 };
 
-const EditViewButton = ({ text, icon = jsxRuntime.jsx(io.IoMdEye, {}), title = "Edit View", }) => {
+const ViewDialog = ({ icon = jsxRuntime.jsx(io.IoMdEye, {}) }) => {
     const viewModel = react.useDisclosure();
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(DialogRoot, { children: [jsxRuntime.jsx(react.DialogBackdrop, {}), jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { as: react.Box, variant: "ghost", onClick: viewModel.onOpen, children: [icon, " ", text] }) }), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogCloseTrigger, {}), jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(DialogTitle, {}), title] }), jsxRuntime.jsx(DialogBody, { children: jsxRuntime.jsx(TableViewer, {}) }), jsxRuntime.jsx(DialogFooter, {})] })] }) }));
+    const { translate } = useDataTableContext();
+    return (jsxRuntime.jsxs(DialogRoot, { children: [jsxRuntime.jsx(react.DialogBackdrop, {}), jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { as: react.Box, variant: "ghost", onClick: viewModel.onOpen, children: [icon, " ", translate.t("viewDialog.buttonText")] }) }), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogCloseTrigger, {}), jsxRuntime.jsx(DialogHeader, { children: jsxRuntime.jsx(DialogTitle, { children: translate.t("viewDialog.title") }) }), jsxRuntime.jsx(DialogBody, { children: jsxRuntime.jsx(TableViewer, {}) }), jsxRuntime.jsx(DialogFooter, {})] })] }));
 };
 
 const MenuContent = React__namespace.forwardRef(function MenuContent(props, ref) {
@@ -2490,9 +2493,9 @@ const MenuTrigger = react.Menu.Trigger;
 
 const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
     const { table } = useDataTableContext();
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(MenuRoot, { children: [jsxRuntime.jsx(MenuTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { variant: "ghost", gap: "0.5rem", children: [table.getState().pagination.pageSize, " ", jsxRuntime.jsx(bi.BiDownArrow, {})] }) }), jsxRuntime.jsx(MenuContent, { children: pageSizes.map((pageSize) => (jsxRuntime.jsx(MenuItem, { value: `chakra-table-pageSize-${pageSize}`, onClick: () => {
-                            table.setPageSize(Number(pageSize));
-                        }, children: pageSize }, `chakra-table-pageSize-${pageSize}`))) })] }) }));
+    return (jsxRuntime.jsxs(MenuRoot, { children: [jsxRuntime.jsx(MenuTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { variant: "ghost", gap: "0.5rem", children: [table.getState().pagination.pageSize, " ", jsxRuntime.jsx(bi.BiDownArrow, {})] }) }), jsxRuntime.jsx(MenuContent, { children: pageSizes.map((pageSize) => (jsxRuntime.jsx(MenuItem, { value: `chakra-table-pageSize-${pageSize}`, onClick: () => {
+                        table.setPageSize(Number(pageSize));
+                    }, children: pageSize }, `chakra-table-pageSize-${pageSize}`))) })] }));
 };
 
 const ResetSelectionButton = ({ text = "Reset Selection", }) => {
@@ -2578,7 +2581,7 @@ const PaginationPageText = React__namespace.forwardRef(function PaginationPageTe
 });
 
 // TODO: not working in client side
-const TablePagination = () => {
+const Pagination = () => {
     const { table, type } = useDataTableContext();
     const getCount = () => {
         if (type === "client") {
@@ -2801,7 +2804,7 @@ const fuzzyFilter = (row, columnId, value, addMeta) => {
  *
  * @link https://tanstack.com/table/latest/docs/guide/column-defs
  */
-function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, children, }) {
+function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, translate, children, }) {
     const table = reactTable.useReactTable({
         _features: [DensityFeature],
         data: data,
@@ -2850,9 +2853,10 @@ function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSel
     });
     return (jsxRuntime.jsx(DataTableContext.Provider, { value: {
             table: table,
-            globalFilter: globalFilter,
-            setGlobalFilter: setGlobalFilter,
+            globalFilter,
+            setGlobalFilter,
             type: "client",
+            translate,
         }, children: children }));
 }
 
@@ -2871,7 +2875,7 @@ const DataTableServerContext = React.createContext({
  *
  * @link https://tanstack.com/table/latest/docs/guide/column-defs
  */
-function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, children, url, }) {
+function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, url, translate, children, }) {
     const table = reactTable.useReactTable({
         _features: [DensityFeature],
         data: query.data?.data ?? [],
@@ -2924,6 +2928,7 @@ function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSel
             globalFilter,
             setGlobalFilter,
             type: "server",
+            translate,
         }, children: jsxRuntime.jsx(DataTableServerContext.Provider, { value: { url, query }, children: children }) }));
 }
 
@@ -3093,12 +3098,13 @@ const TableFilterTags = () => {
         }) }));
 };
 
-const TableControls = ({ totalText = "Total:", fitTableWidth = false, fitTableHeight = false, isMobile = false, children = jsxRuntime.jsx(jsxRuntime.Fragment, {}), showGlobalFilter = false, showFilter = false, showFilterName = false, showFilterTags = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, filterOptions = [], extraItems = jsxRuntime.jsx(jsxRuntime.Fragment, {}), loading = false, hasError = false, }) => {
-    return (jsxRuntime.jsxs(react.Grid, { templateRows: "auto 1fr auto", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", gap: "0.5rem", children: [jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 2, children: [jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", children: [jsxRuntime.jsx(react.Box, { children: jsxRuntime.jsx(EditViewButton, { text: isMobile ? undefined : "View", icon: jsxRuntime.jsx(md.MdOutlineViewColumn, {}) }) }), jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", alignItems: "center", justifySelf: "end", children: [loading && jsxRuntime.jsx(react.Spinner, { size: "sm" }), hasError && (jsxRuntime.jsx(Tooltip, { content: "An error occurred while fetching data", children: jsxRuntime.jsx(react.Icon, { as: bs.BsExclamationCircleFill, color: "red.400" }) })), showGlobalFilter && jsxRuntime.jsx(GlobalFilter, {}), showFilter && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(EditFilterButton, { text: isMobile ? undefined : "Advanced Filter" }) })), showReload && jsxRuntime.jsx(ReloadButton, {}), extraItems] })] }), filterOptions.length > 0 && (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "0.5rem", children: filterOptions.map((column) => {
+const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children = jsxRuntime.jsx(jsxRuntime.Fragment, {}), showGlobalFilter = false, showFilter = false, showFilterName = false, showFilterTags = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, showView = true, filterOptions = [], extraItems = jsxRuntime.jsx(jsxRuntime.Fragment, {}), loading = false, hasError = false, }) => {
+    const { translate } = useDataTableContext();
+    return (jsxRuntime.jsxs(react.Grid, { templateRows: "auto 1fr auto", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", gap: "0.5rem", children: [jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 2, children: [jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", children: [jsxRuntime.jsx(react.Box, { children: showView && jsxRuntime.jsx(ViewDialog, { icon: jsxRuntime.jsx(md.MdOutlineViewColumn, {}) }) }), jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", alignItems: "center", justifySelf: "end", children: [loading && jsxRuntime.jsx(react.Spinner, { size: "sm" }), hasError && (jsxRuntime.jsx(Tooltip, { content: translate.t("hasError"), children: jsxRuntime.jsx(react.Icon, { as: bs.BsExclamationCircleFill, color: "red.400" }) })), showGlobalFilter && jsxRuntime.jsx(GlobalFilter, {}), showFilter && jsxRuntime.jsx(FilterDialog, {}), showReload && jsxRuntime.jsx(ReloadButton, {}), extraItems] })] }), filterOptions.length > 0 && (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "0.5rem", children: filterOptions.map((column) => {
                             return (jsxRuntime.jsxs(react.Flex, { alignItems: "center", flexFlow: "wrap", gap: "0.5rem", children: [showFilterName && jsxRuntime.jsxs(react.Text, { children: [column, ":"] }), jsxRuntime.jsx(FilterOptions, { column: column })] }, column));
                         }) })), showFilterTags && (jsxRuntime.jsx(react.Flex, { children: jsxRuntime.jsx(TableFilterTags, {}) }))] }), jsxRuntime.jsx(react.Grid, { overflow: "auto", backgroundColor: "gray.50", _dark: {
                     backgroundColor: "gray.900",
-                }, children: children }), jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", children: [jsxRuntime.jsxs(react.Flex, { gap: "1rem", alignItems: "center", children: [showPageSizeControl && jsxRuntime.jsx(PageSizeControl, {}), showPageCountText && (jsxRuntime.jsxs(react.Flex, { children: [jsxRuntime.jsx(react.Text, { paddingRight: "0.5rem", children: totalText }), jsxRuntime.jsx(RowCountText, {})] }))] }), jsxRuntime.jsx(react.Box, { justifySelf: "end", children: showPagination && jsxRuntime.jsx(TablePagination, {}) })] })] }));
+                }, children: children }), jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", children: [jsxRuntime.jsxs(react.Flex, { gap: "1rem", alignItems: "center", children: [showPageSizeControl && jsxRuntime.jsx(PageSizeControl, {}), showPageCountText && (jsxRuntime.jsxs(react.Flex, { children: [jsxRuntime.jsx(react.Text, { paddingRight: "0.5rem", children: translate.t("rowcount.total") }), jsxRuntime.jsx(RowCountText, {})] }))] }), jsxRuntime.jsx(react.Box, { justifySelf: "end", children: showPagination && jsxRuntime.jsx(Pagination, {}) })] })] }));
 };
 
 const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, showSelector = false, alwaysShowSelector = true, }) => {
@@ -3357,7 +3363,7 @@ const useDataTable = ({ default: { sorting: defaultSorting = [], pagination: def
     columnVisibility: {},
     globalFilter: "",
     density: "sm",
-}, } = {
+}, keyPrefix = "", } = {
     default: {
         sorting: [],
         pagination: {
@@ -3380,6 +3386,7 @@ const useDataTable = ({ default: { sorting: defaultSorting = [], pagination: def
     const [globalFilter, setGlobalFilter] = React.useState(defaultGlobalFilter);
     const [density, setDensity] = React.useState(defaultDensity);
     const [columnVisibility, setColumnVisibility] = React.useState(defaultColumnVisibility);
+    const translate = reactI18next.useTranslation("", { keyPrefix });
     return {
         sorting,
         setSorting,
@@ -3397,6 +3404,7 @@ const useDataTable = ({ default: { sorting: defaultSorting = [], pagination: def
         setDensity,
         columnVisibility,
         setColumnVisibility,
+        translate,
     };
 };
 
@@ -3415,10 +3423,7 @@ const useDataTableServer = ({ url, default: { sorting: defaultSorting = [], pagi
     columnVisibility: {},
     globalFilter: "",
     density: "sm",
-},
-// debounce = true,
-// debounceDelay = 1000,
- }) => {
+}, 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);
@@ -3448,6 +3453,7 @@ const useDataTableServer = ({ url, default: { sorting: defaultSorting = [], pagi
             data: [],
         },
     });
+    const translate = reactI18next.useTranslation("", { keyPrefix });
     return {
         sorting,
         setSorting,
@@ -3466,6 +3472,7 @@ const useDataTableServer = ({ url, default: { sorting: defaultSorting = [], pagi
         columnVisibility,
         setColumnVisibility,
         query,
+        translate,
     };
 };
 
@@ -4819,16 +4826,16 @@ exports.DataTableServer = DataTableServer;
 exports.DefaultCardTitle = DefaultCardTitle;
 exports.DefaultTable = DefaultTable;
 exports.DensityToggleButton = DensityToggleButton;
-exports.EditFilterButton = EditFilterButton;
 exports.EditOrderButton = EditOrderButton;
 exports.EditSortingButton = EditSortingButton;
-exports.EditViewButton = EditViewButton;
 exports.EmptyState = EmptyState;
 exports.ErrorAlert = ErrorAlert;
+exports.FilterDialog = FilterDialog;
 exports.FilterOptions = FilterOptions;
 exports.Form = Form;
 exports.GlobalFilter = GlobalFilter;
 exports.PageSizeControl = PageSizeControl;
+exports.Pagination = Pagination;
 exports.RecordDisplay = RecordDisplay;
 exports.ReloadButton = ReloadButton;
 exports.ResetFilteringButton = ResetFilteringButton;
@@ -4847,11 +4854,11 @@ exports.TableFooter = TableFooter;
 exports.TableHeader = TableHeader;
 exports.TableLoadingComponent = TableLoadingComponent;
 exports.TableOrderer = TableOrderer;
-exports.TablePagination = TablePagination;
 exports.TableSelector = TableSelector;
 exports.TableSorter = TableSorter;
 exports.TableViewer = TableViewer;
 exports.TextCell = TextCell;
+exports.ViewDialog = ViewDialog;
 exports.getColumns = getColumns;
 exports.getMultiDates = getMultiDates;
 exports.getRangeDates = getRangeDates;

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, Flex, Text, Tag as Tag$1, Input, useDisclosure, DialogBackdrop, CheckboxCard as CheckboxCard$1, Menu, createRecipeContext, createContext as createContext$1, Pagination, usePaginationContext, Image, Card, DataList, Checkbox as Checkbox$1, Table as Table$1, Tooltip as Tooltip$1, Group, InputElement, Icon, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, EmptyState as EmptyState$2, VStack, List, Alert, Popover, Field as Field$1, HoverCard, NumberInput, Accordion, Show, RadioCard, CheckboxGroup, Heading, Center } from '@chakra-ui/react';
+import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, Flex, Text, Tag as Tag$1, Input, useDisclosure, DialogBackdrop, CheckboxCard as CheckboxCard$1, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, Image, Card, DataList, Checkbox as Checkbox$1, Table as Table$1, Tooltip as Tooltip$1, Group, InputElement, Icon, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, EmptyState as EmptyState$2, VStack, List, Alert, Popover, Field as Field$1, HoverCard, NumberInput, Accordion, Show, RadioCard, CheckboxGroup, Heading, Center } from '@chakra-ui/react';
 import { AiOutlineColumnWidth } from 'react-icons/ai';
 import * as React from 'react';
 import React__default, { createContext, useContext, useState, useEffect, useRef } from 'react';
@@ -25,17 +25,18 @@ import { useQueryClient, useQuery } from '@tanstack/react-query';
 import { IoReload } from 'react-icons/io5';
 import { GrAscend, GrDescend } from 'react-icons/gr';
 import { HiColorSwatch, HiOutlineInformationCircle } from 'react-icons/hi';
+import { useTranslation } from 'react-i18next';
 import axios from 'axios';
 import { useFormContext, FormProvider, useForm as useForm$1 } from 'react-hook-form';
 import dayjs from 'dayjs';
 import { TiDeleteOutline } from 'react-icons/ti';
-import { useTranslation } from 'react-i18next';
 
 const DataTableContext = createContext({
     table: {},
     globalFilter: "",
     setGlobalFilter: () => { },
     type: "client",
+    translate: {},
 });
 
 const useDataTableContext = () => {
@@ -75,7 +76,7 @@ Dialog.Backdrop;
 const DialogTitle = Dialog.Title;
 Dialog.Description;
 const DialogTrigger = Dialog.Trigger;
-const DialogActionTrigger = Dialog.ActionTrigger;
+Dialog.ActionTrigger;
 
 const Radio = React.forwardRef(function Radio(props, ref) {
     const { children, inputProps, rootRef, ...rest } = props;
@@ -353,9 +354,10 @@ const ResetFilteringButton = ({ text = "Reset Filtering", }) => {
         }, children: text }));
 };
 
-const EditFilterButton = ({ text, title = "Edit Filter", closeText = "Close", resetText = "Reset", icon = jsx(MdFilterAlt, {}), }) => {
+const FilterDialog = ({ icon = jsx(MdFilterAlt, {}), }) => {
     const filterModal = useDisclosure();
-    return (jsx(Fragment, { children: jsx(DialogRoot, { size: ["full", "full", "md", "md"], open: filterModal.open, children: jsxs(DialogRoot, { children: [jsx(DialogTrigger, { asChild: true, children: jsxs(Button$1, { as: Box, variant: "ghost", onClick: filterModal.onOpen, children: [icon, " ", text] }) }), jsxs(DialogContent, { children: [jsx(DialogHeader, { children: jsx(DialogTitle, { children: title }) }), jsx(DialogBody, { children: jsxs(Flex, { flexFlow: "column", gap: "1rem", children: [jsx(TableFilter, {}), jsx(ResetFilteringButton, { text: resetText })] }) }), jsxs(DialogFooter, { children: [jsx(DialogActionTrigger, { asChild: true, children: jsx(Button$1, { onClick: filterModal.onClose, children: closeText }) }), jsx(Button$1, { children: "Save" })] }), jsx(DialogCloseTrigger, {})] })] }) }) }));
+    const { translate } = useDataTableContext();
+    return (jsxs(DialogRoot, { size: ["full", "full", "md", "md"], open: filterModal.open, children: [jsx(DialogTrigger, { asChild: true, children: jsxs(Button$1, { as: Box, variant: "ghost", onClick: filterModal.onOpen, children: [icon, " ", translate.t("filterDialog.buttonText")] }) }), jsxs(DialogContent, { children: [jsx(DialogHeader, { children: jsx(DialogTitle, { children: translate.t("filterDialog.title") }) }), jsx(DialogBody, { display: "flex", flexFlow: "column", children: jsx(TableFilter, {}) }), jsxs(DialogFooter, { children: [jsx(ResetFilteringButton, { text: translate.t("filterDialog.reset") }), jsx(Button$1, { onClick: filterModal.onClose, variant: "subtle", children: translate.t("filterDialog.close") })] }), jsx(DialogCloseTrigger, { onClick: filterModal.onClose })] })] }));
 };
 
 const ColumnOrderChanger = ({ columns }) => {
@@ -2432,9 +2434,10 @@ const TableViewer = () => {
         }) }));
 };
 
-const EditViewButton = ({ text, icon = jsx(IoMdEye, {}), title = "Edit View", }) => {
+const ViewDialog = ({ icon = jsx(IoMdEye, {}) }) => {
     const viewModel = useDisclosure();
-    return (jsx(Fragment, { children: jsxs(DialogRoot, { children: [jsx(DialogBackdrop, {}), jsx(DialogTrigger, { asChild: true, children: jsxs(Button$1, { as: Box, variant: "ghost", onClick: viewModel.onOpen, children: [icon, " ", text] }) }), jsxs(DialogContent, { children: [jsx(DialogCloseTrigger, {}), jsxs(DialogHeader, { children: [jsx(DialogTitle, {}), title] }), jsx(DialogBody, { children: jsx(TableViewer, {}) }), jsx(DialogFooter, {})] })] }) }));
+    const { translate } = useDataTableContext();
+    return (jsxs(DialogRoot, { children: [jsx(DialogBackdrop, {}), jsx(DialogTrigger, { asChild: true, children: jsxs(Button$1, { as: Box, variant: "ghost", onClick: viewModel.onOpen, children: [icon, " ", translate.t("viewDialog.buttonText")] }) }), jsxs(DialogContent, { children: [jsx(DialogCloseTrigger, {}), jsx(DialogHeader, { children: jsx(DialogTitle, { children: translate.t("viewDialog.title") }) }), jsx(DialogBody, { children: jsx(TableViewer, {}) }), jsx(DialogFooter, {})] })] }));
 };
 
 const MenuContent = React.forwardRef(function MenuContent(props, ref) {
@@ -2470,9 +2473,9 @@ const MenuTrigger = Menu.Trigger;
 
 const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
     const { table } = useDataTableContext();
-    return (jsx(Fragment, { children: jsxs(MenuRoot, { children: [jsx(MenuTrigger, { asChild: true, children: jsxs(Button$1, { variant: "ghost", gap: "0.5rem", children: [table.getState().pagination.pageSize, " ", jsx(BiDownArrow, {})] }) }), jsx(MenuContent, { children: pageSizes.map((pageSize) => (jsx(MenuItem, { value: `chakra-table-pageSize-${pageSize}`, onClick: () => {
-                            table.setPageSize(Number(pageSize));
-                        }, children: pageSize }, `chakra-table-pageSize-${pageSize}`))) })] }) }));
+    return (jsxs(MenuRoot, { children: [jsx(MenuTrigger, { asChild: true, children: jsxs(Button$1, { variant: "ghost", gap: "0.5rem", children: [table.getState().pagination.pageSize, " ", jsx(BiDownArrow, {})] }) }), jsx(MenuContent, { children: pageSizes.map((pageSize) => (jsx(MenuItem, { value: `chakra-table-pageSize-${pageSize}`, onClick: () => {
+                        table.setPageSize(Number(pageSize));
+                    }, children: pageSize }, `chakra-table-pageSize-${pageSize}`))) })] }));
 };
 
 const ResetSelectionButton = ({ text = "Reset Selection", }) => {
@@ -2507,11 +2510,11 @@ const variantMap = {
 };
 const PaginationRoot = React.forwardRef(function PaginationRoot(props, ref) {
     const { size = "sm", variant = "outline", getHref, ...rest } = props;
-    return (jsx(RootPropsProvider, { value: { size, variantMap: variantMap[variant], getHref }, children: jsx(Pagination.Root, { ref: ref, type: getHref ? "link" : "button", ...rest }) }));
+    return (jsx(RootPropsProvider, { value: { size, variantMap: variantMap[variant], getHref }, children: jsx(Pagination$1.Root, { ref: ref, type: getHref ? "link" : "button", ...rest }) }));
 });
 const PaginationEllipsis = React.forwardRef(function PaginationEllipsis(props, ref) {
     const { size, variantMap } = useRootProps();
-    return (jsx(Pagination.Ellipsis, { ref: ref, ...props, asChild: true, children: jsx(Button$1, { as: "span", variant: variantMap.ellipsis, size: size, children: jsx(HiMiniEllipsisHorizontal, {}) }) }));
+    return (jsx(Pagination$1.Ellipsis, { ref: ref, ...props, asChild: true, children: jsx(Button$1, { as: "span", variant: variantMap.ellipsis, size: size, children: jsx(HiMiniEllipsisHorizontal, {}) }) }));
 });
 const PaginationItem = React.forwardRef(function PaginationItem(props, ref) {
     const { page } = usePaginationContext();
@@ -2521,7 +2524,7 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) {
     if (getHref) {
         return (jsx(LinkButton, { href: getHref(props.value), variant: variant, size: size, children: props.value }));
     }
-    return (jsx(Pagination.Item, { ref: ref, ...props, asChild: true, children: jsx(Button$1, { variant: variant, size: size, children: props.value }) }));
+    return (jsx(Pagination$1.Item, { ref: ref, ...props, asChild: true, children: jsx(Button$1, { variant: variant, size: size, children: props.value }) }));
 });
 const PaginationPrevTrigger = React.forwardRef(function PaginationPrevTrigger(props, ref) {
     const { size, variantMap, getHref } = useRootProps();
@@ -2529,7 +2532,7 @@ const PaginationPrevTrigger = React.forwardRef(function PaginationPrevTrigger(pr
     if (getHref) {
         return (jsx(LinkButton, { href: previousPage != null ? getHref(previousPage) : undefined, variant: variantMap.default, size: size, children: jsx(HiChevronLeft, {}) }));
     }
-    return (jsx(Pagination.PrevTrigger, { ref: ref, asChild: true, ...props, children: jsx(IconButton, { variant: variantMap.default, size: size, children: jsx(HiChevronLeft, {}) }) }));
+    return (jsx(Pagination$1.PrevTrigger, { ref: ref, asChild: true, ...props, children: jsx(IconButton, { variant: variantMap.default, size: size, children: jsx(HiChevronLeft, {}) }) }));
 });
 const PaginationNextTrigger = React.forwardRef(function PaginationNextTrigger(props, ref) {
     const { size, variantMap, getHref } = useRootProps();
@@ -2537,10 +2540,10 @@ const PaginationNextTrigger = React.forwardRef(function PaginationNextTrigger(pr
     if (getHref) {
         return (jsx(LinkButton, { href: nextPage != null ? getHref(nextPage) : undefined, variant: variantMap.default, size: size, children: jsx(HiChevronRight, {}) }));
     }
-    return (jsx(Pagination.NextTrigger, { ref: ref, asChild: true, ...props, children: jsx(IconButton, { variant: variantMap.default, size: size, children: jsx(HiChevronRight, {}) }) }));
+    return (jsx(Pagination$1.NextTrigger, { ref: ref, asChild: true, ...props, children: jsx(IconButton, { variant: variantMap.default, size: size, children: jsx(HiChevronRight, {}) }) }));
 });
 const PaginationItems = (props) => {
-    return (jsx(Pagination.Context, { children: ({ pages }) => pages.map((page, index) => {
+    return (jsx(Pagination$1.Context, { children: ({ pages }) => pages.map((page, index) => {
             return page.type === "ellipsis" ? (jsx(PaginationEllipsis, { index: index, ...props }, index)) : (jsx(PaginationItem, { type: "page", value: page.value, ...props }, index));
         }) }));
 };
@@ -2558,7 +2561,7 @@ const PaginationPageText = React.forwardRef(function PaginationPageText(props, r
 });
 
 // TODO: not working in client side
-const TablePagination = () => {
+const Pagination = () => {
     const { table, type } = useDataTableContext();
     const getCount = () => {
         if (type === "client") {
@@ -2781,7 +2784,7 @@ const fuzzyFilter = (row, columnId, value, addMeta) => {
  *
  * @link https://tanstack.com/table/latest/docs/guide/column-defs
  */
-function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, children, }) {
+function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, translate, children, }) {
     const table = useReactTable({
         _features: [DensityFeature],
         data: data,
@@ -2830,9 +2833,10 @@ function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSel
     });
     return (jsx(DataTableContext.Provider, { value: {
             table: table,
-            globalFilter: globalFilter,
-            setGlobalFilter: setGlobalFilter,
+            globalFilter,
+            setGlobalFilter,
             type: "client",
+            translate,
         }, children: children }));
 }
 
@@ -2851,7 +2855,7 @@ const DataTableServerContext = createContext({
  *
  * @link https://tanstack.com/table/latest/docs/guide/column-defs
  */
-function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, children, url, }) {
+function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, url, translate, children, }) {
     const table = useReactTable({
         _features: [DensityFeature],
         data: query.data?.data ?? [],
@@ -2904,6 +2908,7 @@ function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSel
             globalFilter,
             setGlobalFilter,
             type: "server",
+            translate,
         }, children: jsx(DataTableServerContext.Provider, { value: { url, query }, children: children }) }));
 }
 
@@ -3073,12 +3078,13 @@ const TableFilterTags = () => {
         }) }));
 };
 
-const TableControls = ({ totalText = "Total:", fitTableWidth = false, fitTableHeight = false, isMobile = false, children = jsx(Fragment, {}), showGlobalFilter = false, showFilter = false, showFilterName = false, showFilterTags = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, filterOptions = [], extraItems = jsx(Fragment, {}), loading = false, hasError = false, }) => {
-    return (jsxs(Grid, { templateRows: "auto 1fr auto", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", gap: "0.5rem", children: [jsxs(Flex, { flexFlow: "column", gap: 2, children: [jsxs(Flex, { justifyContent: "space-between", children: [jsx(Box, { children: jsx(EditViewButton, { text: isMobile ? undefined : "View", icon: jsx(MdOutlineViewColumn, {}) }) }), jsxs(Flex, { gap: "0.5rem", alignItems: "center", justifySelf: "end", children: [loading && jsx(Spinner, { size: "sm" }), hasError && (jsx(Tooltip, { content: "An error occurred while fetching data", children: jsx(Icon, { as: BsExclamationCircleFill, color: "red.400" }) })), showGlobalFilter && jsx(GlobalFilter, {}), showFilter && (jsx(Fragment, { children: jsx(EditFilterButton, { text: isMobile ? undefined : "Advanced Filter" }) })), showReload && jsx(ReloadButton, {}), extraItems] })] }), filterOptions.length > 0 && (jsx(Flex, { flexFlow: "column", gap: "0.5rem", children: filterOptions.map((column) => {
+const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children = jsx(Fragment, {}), showGlobalFilter = false, showFilter = false, showFilterName = false, showFilterTags = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, showView = true, filterOptions = [], extraItems = jsx(Fragment, {}), loading = false, hasError = false, }) => {
+    const { translate } = useDataTableContext();
+    return (jsxs(Grid, { templateRows: "auto 1fr auto", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", gap: "0.5rem", children: [jsxs(Flex, { flexFlow: "column", gap: 2, children: [jsxs(Flex, { justifyContent: "space-between", children: [jsx(Box, { children: showView && jsx(ViewDialog, { icon: jsx(MdOutlineViewColumn, {}) }) }), jsxs(Flex, { gap: "0.5rem", alignItems: "center", justifySelf: "end", children: [loading && jsx(Spinner, { size: "sm" }), hasError && (jsx(Tooltip, { content: translate.t("hasError"), children: jsx(Icon, { as: BsExclamationCircleFill, color: "red.400" }) })), showGlobalFilter && jsx(GlobalFilter, {}), showFilter && jsx(FilterDialog, {}), showReload && jsx(ReloadButton, {}), extraItems] })] }), filterOptions.length > 0 && (jsx(Flex, { flexFlow: "column", gap: "0.5rem", children: filterOptions.map((column) => {
                             return (jsxs(Flex, { alignItems: "center", flexFlow: "wrap", gap: "0.5rem", children: [showFilterName && jsxs(Text, { children: [column, ":"] }), jsx(FilterOptions, { column: column })] }, column));
                         }) })), showFilterTags && (jsx(Flex, { children: jsx(TableFilterTags, {}) }))] }), jsx(Grid, { overflow: "auto", backgroundColor: "gray.50", _dark: {
                     backgroundColor: "gray.900",
-                }, children: children }), jsxs(Flex, { justifyContent: "space-between", children: [jsxs(Flex, { gap: "1rem", alignItems: "center", children: [showPageSizeControl && jsx(PageSizeControl, {}), showPageCountText && (jsxs(Flex, { children: [jsx(Text, { paddingRight: "0.5rem", children: totalText }), jsx(RowCountText, {})] }))] }), jsx(Box, { justifySelf: "end", children: showPagination && jsx(TablePagination, {}) })] })] }));
+                }, children: children }), jsxs(Flex, { justifyContent: "space-between", children: [jsxs(Flex, { gap: "1rem", alignItems: "center", children: [showPageSizeControl && jsx(PageSizeControl, {}), showPageCountText && (jsxs(Flex, { children: [jsx(Text, { paddingRight: "0.5rem", children: translate.t("rowcount.total") }), jsx(RowCountText, {})] }))] }), jsx(Box, { justifySelf: "end", children: showPagination && jsx(Pagination, {}) })] })] }));
 };
 
 const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, showSelector = false, alwaysShowSelector = true, }) => {
@@ -3337,7 +3343,7 @@ const useDataTable = ({ default: { sorting: defaultSorting = [], pagination: def
     columnVisibility: {},
     globalFilter: "",
     density: "sm",
-}, } = {
+}, keyPrefix = "", } = {
     default: {
         sorting: [],
         pagination: {
@@ -3360,6 +3366,7 @@ const useDataTable = ({ default: { sorting: defaultSorting = [], pagination: def
     const [globalFilter, setGlobalFilter] = useState(defaultGlobalFilter);
     const [density, setDensity] = useState(defaultDensity);
     const [columnVisibility, setColumnVisibility] = useState(defaultColumnVisibility);
+    const translate = useTranslation("", { keyPrefix });
     return {
         sorting,
         setSorting,
@@ -3377,6 +3384,7 @@ const useDataTable = ({ default: { sorting: defaultSorting = [], pagination: def
         setDensity,
         columnVisibility,
         setColumnVisibility,
+        translate,
     };
 };
 
@@ -3395,10 +3403,7 @@ const useDataTableServer = ({ url, default: { sorting: defaultSorting = [], pagi
     columnVisibility: {},
     globalFilter: "",
     density: "sm",
-},
-// debounce = true,
-// debounceDelay = 1000,
- }) => {
+}, keyPrefix, }) => {
     const [sorting, setSorting] = useState(defaultSorting);
     const [columnFilters, setColumnFilters] = useState(defaultColumnFilters); // can set initial column filter state here
     const [pagination, setPagination] = useState(defaultPagination);
@@ -3428,6 +3433,7 @@ const useDataTableServer = ({ url, default: { sorting: defaultSorting = [], pagi
             data: [],
         },
     });
+    const translate = useTranslation("", { keyPrefix });
     return {
         sorting,
         setSorting,
@@ -3446,6 +3452,7 @@ const useDataTableServer = ({ url, default: { sorting: defaultSorting = [], pagi
         columnVisibility,
         setColumnVisibility,
         query,
+        translate,
     };
 };
 
@@ -4792,4 +4799,4 @@ const getMultiDates = ({ selected, selectedDate, selectedDates, selectable, }) =
     }
 };
 
-export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultTable, DensityToggleButton, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, EmptyState, ErrorAlert, FilterOptions, Form, GlobalFilter, PageSizeControl, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableOrderer, TablePagination, TableSelector, TableSorter, TableViewer, TextCell, getColumns, getMultiDates, getRangeDates, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
+export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultTable, DensityToggleButton, EditOrderButton, EditSortingButton, EmptyState, ErrorAlert, FilterDialog, FilterOptions, Form, GlobalFilter, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableOrderer, TableSelector, TableSorter, TableViewer, TextCell, ViewDialog, getColumns, getMultiDates, getRangeDates, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };

package/dist/types/components/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/Controls/Pagination.d.ts

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

package/dist/types/components/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/DataTable.d.ts

@@ -2,6 +2,7 @@ import { ColumnDef, ColumnFiltersState, ColumnOrderState, FilterFn, OnChangeFn,
 import { ReactNode } from "react";
 import { RankingInfo } from "@tanstack/match-sorter-utils";
 import { DensityState } from "../Controls/DensityFeature";
+import { UseTranslationResponse } from "react-i18next";
 declare module "@tanstack/react-table" {
     interface FilterFns {
         fuzzy: FilterFn<unknown>;
@@ -47,6 +48,7 @@ export interface DataTableProps<TData = unknown> {
     setColumnOrder: OnChangeFn<ColumnOrderState>;
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;
+    translate: UseTranslationResponse<any, any>;
 }
 /**
  * DataTable will create a context to hold all values to
@@ -58,4 +60,4 @@ export interface DataTableProps<TData = unknown> {
  *
  * @link https://tanstack.com/table/latest/docs/guide/column-defs
  */
-export 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>): import("react/jsx-runtime").JSX.Element;
+export 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>): import("react/jsx-runtime").JSX.Element;

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

@@ -3,6 +3,7 @@ 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 { DataResponse } from "./useDataTableServer";
+import { UseTranslationResponse } from "react-i18next";
 export interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown>> {
     children: ReactNode | ReactNode[];
     /**
@@ -34,6 +35,7 @@ export interface DataTableServerProps<TData extends DataResponse = DataResponse<
     setColumnVisibility: OnChangeFn<VisibilityState>;
     query: UseQueryResult<TData>;
     url: string;
+    translate: UseTranslationResponse<any, any>;
 }
 /**
  * DataTableServer will create a context to hold all values to
@@ -46,4 +48,4 @@ export interface DataTableServerProps<TData extends DataResponse = DataResponse<
  *
  * @link https://tanstack.com/table/latest/docs/guide/column-defs
  */
-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;
+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, url, translate, children, }: DataTableServerProps<TData>): import("react/jsx-runtime").JSX.Element;

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

@@ -3,7 +3,6 @@ export interface TableControlsProps {
     totalText?: string;
     fitTableWidth?: boolean;
     fitTableHeight?: boolean;
-    isMobile?: boolean;
     children?: ReactNode;
     showGlobalFilter?: boolean;
     showFilter?: boolean;
@@ -13,9 +12,10 @@ export interface TableControlsProps {
     showPagination?: boolean;
     showPageSizeControl?: boolean;
     showPageCountText?: boolean;
+    showView?: boolean;
     filterOptions?: string[];
     extraItems?: ReactNode;
     loading?: boolean;
     hasError?: boolean;
 }
-export declare const TableControls: ({ totalText, fitTableWidth, fitTableHeight, isMobile, children, showGlobalFilter, showFilter, showFilterName, showFilterTags, showReload, showPagination, showPageSizeControl, showPageCountText, filterOptions, extraItems, loading, hasError, }: TableControlsProps) => import("react/jsx-runtime").JSX.Element;
+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/context/DataTableContext.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
 import { OnChangeFn, Table } from "@tanstack/react-table";
+import { UseTranslationResponse } from "react-i18next";
 export interface DataTableContext<TData = unknown> {
     table: Table<TData>;
     globalFilter: string;
     setGlobalFilter: OnChangeFn<string>;
     type: "client" | "server";
+    translate: UseTranslationResponse<any, any>;
 }
 export declare const DataTableContext: import("react").Context<DataTableContext<unknown>>;

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

@@ -1,5 +1,6 @@
 import { ColumnFiltersState, ColumnOrderState, OnChangeFn, PaginationState, RowSelectionState, SortingState, VisibilityState } from "@tanstack/react-table";
 import { DensityState } from "../Controls/DensityFeature";
+import { UseTranslationResponse } from "react-i18next";
 export interface DataTableDefaultState {
     sorting?: SortingState;
     columnFilters?: ColumnFiltersState;
@@ -12,6 +13,7 @@ export interface DataTableDefaultState {
 }
 export interface UseDataTableProps {
     default?: DataTableDefaultState;
+    keyPrefix?: string;
 }
 export interface UseDataTableReturn {
     sorting: SortingState;
@@ -30,5 +32,6 @@ export interface UseDataTableReturn {
     setColumnOrder: OnChangeFn<ColumnOrderState>;
     setDensity: OnChangeFn<DensityState>;
     setColumnVisibility: OnChangeFn<VisibilityState>;
+    translate: UseTranslationResponse<any, any>;
 }
-export declare const useDataTable: ({ default: { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, }, }?: UseDataTableProps) => UseDataTableReturn;
+export declare const useDataTable: ({ default: { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, }, keyPrefix, }?: UseDataTableProps) => UseDataTableReturn;

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

@@ -24,4 +24,4 @@ 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, }, }: UseDataTableServerProps) => UseDataTableServerReturn<TData>;
+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>;

package/dist/types/index.d.ts

@@ -58,16 +58,16 @@ declare module "@tanstack/react-table" {
     }
 }
 export * from "./components/Controls/DensityToggleButton";
-export * from "./components/Controls/EditFilterButton";
+export * from "./components/Controls/FilterDialog";
 export * from "./components/Controls/EditOrderButton";
 export * from "./components/Controls/EditSortingButton";
-export * from "./components/Controls/EditViewButton";
+export * from "./components/Controls/ViewDialog";
 export * from "./components/Controls/PageSizeControl";
 export * from "./components/Controls/ResetFilteringButton";
 export * from "./components/Controls/ResetSelectionButton";
 export * from "./components/Controls/ResetSortingButton";
 export * from "./components/Controls/RowCountText";
-export * from "./components/Controls/TablePagination";
+export * from "./components/Controls/Pagination";
 export * from "./components/DataTable/CardHeader";
 export * from "./components/DataTable/DataDisplay";
 export * from "./components/DataTable/DataTable";

package/package.json

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