@bsol-oss/react-datatable5 12.0.0-beta.44 → 12.0.0-beta.46

package/dist/index.mjs

@@ -71,6 +71,10 @@ const DataTableContext = createContext({
     },
     rowSelection: {},
     columnVisibility: {},
+    tableLabel: {
+        view: "View",
+        edit: "Edit",
+    },
 });
 
 const useDataTableContext = () => {
@@ -126,11 +130,13 @@ const TableSorter = () => {
             }) }))) }));
 };
 
-const ResetSortingButton = ({ text = "Reset Sorting", }) => {
+const ResetSortingButton = () => {
     const { table } = useDataTableContext();
+    const { tableLabel } = useDataTableContext();
+    const { resetSorting } = tableLabel;
     return (jsx(Button$1, { onClick: () => {
             table.resetSorting();
-        }, children: text }));
+        }, children: resetSorting }));
 };
 
 const EditSortingButton = ({ text, icon = jsx(MdOutlineSort, {}), title = "Edit Sorting", }) => {
@@ -341,10 +347,11 @@ const Filter = ({ column }) => {
     if (filterVariant === "select") {
         return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(RadioGroup, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", onValueChange: (details) => {
                         column.setFilterValue(details.value);
-                    }, children: jsx(Flex, { flexFlow: "wrap", gap: "0.5rem", children: filterOptions.map((item) => (jsx(Radio, { value: item, children: item }, item))) }) })] }, column.id));
+                    }, children: jsxs(Flex, { flexFlow: "wrap", gap: "0.5rem", children: [filterOptions.length === 0 && jsx(Text, { children: "No filter options" }), filterOptions.length > 0 &&
+                                filterOptions.map((item) => (jsx(Radio, { value: item.value, children: item.label }, item.value)))] }) })] }, column.id));
     }
     if (filterVariant === "tag") {
-        return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(TagFilter, { availableTags: filterOptions, selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
+        return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(TagFilter, { availableTags: filterOptions.map((item) => item.value), selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
                         if (tags.length === 0) {
                             return column.setFilterValue(undefined);
                         }
@@ -407,17 +414,20 @@ const TableFilter = () => {
         }) }));
 };
 
-const ResetFilteringButton = ({ text = "Reset Filtering", }) => {
+const ResetFilteringButton = () => {
     const { table } = useDataTableContext();
+    const { tableLabel } = useDataTableContext();
+    const { filterReset } = tableLabel;
     return (jsx(Button$1, { onClick: () => {
             table.resetColumnFilters();
-        }, children: text }));
+        }, children: filterReset }));
 };
 
 const FilterDialog = ({ icon = jsx(MdFilterAlt, {}), }) => {
     const filterModal = useDisclosure();
-    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("filter_dialog.button_text")] }) }), jsxs(DialogContent, { children: [jsx(DialogHeader, { children: jsx(DialogTitle, { children: translate.t("filter_dialog.title") }) }), jsx(DialogBody, { display: "flex", flexFlow: "column", children: jsx(TableFilter, {}) }), jsxs(DialogFooter, { children: [jsx(ResetFilteringButton, { text: translate.t("filter_dialog.reset") }), jsx(Button$1, { onClick: filterModal.onClose, variant: "subtle", children: translate.t("filter_dialog.close") })] }), jsx(DialogCloseTrigger, { onClick: filterModal.onClose })] })] }));
+    const { tableLabel } = useDataTableContext();
+    const { filterButtonText, filterTitle, filterClose } = tableLabel;
+    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, " ", filterButtonText] }) }), jsxs(DialogContent, { children: [jsx(DialogHeader, { children: jsx(DialogTitle, { children: filterTitle }) }), jsx(DialogBody, { display: "flex", flexFlow: "column", children: jsx(TableFilter, {}) }), jsxs(DialogFooter, { children: [jsx(ResetFilteringButton, {}), jsx(Button$1, { onClick: filterModal.onClose, variant: "subtle", children: filterClose })] }), jsx(DialogCloseTrigger, { onClick: filterModal.onClose })] })] }));
 };
 
 const MenuContent = React.forwardRef(function MenuContent(props, ref) {
@@ -536,11 +546,13 @@ const Pagination = () => {
         }, children: jsxs(HStack, { children: [jsx(PaginationPrevTrigger, {}), jsx(PaginationItems, {}), jsx(PaginationNextTrigger, {})] }) }));
 };
 
-const ResetSelectionButton = ({ text = "Reset Selection", }) => {
+const ResetSelectionButton = () => {
     const { table } = useDataTableContext();
+    const { tableLabel } = useDataTableContext();
+    const { resetSelection } = tableLabel;
     return (jsx(Button$1, { onClick: () => {
             table.resetRowSelection();
-        }, children: text }));
+        }, children: resetSelection }));
 };
 
 const RowCountText = () => {
@@ -2551,8 +2563,9 @@ const TableViewer = () => {
 
 const ViewDialog = ({ icon = jsx(IoMdEye, {}) }) => {
     const viewModel = useDisclosure();
-    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("view_dialog.button_text")] }) }), jsxs(DialogContent, { children: [jsx(DialogCloseTrigger, {}), jsx(DialogHeader, { children: jsx(DialogTitle, { children: translate.t("view_dialog.title") }) }), jsx(DialogBody, { children: jsx(TableViewer, {}) }), jsx(DialogFooter, {})] })] }));
+    const { tableLabel } = useDataTableContext();
+    const { view } = tableLabel;
+    return (jsxs(DialogRoot, { children: [jsx(DialogBackdrop, {}), jsx(DialogTrigger, { asChild: true, children: jsxs(Button$1, { as: Box, variant: "ghost", onClick: viewModel.onOpen, children: [icon, " ", view] }) }), jsxs(DialogContent, { children: [jsx(DialogCloseTrigger, {}), jsx(DialogHeader, { children: jsx(DialogTitle, { children: view }) }), jsx(DialogBody, { children: jsx(TableViewer, {}) }), jsx(DialogFooter, {})] })] }));
 };
 
 const CardHeader = ({ row, imageColumnId = undefined, titleColumnId = undefined, tagColumnId = undefined, tagIcon = undefined, showTag = true, imageProps = {}, }) => {
@@ -2828,7 +2841,7 @@ function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSel
             setGlobalFilter,
             type: "client",
             translate,
-            columns,
+            columns: columns,
             sorting,
             setSorting,
             columnFilters,
@@ -2844,6 +2857,10 @@ function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSel
             columnVisibility,
             setColumnVisibility,
             data,
+            tableLabel: {
+                view: "View",
+                edit: "Edit",
+            },
         }, children: children }));
 }
 
@@ -2861,7 +2878,7 @@ function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSel
 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 ?? [],
+        data: (query.data?.data ?? []),
         rowCount: query.data?.count ?? 0,
         columns: columns,
         getCoreRowModel: getCoreRowModel(),
@@ -2907,12 +2924,12 @@ function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSel
         // for tanstack-table ts bug end
     });
     return (jsx(DataTableContext.Provider, { value: {
-            table: { ...table },
+            table: table,
             globalFilter,
             setGlobalFilter,
             type: "server",
             translate,
-            columns,
+            columns: columns,
             sorting,
             setSorting,
             columnFilters,
@@ -2965,17 +2982,19 @@ const GlobalFilter = () => {
                 } }) }) }));
 };
 
-const ReloadButton = ({ text = "Reload", variant = "icon", }) => {
+const ReloadButton = ({ variant = "icon", }) => {
     const { url } = useDataTableServerContext();
     const queryClient = useQueryClient();
+    const { tableLabel } = useDataTableContext();
+    const { reloadTooltip, reloadButtonText } = tableLabel;
     if (variant === "icon") {
-        return (jsx(Tooltip, { showArrow: true, content: "This is the tooltip content", children: jsx(Button, { variant: "ghost", onClick: () => {
+        return (jsx(Tooltip, { showArrow: true, content: reloadTooltip, children: jsx(Button, { variant: "ghost", onClick: () => {
                     queryClient.invalidateQueries({ queryKey: [url] });
                 }, "aria-label": "refresh", children: jsx(IoReload, {}) }) }));
     }
     return (jsxs(Button, { variant: "ghost", onClick: () => {
             queryClient.invalidateQueries({ queryKey: [url] });
-        }, children: [jsx(IoReload, {}), " ", text] }));
+        }, children: [jsx(IoReload, {}), " ", reloadButtonText] }));
 };
 
 const FilterOptions = ({ column }) => {
@@ -2984,6 +3003,7 @@ const FilterOptions = ({ column }) => {
     const options = tableColumn?.columnDef.meta?.filterOptions ?? [];
     return (jsx(Fragment, { children: options.map((option) => {
             const selected = table.getColumn(column)?.getFilterValue() === option;
+            const { label, value } = option;
             return (jsxs(Button$1, { size: "sm", onClick: () => {
                     if (selected) {
                         table.setColumnFilters((state) => {
@@ -2993,8 +3013,8 @@ const FilterOptions = ({ column }) => {
                         });
                         return;
                     }
-                    table.getColumn(column)?.setFilterValue(option);
-                }, variant: selected ? "solid" : "outline", display: "flex", gap: "0.25rem", children: [option, selected && jsx(MdClose, {})] }, option));
+                    table.getColumn(column)?.setFilterValue(value);
+                }, variant: selected ? "solid" : "outline", display: "flex", gap: "0.25rem", children: [label, selected && jsx(MdClose, {})] }, option.value));
         }) }));
 };
 
@@ -3010,10 +3030,12 @@ const TableFilterTags = () => {
 };
 
 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, gridProps = {}, }) => {
-    const { translate } = useDataTableContext();
-    return (jsxs(Grid, { templateRows: "auto 1fr", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", gap: "0.5rem", ...gridProps, 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("has_error"), 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", bg: { base: "colorPalette.50", _dark: "colorPalette.950" }, children: children }), (showPageSizeControl || showPageCountText || showPagination) && (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 { tableLabel } = useDataTableContext();
+    const { rowCountText, hasErrorText } = tableLabel;
+    return (jsxs(Grid, { templateRows: "auto 1fr", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", gap: "0.5rem", ...gridProps, 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: hasErrorText, 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((option) => {
+                            const { label, value } = option;
+                            return (jsxs(Flex, { alignItems: "center", flexFlow: "wrap", gap: "0.5rem", children: [showFilterName && jsxs(Text, { children: [label, ":"] }), jsx(FilterOptions, { column: value })] }, value));
+                        }) })), showFilterTags && (jsx(Flex, { children: jsx(TableFilterTags, {}) }))] }), jsx(Grid, { overflow: "auto", bg: { base: "colorPalette.50", _dark: "colorPalette.950" }, children: children }), (showPageSizeControl || showPageCountText || showPagination) && (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: rowCountText }), jsx(RowCountText, {})] }))] }), jsx(Box, { justifySelf: "end", children: showPagination && jsx(Pagination, {}) })] }))] }));
 };
 
 const EmptyState = React.forwardRef(function EmptyState(props, ref) {
@@ -3035,7 +3057,7 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
     return (jsxs(Checkbox$1.Root, { ref: rootRef, ...rest, children: [jsx(Checkbox$1.HiddenInput, { ref: ref, ...inputProps }), jsx(Checkbox$1.Control, { children: icon || jsx(Checkbox$1.Indicator, {}) }), children != null && (jsx(Checkbox$1.Label, { children: children }))] }));
 });
 
-const TableBody = ({ showSelector = false, alwaysShowSelector = true, canResize = true, }) => {
+const TableBody = ({ showSelector = false, canResize = true, }) => {
     "use no memo";
     const { table } = useDataTableContext();
     const SELECTION_BOX_WIDTH = 20;
@@ -3079,7 +3101,7 @@ const TableBody = ({ showSelector = false, alwaysShowSelector = true, canResize
                     })] }, `chakra-table-row-${row.id}`));
         }) }));
 };
-const TableRowSelector = ({ index, row, }) => {
+const TableRowSelector = ({ row, }) => {
     const { table } = useDataTableContext();
     const SELECTION_BOX_WIDTH = 20;
     return (jsx(Table$1.Cell, { padding: `${table.getDensityValue()}px`, display: "grid", color: {
@@ -3116,14 +3138,57 @@ const TableFooter = ({ showSelector = false, alwaysShowSelector = true, }) => {
                     // styling resize and pinning start
                     maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, display: "grid", children: jsx(MenuRoot$1, { children: jsx(MenuTrigger$1, { asChild: true, children: jsx(Box, { padding: `${table.getDensityValue()}px`, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", children: jsxs(Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
                                             ? null
-                                            : flexRender(header.column.columnDef.footer, header.getContext()), jsx(Box, { children: header.column.getCanSort() && (jsxs(Fragment, { children: [header.column.getIsSorted() === false && (
-                                                    // <UpDownIcon />
-                                                    jsx(Fragment, {})), header.column.getIsSorted() === "asc" && (jsx(BiUpArrow, {})), header.column.getIsSorted() === "desc" && (jsx(BiDownArrow, {}))] })) })] }) }) }) }) }, `chakra-table-footer-${header.column.id}-${footerGroup.id}`)))] }, `chakra-table-footergroup-${footerGroup.id}`))) }));
+                                            : flexRender(header.column.columnDef.footer, header.getContext()), jsx(Box, { children: header.column.getCanSort() && (jsxs(Fragment, { children: [header.column.getIsSorted() === false && jsx(Fragment, {}), header.column.getIsSorted() === "asc" && (jsx(BiUpArrow, {})), header.column.getIsSorted() === "desc" && (jsx(BiDownArrow, {}))] })) })] }) }) }) }) }, `chakra-table-footer-${header.column.id}-${footerGroup.id}`)))] }, `chakra-table-footergroup-${footerGroup.id}`))) }));
 };
 
-const TableHeader = ({ canResize = true, showSelector = false, isSticky = true, tableHeaderProps = {}, tableRowProps = {}, }) => {
+// Default text values
+const DEFAULT_HEADER_TEXTS = {
+    pinColumn: "Pin Column",
+    cancelPin: "Cancel Pin",
+    sortAscending: "Sort Ascending",
+    sortDescending: "Sort Descending",
+    clearSorting: "Clear Sorting",
+};
+/**
+ * TableHeader component with configurable text strings.
+ *
+ * @example
+ * // Using default texts
+ * <TableHeader />
+ *
+ * @example
+ * // Customizing default texts for all columns
+ * <TableHeader
+ *   defaultTexts={{
+ *     pinColumn: "Pin This Column",
+ *     sortAscending: "Sort A-Z"
+ *   }}
+ * />
+ *
+ * @example
+ * // Customizing texts per column via meta
+ * const columns = [
+ *   columnHelper.accessor("name", {
+ *     header: "Name",
+ *     meta: {
+ *       headerTexts: {
+ *         pinColumn: "Pin Name Column",
+ *         sortAscending: "Sort Names A-Z"
+ *       }
+ *     }
+ *   })
+ * ];
+ */
+const TableHeader = ({ canResize = true, showSelector = false, isSticky = true, tableHeaderProps = {}, tableRowProps = {}, defaultTexts = {}, }) => {
     const { table } = useDataTableContext();
     const SELECTION_BOX_WIDTH = 20;
+    // Merge default texts with provided defaults
+    const mergedDefaultTexts = { ...DEFAULT_HEADER_TEXTS, ...defaultTexts };
+    // Helper function to get text for a specific header
+    const getHeaderText = (header, key) => {
+        const columnMeta = header.column.columnDef.meta;
+        return columnMeta?.headerTexts?.[key] || mergedDefaultTexts[key];
+    };
     const getThProps = (header) => {
         const thProps = header.column.getIsPinned()
             ? {
@@ -3177,9 +3242,9 @@ const TableHeader = ({ canResize = true, showSelector = false, isSticky = true,
                                                         ? null
                                                         : flexRender(header.column.columnDef.header, header.getContext()), jsx(Box, { children: header.column.getCanSort() && (jsxs(Fragment, { children: [header.column.getIsSorted() === false && jsx(Fragment, {}), header.column.getIsSorted() === "asc" && (jsx(BiUpArrow, {})), header.column.getIsSorted() === "desc" && (jsx(BiDownArrow, {}))] })) }), jsx(Box, { children: header.column.getIsFiltered() && jsx(MdFilterListAlt, {}) })] }) }) }), jsxs(MenuContent, { children: [!header.column.getIsPinned() && (jsx(MenuItem, { asChild: true, value: "pin-column", children: jsxs(Button, { variant: "ghost", onClick: () => {
                                                         header.column.pin("left");
-                                                    }, children: [jsx(MdPushPin, {}), "Pin Column"] }) })), header.column.getIsPinned() && (jsx(MenuItem, { asChild: true, value: "cancel-pin", children: jsxs(Button, { variant: "ghost", onClick: () => {
+                                                    }, children: [jsx(MdPushPin, {}), getHeaderText(header, "pinColumn")] }) })), header.column.getIsPinned() && (jsx(MenuItem, { asChild: true, value: "cancel-pin", children: jsxs(Button, { variant: "ghost", onClick: () => {
                                                         header.column.pin(false);
-                                                    }, children: [jsx(MdCancel, {}), "Cancel Pin"] }) })), header.column.getCanSort() && (jsxs(Fragment, { children: [jsx(MenuItem, { asChild: true, value: "sort-ascend", children: jsxs(Button, { variant: "ghost", onClick: () => {
+                                                    }, children: [jsx(MdCancel, {}), getHeaderText(header, "cancelPin")] }) })), header.column.getCanSort() && (jsxs(Fragment, { children: [jsx(MenuItem, { asChild: true, value: "sort-ascend", children: jsxs(Button, { variant: "ghost", onClick: () => {
                                                                 table.setSorting((state) => {
                                                                     return [
                                                                         ...state.filter((column) => {
@@ -3188,7 +3253,7 @@ const TableHeader = ({ canResize = true, showSelector = false, isSticky = true,
                                                                         { id: header.id, desc: false },
                                                                     ];
                                                                 });
-                                                            }, children: [jsx(GrAscend, {}), "Sort Ascending"] }) }), jsx(MenuItem, { asChild: true, value: "sort-descend", children: jsxs(Button, { variant: "ghost", onClick: () => {
+                                                            }, children: [jsx(GrAscend, {}), getHeaderText(header, "sortAscending")] }) }), jsx(MenuItem, { asChild: true, value: "sort-descend", children: jsxs(Button, { variant: "ghost", onClick: () => {
                                                                 table.setSorting((state) => {
                                                                     return [
                                                                         ...state.filter((column) => {
@@ -3197,9 +3262,9 @@ const TableHeader = ({ canResize = true, showSelector = false, isSticky = true,
                                                                         { id: header.id, desc: true },
                                                                     ];
                                                                 });
-                                                            }, children: [jsx(GrDescend, {}), "Sort Descending"] }) }), header.column.getIsSorted() && (jsx(MenuItem, { asChild: true, value: "sort-descend", children: jsxs(Button, { variant: "ghost", onClick: () => {
+                                                            }, children: [jsx(GrDescend, {}), getHeaderText(header, "sortDescending")] }) }), header.column.getIsSorted() && (jsx(MenuItem, { asChild: true, value: "clear-sorting", children: jsxs(Button, { variant: "ghost", onClick: () => {
                                                                 header.column.clearSorting();
-                                                            }, children: [jsx(MdClear, {}), "Clear Sorting"] }) }))] }))] })] }), canResize && (jsx(Box, { borderRight: "0.2rem solid", borderRightColor: header.column.getIsResizing()
+                                                            }, children: [jsx(MdClear, {}), getHeaderText(header, "clearSorting")] }) }))] }))] })] }), canResize && (jsx(Box, { borderRight: "0.2rem solid", borderRightColor: header.column.getIsResizing()
                                     ? "colorPalette.700"
                                     : "transparent", position: "relative", right: "0.1rem", width: "2px", height: "100%", userSelect: "none", style: { touchAction: "none" }, _hover: {
                                     borderRightColor: header.column.getIsResizing()
@@ -3216,11 +3281,11 @@ const DefaultTable = ({ showFooter = false, tableProps = {}, tableHeaderProps =
     return (jsx(TableControls, { ...controlProps, children: jsxs(Table, { ...tableProps, children: [jsx(TableHeader, { ...tableHeaderProps }), jsx(TableBody, { ...tableBodyProps }), showFooter && jsx(TableFooter, { ...tableFooterProps })] }) }));
 };
 
-const TableCardContainer = ({ children, variant = "", ...props }) => {
+const TableCardContainer = ({ children, variant = "", gap = "1rem", gridTemplateColumns = "repeat(auto-fit, minmax(20rem, 1fr))", direction = "row", ...props }) => {
     if (variant === "carousel") {
-        return (jsx(Flex, { overflow: "scroll", gap: "1rem", children: children }));
+        return (jsx(Flex, { overflow: "auto", gap: gap, direction: direction, ...props, children: children }));
     }
-    return (jsx(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(20rem, 1fr))", gap: "0.5rem", ...props, children: children }));
+    return (jsx(Grid, { gridTemplateColumns: gridTemplateColumns, gap: gap, ...props, children: children }));
 };
 
 const DefaultCardTitle = () => {
@@ -3249,8 +3314,8 @@ const TableComponent = ({ render = () => {
 };
 
 const TableLoadingComponent = ({ render, }) => {
-    const { loading } = useDataTableContext();
-    return jsx(Fragment, { children: render(loading) });
+    const { query } = useDataTableServerContext();
+    return jsx(Fragment, { children: render(query.isLoading) });
 };
 
 const SelectAllRowsToggle = ({ selectAllIcon = jsx(MdOutlineChecklist, {}), clearAllIcon = jsx(MdClear, {}), selectAllText = "", clearAllText = "", }) => {
@@ -3470,10 +3535,7 @@ const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {},
 };
 
 const TableDataDisplay = ({ colorPalette, emptyComponent, }) => {
-    const { table, columns, translate, data } = useDataTableContext();
-    const columnDef = table._getColumnDefs();
-    console.log(columnDef, "glp");
-    console.log(columnDef, columns, table.getState().columnOrder, data, "glp");
+    const { columns, translate, data } = useDataTableContext();
     const columnsMap = Object.fromEntries(columns.map((def) => {
         const { accessorKey, id } = def;
         if (accessorKey) {
@@ -3619,7 +3681,7 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
 };
 
 function removeIndex(str) {
-    return str.replace(/\.\d+\./g, '.');
+    return str.replace(/\.\d+\./g, ".");
 }
 
 const ArrayRenderer = ({ schema, column, prefix, }) => {
@@ -3637,7 +3699,7 @@ const ArrayRenderer = ({ schema, column, prefix, }) => {
                     }, children: [jsx(Grid, { gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: jsx(SchemaRenderer, { column: `${index}`,
                                 prefix: `${colLabel}.`,
                                 // @ts-expect-error find suitable types
-                                schema: { showTitle: false, ...(items ?? {}) } }) }), jsx(Flex, { justifyContent: "end", children: jsx(Button$1, { variant: "ghost", onClick: () => {
+                                schema: { showLabel: false, ...(items ?? {}) } }) }), jsx(Flex, { justifyContent: "end", children: jsx(Button$1, { variant: "ghost", onClick: () => {
                                     setValue(colLabel, fields.filter((_, curIndex) => {
                                         return curIndex !== index;
                                     }));
@@ -4529,7 +4591,7 @@ const NumberInputField = ({ schema, column, prefix, }) => {
 };
 
 const ObjectInput = ({ schema, column, prefix }) => {
-    const { properties, gridColumn = "span 12", gridRow = "span 1", required, showTitle = true, } = schema;
+    const { properties, gridColumn = "span 12", gridRow = "span 1", required, showLabel = true, } = schema;
     const { translate } = useSchemaContext();
     const colLabel = `${prefix}${column}`;
     const isRequired = required?.some((columnId) => columnId === column);
@@ -4537,7 +4599,7 @@ const ObjectInput = ({ schema, column, prefix }) => {
     if (properties === undefined) {
         throw new Error(`properties is undefined when using ObjectInput`);
     }
-    return (jsxs(Box, { gridRow, gridColumn, children: [showTitle && (jsxs(Box, { as: "label", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsx("span", { children: "*" })] })), jsx(Grid, { bgColor: { base: "colorPalette.100", _dark: "colorPalette.900" }, p: 2, borderRadius: 4, borderWidth: 1, borderColor: {
+    return (jsxs(Box, { gridRow, gridColumn, children: [showLabel && (jsxs(Box, { as: "label", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsx("span", { children: "*" })] })), jsx(Grid, { bgColor: { base: "colorPalette.100", _dark: "colorPalette.900" }, p: 2, borderRadius: 4, borderWidth: 1, borderColor: {
                     base: "colorPalette.200",
                     _dark: "colorPalette.800",
                 }, gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: Object.keys(properties ?? {}).map((key) => {
@@ -4954,7 +5016,7 @@ const ArrayViewer = ({ schema, column, prefix }) => {
                     }, children: jsx(Grid, { gap: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", children: jsx(SchemaViewer, { column: `${index}`,
                             prefix: `${colLabel}.`,
                             // @ts-expect-error find suitable types
-                            schema: { showTitle: false, ...(items ?? {}) } }) }) }, `form-${prefix}${column}.${index}`))) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+                            schema: { showLabel: false, ...(items ?? {}) } }) }) }, `form-${prefix}${column}.${index}`))) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
 };
 
 const BooleanViewer = ({ schema, column, prefix, }) => {
@@ -4994,6 +5056,10 @@ const DateViewer = ({ column, schema, prefix }) => {
         gridRow, children: [jsxs(Text, { children: [" ", selectedDate !== undefined ? displayDate : ""] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(`${column}.field_required`) }))] }));
 };
 
+function translateWrapper({ prefix, column, label, translate, }) {
+    return translate.t(removeIndex(`${prefix}${column}.${label}`));
+}
+
 const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
     const { watch, formState: { errors }, } = useFormContext();
     const { translate } = useSchemaContext();
@@ -5003,16 +5069,19 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
     const colLabel = `${prefix}${column}`;
     const watchEnum = watch(colLabel);
     const watchEnums = (watch(colLabel) ?? []);
-    return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
+    const customTranslate = (label) => {
+        return translateWrapper({ prefix, column, label, translate });
+    };
+    return (jsxs(Field, { label: `${customTranslate(`field_label`)}`, required: isRequired, alignItems: "stretch", gridColumn,
         gridRow, children: [isMultiple && (jsx(Flex, { flexFlow: "wrap", gap: 1, children: watchEnums.map((enumValue) => {
                     const item = enumValue;
                     if (item === undefined) {
                         return jsx(Fragment, { children: "undefined" });
                     }
-                    return (jsx(Tag, { closable: true, children: !!renderDisplay === true
+                    return (jsx(Tag, { children: !!renderDisplay === true
                             ? renderDisplay(item)
-                            : translate.t(removeIndex(`${colLabel}.${item}`)) }));
-                }) })), !isMultiple && (jsx(Text, { children: translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+                            : customTranslate(item) }));
+                }) })), !isMultiple && jsx(Text, { children: customTranslate(watchEnum) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: customTranslate(`field_required`) }))] }));
 };
 
 const FileViewer = ({ column, schema, prefix }) => {
@@ -5069,7 +5138,7 @@ const NumberViewer = ({ schema, column, prefix, }) => {
 };
 
 const ObjectViewer = ({ schema, column, prefix }) => {
-    const { properties, gridColumn = "span 12", gridRow = "span 1", required, showTitle = true, } = schema;
+    const { properties, gridColumn = "span 12", gridRow = "span 1", required, showLabel = true, } = schema;
     const { translate } = useSchemaContext();
     const colLabel = `${prefix}${column}`;
     const isRequired = required?.some((columnId) => columnId === column);
@@ -5077,7 +5146,7 @@ const ObjectViewer = ({ schema, column, prefix }) => {
     if (properties === undefined) {
         throw new Error(`properties is undefined when using ObjectInput`);
     }
-    return (jsxs(Box, { gridRow, gridColumn, children: [showTitle && (jsxs(Box, { as: "label", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsx("span", { children: "*" })] })), jsx(Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", bgColor: { base: "colorPalette.100", _dark: "colorPalette.900" }, p: "1", borderRadius: "md", borderWidth: "thin", borderColor: {
+    return (jsxs(Box, { gridRow, gridColumn, children: [showLabel && (jsxs(Box, { as: "label", children: [`${translate.t(removeIndex(`${colLabel}.field_label`))}`, isRequired && jsx("span", { children: "*" })] })), jsx(Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", autoFlow: "row", bgColor: { base: "colorPalette.100", _dark: "colorPalette.900" }, p: "1", borderRadius: "md", borderWidth: "thin", borderColor: {
                     base: "colorPalette.200",
                     _dark: "colorPalette.800",
                 }, children: Object.keys(properties ?? {}).map((key) => {

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

@@ -8,5 +8,19 @@ export interface DataTableContext<TData = unknown> extends DataTableProps {
     setGlobalFilter: OnChangeFn<string>;
     type: "client" | "server";
     translate: UseTranslationResponse<any, unknown>;
+    tableLabel: {
+        view: string;
+        edit: string;
+        filterButtonText: string;
+        filterTitle: string;
+        filterReset: string;
+        filterClose: string;
+        reloadTooltip: string;
+        reloadButtonText: string;
+        resetSelection: string;
+        resetSorting: string;
+        rowCountText: string;
+        hasErrorText: string;
+    };
 }
 export declare const DataTableContext: import("react").Context<DataTableContext<unknown>>;

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

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

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

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

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

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

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

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

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

@@ -14,7 +14,10 @@ export interface TableControlsProps {
     showPageSizeControl?: boolean;
     showPageCountText?: boolean;
     showView?: boolean;
-    filterOptions?: string[];
+    filterOptions?: {
+        label: string;
+        value: string;
+    }[];
     extraItems?: ReactNode;
     loading?: boolean;
     hasError?: boolean;

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

@@ -16,6 +16,5 @@ export interface TableRowSelectorProps<TData> {
         light: string;
         dark: string;
     };
-    alwaysShowSelector?: boolean;
 }
-export declare const TableBody: ({ showSelector, alwaysShowSelector, canResize, }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableBody: ({ showSelector, canResize, }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,9 +1,51 @@
 import { TableHeaderProps as ChakraTableHeaderProps, TableRowProps } from "@chakra-ui/react";
+export interface TableHeaderTexts {
+    pinColumn?: string;
+    cancelPin?: string;
+    sortAscending?: string;
+    sortDescending?: string;
+    clearSorting?: string;
+}
 export interface TableHeaderProps {
     canResize?: boolean;
     showSelector?: boolean;
     isSticky?: boolean;
     tableHeaderProps?: ChakraTableHeaderProps;
     tableRowProps?: TableRowProps;
+    /**
+     * Default text configuration for all columns.
+     * Can be overridden per column via meta.headerTexts.
+     */
+    defaultTexts?: TableHeaderTexts;
 }
-export declare const TableHeader: ({ canResize, showSelector, isSticky, tableHeaderProps, tableRowProps, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * TableHeader component with configurable text strings.
+ *
+ * @example
+ * // Using default texts
+ * <TableHeader />
+ *
+ * @example
+ * // Customizing default texts for all columns
+ * <TableHeader
+ *   defaultTexts={{
+ *     pinColumn: "Pin This Column",
+ *     sortAscending: "Sort A-Z"
+ *   }}
+ * />
+ *
+ * @example
+ * // Customizing texts per column via meta
+ * const columns = [
+ *   columnHelper.accessor("name", {
+ *     header: "Name",
+ *     meta: {
+ *       headerTexts: {
+ *         pinColumn: "Pin Name Column",
+ *         sortAscending: "Sort Names A-Z"
+ *       }
+ *     }
+ *   })
+ * ];
+ */
+export declare const TableHeader: ({ canResize, showSelector, isSticky, tableHeaderProps, tableRowProps, defaultTexts, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/types/CustomJSONSchema7.d.ts

@@ -24,7 +24,7 @@ export interface CustomJSONSchema7 extends JSONSchema7 {
     displayDateFormat?: string;
     timeFormat?: string;
     displayTimeFormat?: string;
-    showTitle?: boolean;
+    showLabel?: boolean;
 }
 export interface TagPickerProps {
     column: string;

package/dist/types/components/Form/utils/translateWrapper.d.ts

@@ -0,0 +1,6 @@
+export declare function translateWrapper({ prefix, column, label, translate, }: {
+    prefix: string;
+    column: string;
+    label: string;
+    translate: any;
+}): any;