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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (128) hide show
  1. package/README.md +224 -5
  2. package/dist/index.d.ts +780 -258
  3. package/dist/index.js +3431 -1184
  4. package/dist/index.mjs +3328 -1086
  5. package/dist/types/components/DataTable/DataTable.d.ts +12 -7
  6. package/dist/types/components/DataTable/DataTableServer.d.ts +6 -4
  7. package/dist/types/components/DataTable/DefaultTable.d.ts +12 -14
  8. package/dist/types/components/DataTable/DefaultTableServer.d.ts +23 -0
  9. package/dist/types/components/DataTable/context/DataTableContext.d.ts +21 -3
  10. package/dist/types/components/DataTable/context/useDataTableContext.d.ts +2 -2
  11. package/dist/types/components/DataTable/controls/ReloadButton.d.ts +1 -2
  12. package/dist/types/components/DataTable/controls/ResetFilteringButton.d.ts +1 -4
  13. package/dist/types/components/DataTable/controls/ResetSelectionButton.d.ts +1 -4
  14. package/dist/types/components/DataTable/controls/ResetSortingButton.d.ts +1 -4
  15. package/dist/types/components/DataTable/controls/TableControls.d.ts +10 -2
  16. package/dist/types/components/DataTable/display/Table.d.ts +4 -3
  17. package/dist/types/components/DataTable/display/TableBody.d.ts +1 -2
  18. package/dist/types/components/DataTable/display/TableBodySkeleton.d.ts +5 -0
  19. package/dist/types/components/DataTable/display/TableCardContainer.d.ts +6 -3
  20. package/dist/types/components/DataTable/display/TableDataDisplay.d.ts +6 -1
  21. package/dist/types/components/DataTable/display/TableFooter.d.ts +1 -5
  22. package/dist/types/components/DataTable/display/TableHeader.d.ts +46 -8
  23. package/dist/types/components/DataTable/hooks/useResponsiveColumnVisibility.d.ts +13 -0
  24. package/dist/types/components/DataTable/useDataTableServer.d.ts +55 -3
  25. package/dist/types/components/DatePicker/DatePicker.d.ts +23 -0
  26. package/dist/types/components/DatePicker/DateTimePicker.d.ts +11 -0
  27. package/dist/types/components/DatePicker/DurationPicker.d.ts +12 -0
  28. package/dist/types/components/DatePicker/IsoTimePicker.d.ts +16 -0
  29. package/dist/types/components/DatePicker/PickerDemo.d.ts +1 -0
  30. package/dist/types/components/DatePicker/UniversalPicker.d.ts +9 -0
  31. package/dist/types/components/DatePicker/index.d.ts +7 -0
  32. package/dist/types/components/Filter/TagFilter.d.ts +5 -1
  33. package/dist/types/components/Form/SchemaFormContext.d.ts +22 -6
  34. package/dist/types/components/Form/components/FileDropzone.d.ts +2 -2
  35. package/dist/types/components/Form/components/core/DefaultForm.d.ts +1 -0
  36. package/dist/types/components/Form/components/core/FormBody.d.ts +2 -1
  37. package/dist/types/components/Form/components/core/FormRoot.d.ts +21 -8
  38. package/dist/types/components/Form/components/fields/BooleanPicker.d.ts +1 -1
  39. package/dist/types/components/Form/components/fields/ColumnRenderer.d.ts +3 -2
  40. package/dist/types/components/Form/components/fields/CustomInput.d.ts +8 -0
  41. package/dist/types/components/Form/components/fields/DatePicker.d.ts +2 -7
  42. package/dist/types/components/Form/components/fields/DateRangePicker.d.ts +2 -0
  43. package/dist/types/components/Form/components/fields/DateTimePicker.d.ts +2 -0
  44. package/dist/types/components/Form/components/fields/EnumPicker.d.ts +3 -2
  45. package/dist/types/components/Form/components/fields/FilePicker.d.ts +2 -5
  46. package/dist/types/components/Form/components/fields/IdPicker.d.ts +1 -1
  47. package/dist/types/components/Form/components/fields/NumberInputField.d.ts +1 -1
  48. package/dist/types/components/Form/components/fields/ObjectInput.d.ts +1 -1
  49. package/dist/types/components/Form/components/fields/RecordInput.d.ts +1 -1
  50. package/dist/types/components/Form/components/fields/SchemaRenderer.d.ts +1 -1
  51. package/dist/types/components/Form/components/fields/StringInputField.d.ts +23 -5
  52. package/dist/types/components/Form/components/fields/TextAreaInput.d.ts +12 -0
  53. package/dist/types/components/Form/components/{DatePicker.d.ts → fields/TimePicker.d.ts} +2 -2
  54. package/dist/types/components/Form/components/fields/types.d.ts +6 -0
  55. package/dist/types/components/Form/components/types/CustomJSONSchema7.d.ts +77 -4
  56. package/dist/types/components/Form/components/viewers/CustomViewer.d.ts +8 -0
  57. package/dist/types/components/Form/components/viewers/DateTimeViewer.d.ts +7 -0
  58. package/dist/types/components/Form/components/viewers/NumberViewer.d.ts +1 -1
  59. package/dist/types/components/Form/components/viewers/TextAreaViewer.d.ts +12 -0
  60. package/dist/types/components/Form/components/viewers/TimeViewer.d.ts +7 -0
  61. package/dist/types/components/Form/useForm.d.ts +6 -3
  62. package/dist/types/components/Form/utils/ajvResolver.d.ts +13 -0
  63. package/dist/types/components/Form/utils/buildErrorMessages.d.ts +223 -0
  64. package/dist/types/components/Form/utils/formatBytes.d.ts +6 -0
  65. package/dist/types/components/Form/utils/getFieldError.d.ts +6 -0
  66. package/dist/types/components/Form/utils/useFormI18n.d.ts +53 -0
  67. package/dist/types/components/Form/utils/validateData.d.ts +9 -0
  68. package/dist/types/components/TextArea/TextArea.d.ts +22 -0
  69. package/dist/types/components/TimePicker/TimePicker.d.ts +21 -0
  70. package/dist/types/components/ui/field.d.ts +3 -3
  71. package/dist/types/index.d.ts +79 -55
  72. package/package.json +18 -3
  73. package/dist/types/components/Controls/DensityFeature.d.ts +0 -23
  74. package/dist/types/components/Controls/DensityToggleButton.d.ts +0 -6
  75. package/dist/types/components/Controls/EditFilterButton.d.ts +0 -9
  76. package/dist/types/components/Controls/EditOrderButton.d.ts +0 -7
  77. package/dist/types/components/Controls/EditSortingButton.d.ts +0 -7
  78. package/dist/types/components/Controls/EditViewButton.d.ts +0 -7
  79. package/dist/types/components/Controls/FilterDialog.d.ts +0 -5
  80. package/dist/types/components/Controls/PageSizeControl.d.ts +0 -4
  81. package/dist/types/components/Controls/Pagination.d.ts +0 -1
  82. package/dist/types/components/Controls/ResetFilteringButton.d.ts +0 -4
  83. package/dist/types/components/Controls/ResetSelectionButton.d.ts +0 -4
  84. package/dist/types/components/Controls/ResetSortingButton.d.ts +0 -4
  85. package/dist/types/components/Controls/RowCountText.d.ts +0 -1
  86. package/dist/types/components/Controls/SelectAllRowsToggle.d.ts +0 -8
  87. package/dist/types/components/Controls/TablePagination.d.ts +0 -1
  88. package/dist/types/components/Controls/ViewDialog.d.ts +0 -5
  89. package/dist/types/components/DataTable/CardHeader.d.ts +0 -13
  90. package/dist/types/components/DataTable/DataDisplay.d.ts +0 -6
  91. package/dist/types/components/DataTable/ReloadButton.d.ts +0 -5
  92. package/dist/types/components/DataTable/Table.d.ts +0 -10
  93. package/dist/types/components/DataTable/TableBody.d.ts +0 -21
  94. package/dist/types/components/DataTable/TableCardContainer.d.ts +0 -7
  95. package/dist/types/components/DataTable/TableCards.d.ts +0 -11
  96. package/dist/types/components/DataTable/TableComponent.d.ts +0 -6
  97. package/dist/types/components/DataTable/TableControls.d.ts +0 -21
  98. package/dist/types/components/DataTable/TableFilter.d.ts +0 -1
  99. package/dist/types/components/DataTable/TableFilterTags.d.ts +0 -1
  100. package/dist/types/components/DataTable/TableFilters.d.ts +0 -1
  101. package/dist/types/components/DataTable/TableFooter.d.ts +0 -9
  102. package/dist/types/components/DataTable/TableHeader.d.ts +0 -13
  103. package/dist/types/components/DataTable/TableLoadingComponent.d.ts +0 -5
  104. package/dist/types/components/DataTable/TableOrderer.d.ts +0 -1
  105. package/dist/types/components/DataTable/TableSelector.d.ts +0 -1
  106. package/dist/types/components/DataTable/TableSorter.d.ts +0 -1
  107. package/dist/types/components/DataTable/TableViewer.d.ts +0 -1
  108. package/dist/types/components/DataTable/TextCell.d.ts +0 -10
  109. package/dist/types/components/DataTable/components/EmptyState.d.ts +0 -5
  110. package/dist/types/components/DataTable/components/ErrorAlert.d.ts +0 -4
  111. package/dist/types/components/DataTable/components/RecordDisplay.d.ts +0 -9
  112. package/dist/types/components/DataTable/components/TextCell.d.ts +0 -10
  113. package/dist/types/components/Filter/DateRangeFilter.d.ts +0 -9
  114. package/dist/types/components/Filter/FilterOptions.d.ts +0 -4
  115. package/dist/types/components/Form/Form.d.ts +0 -36
  116. package/dist/types/components/Form/components/ArrayRenderer.d.ts +0 -7
  117. package/dist/types/components/Form/components/BooleanPicker.d.ts +0 -7
  118. package/dist/types/components/Form/components/ColumnRenderer.d.ts +0 -7
  119. package/dist/types/components/Form/components/EnumPicker.d.ts +0 -8
  120. package/dist/types/components/Form/components/FilePicker.d.ts +0 -5
  121. package/dist/types/components/Form/components/IdPicker.d.ts +0 -8
  122. package/dist/types/components/Form/components/IdViewer.d.ts +0 -5
  123. package/dist/types/components/Form/components/NumberInputField.d.ts +0 -7
  124. package/dist/types/components/Form/components/ObjectInput.d.ts +0 -7
  125. package/dist/types/components/Form/components/RecordInput.d.ts +0 -7
  126. package/dist/types/components/Form/components/SchemaRenderer.d.ts +0 -7
  127. package/dist/types/components/Form/components/StringInputField.d.ts +0 -20
  128. package/dist/types/components/Form/components/TagPicker.d.ts +0 -30
package/dist/index.d.ts CHANGED
@@ -1,23 +1,74 @@
1
1
  /// <reference types="react" />
2
- import { Row, RowData, OnChangeFn, Updater, FilterFn, ColumnDef, RowSelectionState, ColumnOrderState, ColumnFiltersState, PaginationState, SortingState, VisibilityState, Table as Table$1, Column } from '@tanstack/react-table';
3
- import * as React$1 from 'react';
4
- import React__default, { ReactNode, Dispatch, SetStateAction } from 'react';
2
+ import { Row, Table as Table$1, RowData, OnChangeFn, Updater, SortingState, ColumnFiltersState, PaginationState, RowSelectionState, ColumnOrderState, VisibilityState, FilterFn, ColumnDef, Column } from '@tanstack/react-table';
3
+ import * as react from 'react';
4
+ import react__default, { ReactNode, Dispatch, SetStateAction } from 'react';
5
5
  import * as react_jsx_runtime from 'react/jsx-runtime';
6
- import { ImageProps, TableHeaderProps as TableHeaderProps$1, TableRootProps, GridProps, CardBodyProps, FlexProps, TextProps, BoxProps } from '@chakra-ui/react';
6
+ import { TableHeaderProps as TableHeaderProps$1, TableRowProps, GridProps, TableRootProps, BoxProps, FlexProps, CardBodyProps, TextProps, ImageProps } from '@chakra-ui/react';
7
7
  import { IconType } from 'react-icons';
8
8
  import * as react_i18next from 'react-i18next';
9
9
  import { UseTranslationResponse } from 'react-i18next';
10
- import { RankingInfo } from '@tanstack/match-sorter-utils';
11
10
  import { UseQueryResult } from '@tanstack/react-query';
11
+ import { RankingInfo } from '@tanstack/match-sorter-utils';
12
12
  import { JSONSchema7 } from 'json-schema';
13
- import { ForeignKeyProps } from '@/components/Form/components/fields/StringInputField';
13
+ import { ForeignKeyProps as ForeignKeyProps$1 } from '@/components/Form/components/fields/StringInputField';
14
14
  import { AxiosRequestConfig } from 'axios';
15
15
  import * as react_hook_form from 'react-hook-form';
16
- import { FieldValues, UseFormReturn, SubmitHandler } from 'react-hook-form';
16
+ import { UseFormReturn, FieldValues, SubmitHandler } from 'react-hook-form';
17
17
  import { RenderProps, Props } from '@bsol-oss/dayzed-react19';
18
18
 
19
+ interface TableHeaderTexts {
20
+ pinColumn?: string;
21
+ cancelPin?: string;
22
+ sortAscending?: string;
23
+ sortDescending?: string;
24
+ clearSorting?: string;
25
+ }
26
+ interface TableHeaderProps {
27
+ canResize?: boolean;
28
+ showSelector?: boolean;
29
+ isSticky?: boolean;
30
+ tableHeaderProps?: TableHeaderProps$1;
31
+ tableRowProps?: TableRowProps;
32
+ /**
33
+ * Default text configuration for all columns.
34
+ * Can be overridden per column via meta.headerTexts.
35
+ */
36
+ defaultTexts?: TableHeaderTexts;
37
+ }
38
+ /**
39
+ * TableHeader component with configurable text strings.
40
+ *
41
+ * @example
42
+ * // Using default texts
43
+ * <TableHeader />
44
+ *
45
+ * @example
46
+ * // Customizing default texts for all columns
47
+ * <TableHeader
48
+ * defaultTexts={{
49
+ * pinColumn: "Pin This Column",
50
+ * sortAscending: "Sort A-Z"
51
+ * }}
52
+ * />
53
+ *
54
+ * @example
55
+ * // Customizing texts per column via meta
56
+ * const columns = [
57
+ * columnHelper.accessor("name", {
58
+ * header: "Name",
59
+ * meta: {
60
+ * headerTexts: {
61
+ * pinColumn: "Pin Name Column",
62
+ * sortAscending: "Sort Names A-Z"
63
+ * }
64
+ * }
65
+ * })
66
+ * ];
67
+ */
68
+ declare const TableHeader: ({ canResize, showSelector, isSticky, tableHeaderProps, tableRowProps, defaultTexts, }: TableHeaderProps) => react_jsx_runtime.JSX.Element;
69
+
19
70
  interface DensityToggleButtonProps {
20
- icon?: React__default.ReactElement;
71
+ icon?: react__default.ReactElement;
21
72
  text?: string;
22
73
  }
23
74
  declare const DensityToggleButton: ({ text, icon, }: DensityToggleButtonProps) => react_jsx_runtime.JSX.Element;
@@ -41,28 +92,137 @@ declare const PageSizeControl: ({ pageSizes, }: PageSizeControlProps) => react_j
41
92
 
42
93
  declare const Pagination: () => react_jsx_runtime.JSX.Element;
43
94
 
44
- interface ResetFilteringButtonProps {
45
- text?: string;
46
- }
47
- declare const ResetFilteringButton: ({ text, }: ResetFilteringButtonProps) => react_jsx_runtime.JSX.Element;
95
+ declare const ResetFilteringButton: () => react_jsx_runtime.JSX.Element;
48
96
 
49
- interface ResetSelectionButtonProps {
50
- text?: string;
51
- }
52
- declare const ResetSelectionButton: ({ text, }: ResetSelectionButtonProps) => react_jsx_runtime.JSX.Element;
97
+ declare const ResetSelectionButton: () => react_jsx_runtime.JSX.Element;
53
98
 
54
- interface ResetSortingButtonProps {
55
- text?: string;
56
- }
57
- declare const ResetSortingButton: ({ text, }: ResetSortingButtonProps) => react_jsx_runtime.JSX.Element;
99
+ declare const ResetSortingButton: () => react_jsx_runtime.JSX.Element;
58
100
 
59
101
  declare const RowCountText: () => react_jsx_runtime.JSX.Element;
60
102
 
61
103
  interface EditViewButtonProps {
62
- icon?: React__default.ReactElement;
104
+ icon?: react__default.ReactElement;
63
105
  }
64
106
  declare const ViewDialog: ({ icon }: EditViewButtonProps) => react_jsx_runtime.JSX.Element;
65
107
 
108
+ interface ReloadButtonProps {
109
+ variant?: string;
110
+ }
111
+ declare const ReloadButton: ({ variant, }: ReloadButtonProps) => react_jsx_runtime.JSX.Element;
112
+
113
+ declare const GlobalFilter: () => react_jsx_runtime.JSX.Element;
114
+
115
+ declare const TableSelector: () => react_jsx_runtime.JSX.Element;
116
+
117
+ declare const TableSorter: () => react_jsx_runtime.JSX.Element;
118
+
119
+ declare const TableViewer: () => react_jsx_runtime.JSX.Element;
120
+
121
+ interface TableControlsProps {
122
+ totalText?: string;
123
+ fitTableWidth?: boolean;
124
+ fitTableHeight?: boolean;
125
+ children?: ReactNode;
126
+ showGlobalFilter?: boolean;
127
+ showFilter?: boolean;
128
+ showFilterName?: boolean;
129
+ showFilterTags?: boolean;
130
+ showReload?: boolean;
131
+ showPagination?: boolean;
132
+ showPageSizeControl?: boolean;
133
+ showPageCountText?: boolean;
134
+ showView?: boolean;
135
+ filterTagsOptions?: {
136
+ column: string;
137
+ options: {
138
+ label: string;
139
+ value: string;
140
+ }[];
141
+ }[];
142
+ extraItems?: ReactNode;
143
+ loading?: boolean;
144
+ hasError?: boolean;
145
+ gridProps?: GridProps;
146
+ }
147
+ declare const TableControls: ({ fitTableWidth, fitTableHeight, children, showGlobalFilter, showFilter, showFilterName, showFilterTags, showReload, showPagination, showPageSizeControl, showPageCountText, showView, filterTagsOptions, extraItems, loading, hasError, gridProps, }: TableControlsProps) => react_jsx_runtime.JSX.Element;
148
+
149
+ declare const TableFilter: () => react_jsx_runtime.JSX.Element;
150
+
151
+ declare const TableFilterTags: () => react_jsx_runtime.JSX.Element;
152
+
153
+ interface TableProps extends TableRootProps {
154
+ showLoading?: boolean;
155
+ loadingComponent?: ReactNode;
156
+ emptyComponent?: ReactNode;
157
+ canResize?: boolean;
158
+ showSelector?: boolean;
159
+ children: ReactNode;
160
+ }
161
+ declare const Table: ({ children, emptyComponent, canResize, showLoading, showSelector, ...props }: TableProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
162
+
163
+ interface TableBodyProps {
164
+ pinnedBgColor?: {
165
+ light: string;
166
+ dark: string;
167
+ };
168
+ showSelector?: boolean;
169
+ alwaysShowSelector?: boolean;
170
+ canResize?: boolean;
171
+ }
172
+ interface TableRowSelectorProps<TData> {
173
+ index: number;
174
+ row: Row<TData>;
175
+ hoveredRow: number;
176
+ pinnedBgColor?: {
177
+ light: string;
178
+ dark: string;
179
+ };
180
+ }
181
+ declare const TableBody: ({ showSelector, canResize, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
182
+
183
+ interface TableCardContainerProps extends BoxProps {
184
+ children: ReactNode;
185
+ variant?: "carousel" | "";
186
+ gap?: string;
187
+ gridTemplateColumns?: string;
188
+ direction?: FlexProps["direction"];
189
+ }
190
+ declare const TableCardContainer: ({ children, variant, gap, gridTemplateColumns, direction, ...props }: TableCardContainerProps) => react_jsx_runtime.JSX.Element;
191
+
192
+ interface TableCardsProps<TData> {
193
+ isSelectable?: boolean;
194
+ showDisplayNameOnly?: boolean;
195
+ renderTitle?: (row: Row<TData>) => ReactNode | undefined;
196
+ cardBodyProps?: CardBodyProps;
197
+ }
198
+ declare const DefaultCardTitle: () => react_jsx_runtime.JSX.Element;
199
+ declare const TableCards: <TData>({ isSelectable, showDisplayNameOnly, renderTitle, cardBodyProps, }: TableCardsProps<TData>) => react_jsx_runtime.JSX.Element;
200
+
201
+ interface TableRendererProps<TData> {
202
+ render: (render: Table$1<TData>) => react__default.ReactElement;
203
+ }
204
+ declare const TableComponent: <TData>({ render, }: TableRendererProps<TData>) => react__default.ReactElement<unknown, string | react__default.JSXElementConstructor<any>>;
205
+
206
+ interface TableFooterProps {
207
+ showSelector?: boolean;
208
+ alwaysShowSelector?: boolean;
209
+ }
210
+ declare const TableFooter: ({ showSelector, alwaysShowSelector, }: TableFooterProps) => react_jsx_runtime.JSX.Element;
211
+
212
+ interface TableLoadingComponentProps {
213
+ render: (loading: boolean) => ReactNode;
214
+ }
215
+ declare const TableLoadingComponent: ({ render, }: TableLoadingComponentProps) => react_jsx_runtime.JSX.Element;
216
+
217
+ interface TextCellProps {
218
+ label?: string;
219
+ noOfLines?: number[];
220
+ children: string | number | ReactNode | ReactNode[];
221
+ containerProps?: FlexProps;
222
+ textProps?: TextProps;
223
+ }
224
+ declare const TextCell: ({ label, containerProps, textProps, children, }: TextCellProps) => react_jsx_runtime.JSX.Element;
225
+
66
226
  interface CardHeaderProps<TData> {
67
227
  row: Row<TData>;
68
228
  imageColumnId?: keyof TData;
@@ -107,82 +267,6 @@ declare module "@tanstack/react-table" {
107
267
  }
108
268
  }
109
269
 
110
- declare module "@tanstack/react-table" {
111
- interface FilterFns {
112
- fuzzy: FilterFn<unknown>;
113
- }
114
- interface FilterMeta {
115
- itemRank: RankingInfo;
116
- }
117
- }
118
- interface DataTableProps<TData = unknown> {
119
- children?: ReactNode | ReactNode[];
120
- /**
121
- * Data array for the table.
122
- *
123
- * It will pass into as the data in `@tanstack/react-table`
124
- *
125
- */
126
- data: TData[];
127
- /**
128
- * Column definitions for the table.
129
- *
130
- * It will pass into as the column definitions in `@tanstack/react-table`
131
- *
132
- * @link https://tanstack.com/table/latest/docs/guide/column-defs
133
- */
134
- columns: ColumnDef<TData, unknown>[];
135
- enableRowSelection?: boolean;
136
- enableMultiRowSelection?: boolean;
137
- enableSubRowSelection?: boolean;
138
- onRowSelect?: (rowSelectionState: RowSelectionState, data: TData[]) => void;
139
- columnOrder: ColumnOrderState;
140
- columnFilters: ColumnFiltersState;
141
- globalFilter: string;
142
- density: DensityState;
143
- pagination: PaginationState;
144
- sorting: SortingState;
145
- rowSelection: RowSelectionState;
146
- columnVisibility: VisibilityState;
147
- setPagination: OnChangeFn<PaginationState>;
148
- setSorting: OnChangeFn<SortingState>;
149
- setColumnFilters: OnChangeFn<ColumnFiltersState>;
150
- setRowSelection: OnChangeFn<RowSelectionState>;
151
- setGlobalFilter: OnChangeFn<string>;
152
- setColumnOrder: OnChangeFn<ColumnOrderState>;
153
- setDensity: OnChangeFn<DensityState>;
154
- setColumnVisibility: OnChangeFn<VisibilityState>;
155
- translate: UseTranslationResponse<any, any>;
156
- }
157
- /**
158
- * DataTable will create a context to hold all values to
159
- * help the render of the DataTable in serverside
160
- *
161
- *
162
- * The query is required to be a GET request that can receive
163
- * specified params and return a specified response
164
- *
165
- * @link https://tanstack.com/table/latest/docs/guide/column-defs
166
- */
167
- 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;
168
-
169
- interface DataTableContext<TData = unknown> extends DataTableProps {
170
- table: Table$1<TData>;
171
- globalFilter: string;
172
- setGlobalFilter: OnChangeFn<string>;
173
- type: "client" | "server";
174
- translate: UseTranslationResponse<any, any>;
175
- }
176
- declare const DataTableContext: React$1.Context<DataTableContext<unknown>>;
177
-
178
- declare const useDataTableContext: <TData>() => DataTableContext<TData>;
179
-
180
- interface DataDisplayProps {
181
- variant?: "horizontal" | "stats" | "";
182
- translate?: UseTranslationResponse<any, any>;
183
- }
184
- declare const DataDisplay: ({ variant }: DataDisplayProps) => react_jsx_runtime.JSX.Element;
185
-
186
270
  interface DataTableDefaultState {
187
271
  sorting?: SortingState;
188
272
  columnFilters?: ColumnFiltersState;
@@ -218,7 +302,7 @@ interface UseDataTableReturn {
218
302
  }
219
303
  declare const useDataTable: ({ default: { sorting: defaultSorting, pagination: defaultPagination, rowSelection: defaultRowSelection, columnFilters: defaultColumnFilters, columnOrder: defaultColumnOrder, columnVisibility: defaultColumnVisibility, globalFilter: defaultGlobalFilter, density: defaultDensity, }, keyPrefix, }?: UseDataTableProps) => UseDataTableReturn;
220
304
 
221
- interface UseDataTableServerProps extends UseDataTableProps {
305
+ interface UseDataTableServerProps<TData> extends UseDataTableProps {
222
306
  /**
223
307
  * Delay to send the request if the `refreshData` called multiple times
224
308
  *
@@ -231,7 +315,51 @@ interface UseDataTableServerProps extends UseDataTableProps {
231
315
  * default: `1000`
232
316
  */
233
317
  debounceDelay?: number;
234
- url: string;
318
+ /**
319
+ * The url to fetch the data from.
320
+ *
321
+ * Remark:
322
+ * it is the server responsibility to handle the params and return the data.
323
+ * especially the pagination and sorting.
324
+ *
325
+ * The response must be like this:
326
+ * ```ts
327
+ * {
328
+ * data: TData[],
329
+ * count: number,
330
+ * }
331
+ * ```
332
+ *
333
+ * Example:
334
+ * ```ts
335
+ * const url = "https://jsonplaceholder.typicode.com/posts";
336
+ * ```
337
+ *
338
+ * If not provided, the `queryFn` will be used.
339
+ *
340
+ * @default undefined
341
+ */
342
+ url?: string;
343
+ placeholderData?: DataResponse<TData>;
344
+ /**
345
+ * The query function to fetch the data from.
346
+ *
347
+ * Remark:
348
+ * it is the server responsibility to handle the params and return the data.
349
+ * especially the pagination and sorting.
350
+ *
351
+ * Example:
352
+ * ```ts
353
+ * const queryFn = (params: QueryParams) => {
354
+ * return axios.get<DataResponse<TData>>(url, { params });
355
+ * };
356
+ * ```
357
+ *
358
+ * If not provided, the `url` will be used.
359
+ *
360
+ * @default undefined
361
+ */
362
+ queryFn?: (params: QueryParams) => Promise<DataResponse<TData>>;
235
363
  }
236
364
  interface UseDataTableServerReturn<TData> extends UseDataTableReturn {
237
365
  query: UseQueryResult<DataResponse<TData>, Error>;
@@ -242,10 +370,35 @@ interface Result<T = unknown> {
242
370
  interface DataResponse<T = unknown> extends Result<T> {
243
371
  count: number;
244
372
  }
245
- 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>;
373
+ interface QueryParams {
374
+ offset: number;
375
+ limit: number;
376
+ sorting: SortingState;
377
+ where: ColumnFiltersState;
378
+ searching: string;
379
+ }
380
+ declare const useDataTableServer: <TData>(props: UseDataTableServerProps<TData>) => UseDataTableServerReturn<TData>;
246
381
 
247
- interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown>> {
248
- children: ReactNode | ReactNode[];
382
+ declare module '@tanstack/react-table' {
383
+ interface FilterFns {
384
+ fuzzy: FilterFn<unknown>;
385
+ }
386
+ interface FilterMeta {
387
+ itemRank: RankingInfo;
388
+ }
389
+ }
390
+ interface DataTableProps<TData = unknown> {
391
+ children?: ReactNode | ReactNode[];
392
+ /**
393
+ * Data array for the table.
394
+ *
395
+ * It will pass into as the data in `@tanstack/react-table`
396
+ * Do not toggle the data array, it will cause the table to re-render in infinite loop.
397
+ *
398
+ * @default []
399
+ *
400
+ */
401
+ data: TData[];
249
402
  /**
250
403
  * Column definitions for the table.
251
404
  *
@@ -253,10 +406,11 @@ interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown
253
406
  *
254
407
  * @link https://tanstack.com/table/latest/docs/guide/column-defs
255
408
  */
256
- columns: ColumnDef<TData>[];
409
+ columns: ColumnDef<TData, unknown>[];
257
410
  enableRowSelection?: boolean;
258
411
  enableMultiRowSelection?: boolean;
259
412
  enableSubRowSelection?: boolean;
413
+ onRowSelect?: (rowSelectionState: RowSelectionState, data: TData[]) => void;
260
414
  columnOrder: ColumnOrderState;
261
415
  columnFilters: ColumnFiltersState;
262
416
  globalFilter: string;
@@ -273,159 +427,48 @@ interface DataTableServerProps<TData extends DataResponse = DataResponse<unknown
273
427
  setColumnOrder: OnChangeFn<ColumnOrderState>;
274
428
  setDensity: OnChangeFn<DensityState>;
275
429
  setColumnVisibility: OnChangeFn<VisibilityState>;
276
- query: UseQueryResult<TData>;
277
- url: string;
278
430
  translate: UseTranslationResponse<any, any>;
431
+ tableLabel?: DataTableLabel;
279
432
  }
280
433
  /**
281
- * DataTableServer will create a context to hold all values to
434
+ * DataTable will create a context to hold all values to
282
435
  * help the render of the DataTable in serverside
283
436
  *
437
+ *
284
438
  * The query is required to be a GET request that can receive
285
439
  * specified params and return a specified response
286
440
  *
287
- * The `useDataTableServer` can help to create the specified request and response
288
- *
289
441
  * @link https://tanstack.com/table/latest/docs/guide/column-defs
290
442
  */
291
- 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;
292
-
293
- interface TableBodyProps {
294
- pinnedBgColor?: {
295
- light: string;
296
- dark: string;
297
- };
298
- showSelector?: boolean;
299
- alwaysShowSelector?: boolean;
300
- canResize?: boolean;
301
- }
302
- interface TableRowSelectorProps<TData> {
303
- index: number;
304
- row: Row<TData>;
305
- hoveredRow: number;
306
- pinnedBgColor?: {
307
- light: string;
308
- dark: string;
309
- };
310
- alwaysShowSelector?: boolean;
311
- }
312
- declare const TableBody: ({ pinnedBgColor, showSelector, alwaysShowSelector, canResize, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
313
-
314
- interface TableControlsProps {
315
- totalText?: string;
316
- fitTableWidth?: boolean;
317
- fitTableHeight?: boolean;
318
- children?: ReactNode;
319
- showGlobalFilter?: boolean;
320
- showFilter?: boolean;
321
- showFilterName?: boolean;
322
- showFilterTags?: boolean;
323
- showReload?: boolean;
324
- showPagination?: boolean;
325
- showPageSizeControl?: boolean;
326
- showPageCountText?: boolean;
327
- showView?: boolean;
328
- filterOptions?: string[];
329
- extraItems?: ReactNode;
330
- loading?: boolean;
331
- hasError?: boolean;
332
- }
333
- 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;
443
+ 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, tableLabel, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
334
444
 
335
- interface TableFooterProps {
336
- pinnedBgColor?: {
337
- light: string;
338
- dark: string;
339
- };
340
- showSelector?: boolean;
341
- alwaysShowSelector?: boolean;
445
+ interface DataTableLabel {
446
+ view: string;
447
+ edit: string;
448
+ filterButtonText: string;
449
+ filterTitle: string;
450
+ filterReset: string;
451
+ filterClose: string;
452
+ reloadTooltip: string;
453
+ reloadButtonText: string;
454
+ resetSelection: string;
455
+ resetSorting: string;
456
+ rowCountText: string;
457
+ hasErrorText: string;
458
+ globalFilterPlaceholder: string;
459
+ trueLabel: string;
460
+ falseLabel: string;
342
461
  }
343
- declare const TableFooter: ({ pinnedBgColor, showSelector, alwaysShowSelector, }: TableFooterProps) => react_jsx_runtime.JSX.Element;
344
-
345
- interface TableHeaderProps {
346
- canResize?: boolean;
347
- pinnedBgColor?: {
348
- light: string;
349
- dark: string;
350
- };
351
- showSelector?: boolean;
352
- isSticky?: boolean;
353
- alwaysShowSelector?: boolean;
354
- tHeadProps?: TableHeaderProps$1;
355
- }
356
- declare const TableHeader: ({ canResize, pinnedBgColor, showSelector, isSticky, alwaysShowSelector, tHeadProps, }: TableHeaderProps) => react_jsx_runtime.JSX.Element;
357
-
358
- interface TableProps extends TableRootProps {
359
- showLoading?: boolean;
360
- loadingComponent?: ReactNode;
361
- emptyComponent?: ReactNode;
362
- canResize?: boolean;
363
- children: ReactNode;
364
- }
365
- declare const Table: ({ children, emptyComponent, canResize, ...props }: TableProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null;
366
-
367
- interface DefaultTableProps {
368
- showFooter?: boolean;
369
- showSelector?: boolean;
370
- tableProps?: Omit<TableProps, "children">;
371
- tHeadProps?: TableHeaderProps$1;
372
- controlProps?: TableControlsProps;
373
- tableFooterProps?: TableFooterProps;
374
- tableBodyProps?: TableBodyProps;
375
- tableHeaderProps?: TableHeaderProps;
376
- variant?: "" | "greedy";
377
- }
378
- declare const DefaultTable: ({ showFooter, tableProps, tableHeaderProps, tableBodyProps, controlProps, tableFooterProps, variant, }: DefaultTableProps) => react_jsx_runtime.JSX.Element;
379
-
380
- interface ReloadButtonProps {
381
- text?: string;
382
- variant?: string;
383
- }
384
- declare const ReloadButton: ({ text, variant, }: ReloadButtonProps) => react_jsx_runtime.JSX.Element;
385
-
386
- interface TableCardContainerProps extends GridProps {
387
- children: ReactNode;
388
- variant?: "carousel" | "";
389
- }
390
- declare const TableCardContainer: ({ children, variant, ...props }: TableCardContainerProps) => react_jsx_runtime.JSX.Element;
391
-
392
- interface TableCardsProps<TData> {
393
- isSelectable?: boolean;
394
- showDisplayNameOnly?: boolean;
395
- renderTitle?: (row: Row<TData>) => ReactNode | undefined;
396
- cardBodyProps?: CardBodyProps;
397
- }
398
- declare const DefaultCardTitle: () => react_jsx_runtime.JSX.Element;
399
- declare const TableCards: <TData>({ isSelectable, showDisplayNameOnly, renderTitle, cardBodyProps, }: TableCardsProps<TData>) => react_jsx_runtime.JSX.Element;
400
-
401
- interface TableRendererProps<TData> {
402
- render: (render: Table$1<TData>) => React__default.ReactElement;
403
- }
404
- declare const TableComponent: <TData>({ render, }: TableRendererProps<TData>) => React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>>;
405
-
406
- declare const TableFilter: () => react_jsx_runtime.JSX.Element;
407
-
408
- declare const TableFilterTags: () => react_jsx_runtime.JSX.Element;
409
-
410
- interface TableLoadingComponentProps {
411
- render: (loading: boolean) => ReactNode;
462
+ interface DataTableContextProps<TData = unknown> extends DataTableProps {
463
+ table: Table$1<TData>;
464
+ globalFilter: string;
465
+ setGlobalFilter: OnChangeFn<string>;
466
+ type: "client" | "server";
467
+ translate: UseTranslationResponse<any, unknown>;
468
+ tableLabel: DataTableLabel;
412
469
  }
413
- declare const TableLoadingComponent: ({ render, }: TableLoadingComponentProps) => react_jsx_runtime.JSX.Element;
414
-
415
- declare const TableSelector: () => react_jsx_runtime.JSX.Element;
416
-
417
- declare const TableSorter: () => react_jsx_runtime.JSX.Element;
418
470
 
419
- declare const TableViewer: () => react_jsx_runtime.JSX.Element;
420
-
421
- interface TextCellProps {
422
- label?: string;
423
- noOfLines?: number[];
424
- children: string | number | ReactNode | ReactNode[];
425
- containerProps?: FlexProps;
426
- textProps?: TextProps;
427
- }
428
- declare const TextCell: ({ label, containerProps, textProps, children, }: TextCellProps) => react_jsx_runtime.JSX.Element;
471
+ declare const useDataTableContext: <TData>() => DataTableContextProps<TData>;
429
472
 
430
473
  interface GetColumnsConfigs<K extends RowData> {
431
474
  schema: JSONSchema7;
@@ -441,17 +484,343 @@ interface GetColumnsConfigs<K extends RowData> {
441
484
  declare const widthSanityCheck: <K extends unknown>(widthList: number[], ignoreList: K[], properties: { [key in K as string]?: object | undefined; }) => void;
442
485
  declare const getColumns: <TData extends unknown>({ schema, include, ignore, width, meta, defaultWidth, translate, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
443
486
 
444
- declare const TableDataDisplay: () => react_jsx_runtime.JSX.Element;
445
-
446
- interface FilterOptionsProps {
487
+ interface CustomQueryFnResponse {
488
+ /**
489
+ * The data of the query
490
+ */
491
+ data: any;
492
+ /**
493
+ * The id map of the data
494
+ */
495
+ idMap: Record<string, any>;
496
+ }
497
+ interface CustomQueryFnParams {
498
+ searching: string;
499
+ limit: number;
500
+ offset: number;
501
+ where?: Array<{
502
+ id: string;
503
+ value: string | string[];
504
+ }>;
505
+ }
506
+ type CustomQueryFn = (params: CustomQueryFnParams) => Promise<CustomQueryFnResponse>;
507
+ interface ForeignKeyProps {
447
508
  column: string;
509
+ table: string;
510
+ display_column: string;
511
+ customQueryFn?: CustomQueryFn;
448
512
  }
449
- declare const FilterOptions: ({ column }: FilterOptionsProps) => react_jsx_runtime.JSX.Element;
450
513
 
451
- declare const GlobalFilter: () => react_jsx_runtime.JSX.Element;
514
+ /**
515
+ * Type definitions for error message configuration
516
+ */
517
+ /**
518
+ * Common validation error types that can be customized
519
+ */
520
+ type ValidationErrorType = 'minLength' | 'maxLength' | 'pattern' | 'minimum' | 'maximum' | 'multipleOf' | 'format' | 'type' | 'enum' | 'required' | 'minItems' | 'maxItems' | 'uniqueItems' | 'minProperties' | 'maxProperties' | 'anyOf' | 'oneOf' | 'allOf' | 'const' | 'additionalProperties' | 'dependencies';
521
+ /**
522
+ * Configuration for field-specific validation errors
523
+ */
524
+ type FieldErrorConfig = Partial<Record<ValidationErrorType, string>>;
525
+ /**
526
+ * Configuration for building error messages
527
+ */
528
+ interface ErrorMessageConfig {
529
+ /**
530
+ * Required field error messages
531
+ * Maps field names to their required error messages
532
+ * Supports both plain strings and i18n translation keys
533
+ *
534
+ * @example
535
+ * ```typescript
536
+ * required: {
537
+ * username: "Username is required", // plain string
538
+ * email: "user.email.field_required" // i18n key
539
+ * }
540
+ * ```
541
+ */
542
+ required?: Record<string, string>;
543
+ /**
544
+ * Field-specific validation error messages
545
+ * Maps field names to their validation error configurations
546
+ *
547
+ * @example
548
+ * ```typescript
549
+ * properties: {
550
+ * username: {
551
+ * minLength: "Username must be at least 3 characters",
552
+ * pattern: "Username can only contain letters and numbers"
553
+ * },
554
+ * age: {
555
+ * minimum: "Age must be at least 18",
556
+ * maximum: "Age cannot exceed 120"
557
+ * }
558
+ * }
559
+ * ```
560
+ */
561
+ properties?: Record<string, FieldErrorConfig>;
562
+ /**
563
+ * Global fallback error messages for validation types
564
+ * These are used when no field-specific message is provided
565
+ *
566
+ * @example
567
+ * ```typescript
568
+ * {
569
+ * minLength: "This field is too short",
570
+ * minimum: "Value is too small"
571
+ * }
572
+ * ```
573
+ */
574
+ [key: string]: any;
575
+ }
576
+ /**
577
+ * Result of buildErrorMessages that follows ajv-errors format
578
+ */
579
+ interface ErrorMessageResult {
580
+ required?: Record<string, string>;
581
+ properties?: Record<string, FieldErrorConfig>;
582
+ [key: string]: any;
583
+ }
584
+ /**
585
+ * Schema-level error message builder
586
+ *
587
+ * Builds a complete errorMessage object compatible with ajv-errors plugin.
588
+ * Supports both i18n translation keys and plain string messages.
589
+ *
590
+ * @param config - Error message configuration
591
+ * @returns Complete errorMessage object for JSON Schema
592
+ *
593
+ * @example
594
+ * ```typescript
595
+ * // Simple required field errors
596
+ * const errorMessage = buildErrorMessages({
597
+ * required: {
598
+ * username: "Username is required",
599
+ * email: "user.email.field_required" // i18n key
600
+ * }
601
+ * });
602
+ *
603
+ * // With validation rules
604
+ * const errorMessage = buildErrorMessages({
605
+ * required: {
606
+ * password: "Password is required"
607
+ * },
608
+ * properties: {
609
+ * password: {
610
+ * minLength: "Password must be at least 8 characters",
611
+ * pattern: "Password must contain letters and numbers"
612
+ * },
613
+ * age: {
614
+ * minimum: "Must be 18 or older",
615
+ * maximum: "Must be under 120"
616
+ * }
617
+ * }
618
+ * });
619
+ *
620
+ * // With global fallbacks
621
+ * const errorMessage = buildErrorMessages({
622
+ * required: {
623
+ * email: "Email is required"
624
+ * },
625
+ * minLength: "This field is too short", // applies to all fields
626
+ * minimum: "Value is too small"
627
+ * });
628
+ * ```
629
+ */
630
+ declare const buildErrorMessages: (config: ErrorMessageConfig) => ErrorMessageResult;
631
+ /**
632
+ * Converts buildErrorMessages result to ajv-errors compatible format
633
+ */
634
+ declare const convertToAjvErrorsFormat: (errorMessages: ErrorMessageResult) => Record<string, any>;
635
+ /**
636
+ * Helper function to build required field errors
637
+ *
638
+ * Simplifies creating required field error messages, especially useful
639
+ * for generating i18n translation keys following a pattern.
640
+ *
641
+ * @param fields - Array of required field names
642
+ * @param messageOrGenerator - Either a string template or function to generate messages
643
+ * @returns Required field error configuration
644
+ *
645
+ * @example
646
+ * ```typescript
647
+ * // Plain string messages
648
+ * const required = buildRequiredErrors(
649
+ * ["username", "email", "password"],
650
+ * (field) => `${field} is required`
651
+ * );
652
+ * // Result: { username: "username is required", email: "email is required", ... }
653
+ *
654
+ * // i18n translation keys
655
+ * const required = buildRequiredErrors(
656
+ * ["username", "email"],
657
+ * (field) => `user.${field}.field_required`
658
+ * );
659
+ * // Result: { username: "user.username.field_required", email: "user.email.field_required" }
660
+ *
661
+ * // Same message for all fields
662
+ * const required = buildRequiredErrors(
663
+ * ["username", "email"],
664
+ * "This field is required"
665
+ * );
666
+ * // Result: { username: "This field is required", email: "This field is required" }
667
+ *
668
+ * // With keyPrefix for i18n
669
+ * const required = buildRequiredErrors(
670
+ * ["username", "email"],
671
+ * (field) => `${field}.field_required`,
672
+ * "user"
673
+ * );
674
+ * // Result: { username: "user.username.field_required", email: "user.email.field_required" }
675
+ * ```
676
+ */
677
+ declare const buildRequiredErrors: (fields: string[], messageOrGenerator: string | ((field: string) => string), keyPrefix?: string) => Record<string, string>;
678
+ /**
679
+ * Helper function to build field-specific validation errors
680
+ *
681
+ * Creates property-specific error messages for multiple fields at once.
682
+ *
683
+ * @param config - Maps field names to their validation error configurations
684
+ * @returns Properties error configuration
685
+ *
686
+ * @example
687
+ * ```typescript
688
+ * const properties = buildFieldErrors({
689
+ * username: {
690
+ * minLength: "Username must be at least 3 characters",
691
+ * pattern: "Username can only contain letters and numbers"
692
+ * },
693
+ * age: {
694
+ * minimum: "Must be 18 or older",
695
+ * maximum: "Must be under 120"
696
+ * },
697
+ * email: {
698
+ * format: "Please enter a valid email address"
699
+ * }
700
+ * });
701
+ * ```
702
+ */
703
+ declare const buildFieldErrors: (config: Record<string, FieldErrorConfig>) => Record<string, FieldErrorConfig>;
704
+ /**
705
+ * Helper function to create a complete error message configuration in one call
706
+ *
707
+ * Convenient wrapper that combines required and validation errors.
708
+ *
709
+ * @param required - Required field error messages
710
+ * @param properties - Field-specific validation error messages
711
+ * @param globalFallbacks - Global fallback error messages
712
+ * @returns Complete error message configuration
713
+ *
714
+ * @example
715
+ * ```typescript
716
+ * const errorMessage = createErrorMessage(
717
+ * {
718
+ * username: "Username is required",
719
+ * email: "Email is required"
720
+ * },
721
+ * {
722
+ * username: {
723
+ * minLength: "Username must be at least 3 characters"
724
+ * },
725
+ * email: {
726
+ * format: "Please enter a valid email"
727
+ * }
728
+ * },
729
+ * {
730
+ * minLength: "This field is too short",
731
+ * format: "Invalid format"
732
+ * }
733
+ * );
734
+ * ```
735
+ */
736
+ declare const createErrorMessage: (required?: Record<string, string>, properties?: Record<string, FieldErrorConfig>, globalFallbacks?: Partial<Record<ValidationErrorType, string>>) => ErrorMessageResult;
737
+
738
+ interface DateTimePickerLabels {
739
+ monthNamesShort?: string[];
740
+ weekdayNamesShort?: string[];
741
+ backButtonLabel?: string;
742
+ forwardButtonLabel?: string;
743
+ }
744
+ interface IdPickerLabels {
745
+ undefined?: string;
746
+ addMore?: string;
747
+ typeToSearch?: string;
748
+ total?: string;
749
+ showing?: string;
750
+ perPage?: string;
751
+ emptySearchResult?: string;
752
+ initialResults?: string;
753
+ }
754
+ interface EnumPickerLabels {
755
+ undefined?: string;
756
+ addMore?: string;
757
+ typeToSearch?: string;
758
+ total?: string;
759
+ showing?: string;
760
+ perPage?: string;
761
+ emptySearchResult?: string;
762
+ initialResults?: string;
763
+ }
764
+ interface FilePickerLabels {
765
+ fileDropzone?: string;
766
+ browseLibrary?: string;
767
+ dialogTitle?: string;
768
+ searchPlaceholder?: string;
769
+ loading?: string;
770
+ loadingFailed?: string;
771
+ noFilesFound?: string;
772
+ cancel?: string;
773
+ select?: string;
774
+ }
775
+ interface CustomJSONSchema7 extends JSONSchema7 {
776
+ gridColumn?: string;
777
+ gridRow?: string;
778
+ foreign_key?: ForeignKeyProps;
779
+ variant?: string;
780
+ renderDisplay?: (item: unknown) => ReactNode;
781
+ inputRender?: (props: {
782
+ column: string;
783
+ schema: CustomJSONSchema7;
784
+ prefix: string;
785
+ formContext: UseFormReturn;
786
+ }) => ReactNode;
787
+ inputViewerRender?: (props: {
788
+ column: string;
789
+ schema: CustomJSONSchema7;
790
+ prefix: string;
791
+ formContext: UseFormReturn;
792
+ }) => ReactNode;
793
+ dateFormat?: string;
794
+ displayDateFormat?: string;
795
+ timeFormat?: string;
796
+ displayTimeFormat?: string;
797
+ showLabel?: boolean;
798
+ formatOptions?: Intl.NumberFormatOptions;
799
+ numberStorageType?: 'string' | 'number';
800
+ errorMessages?: Partial<Record<ValidationErrorType | string, string>>;
801
+ filePicker?: FilePickerProps;
802
+ }
803
+ interface TagPickerProps {
804
+ column: string;
805
+ schema: CustomJSONSchema7;
806
+ prefix: string;
807
+ }
808
+ interface FilePickerMediaFile {
809
+ id: string;
810
+ name: string;
811
+ url?: string;
812
+ size?: string | number;
813
+ comment?: string;
814
+ type?: string;
815
+ }
816
+ interface FilePickerProps {
817
+ onFetchFiles?: (search: string) => Promise<FilePickerMediaFile[]>;
818
+ enableMediaLibrary?: boolean;
819
+ filterImageOnly?: boolean;
820
+ }
452
821
 
453
822
  interface FormRootProps<TData extends FieldValues> {
454
- schema: JSONSchema7;
823
+ schema: CustomJSONSchema7;
455
824
  serverUrl: string;
456
825
  requestUrl?: string;
457
826
  idMap: Record<string, object>;
@@ -466,6 +835,18 @@ interface FormRootProps<TData extends FieldValues> {
466
835
  rowNumber?: number | string;
467
836
  requestOptions?: AxiosRequestConfig;
468
837
  getUpdatedData?: () => TData | Promise<TData> | void;
838
+ customErrorRenderer?: (error: unknown) => ReactNode;
839
+ customSuccessRenderer?: (resetHandler: () => void | Promise<void>) => ReactNode;
840
+ displayConfig?: {
841
+ showSubmitButton?: boolean;
842
+ showResetButton?: boolean;
843
+ showTitle?: boolean;
844
+ };
845
+ requireConfirmation?: boolean;
846
+ dateTimePickerLabels?: DateTimePickerLabels;
847
+ idPickerLabels?: IdPickerLabels;
848
+ enumPickerLabels?: EnumPickerLabels;
849
+ filePickerLabels?: FilePickerLabels;
469
850
  }
470
851
  interface CustomJSONSchema7Definition extends JSONSchema7 {
471
852
  variant: string;
@@ -474,7 +855,7 @@ interface CustomJSONSchema7Definition extends JSONSchema7 {
474
855
  display_column: string;
475
856
  gridColumn: string;
476
857
  gridRow: string;
477
- foreign_key: ForeignKeyProps;
858
+ foreign_key: ForeignKeyProps$1;
478
859
  children: ReactNode;
479
860
  }
480
861
  declare const idPickerSanityCheck: (column: string, foreign_key?: {
@@ -482,26 +863,29 @@ declare const idPickerSanityCheck: (column: string, foreign_key?: {
482
863
  column?: string | undefined;
483
864
  display_column?: string | undefined;
484
865
  } | undefined) => void;
485
- declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
866
+ declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, requireConfirmation, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
486
867
 
487
868
  interface DefaultFormProps<TData extends FieldValues> {
488
869
  formConfig: Omit<FormRootProps<TData>, "children">;
870
+ showTitle?: boolean;
489
871
  }
490
872
  declare const DefaultForm: <TData extends FieldValues>({ formConfig, }: DefaultFormProps<TData>) => react_jsx_runtime.JSX.Element;
491
873
 
492
874
  declare const FormTitle: () => react_jsx_runtime.JSX.Element;
493
875
 
494
- declare const FormBody: <TData extends object>() => react_jsx_runtime.JSX.Element;
876
+ declare const FormBody: <TData extends object>() => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
495
877
 
496
878
  interface UseFormProps {
497
879
  preLoadedValues?: FieldValues | undefined;
498
880
  keyPrefix?: string;
881
+ namespace?: string;
882
+ schema?: JSONSchema7;
499
883
  }
500
- declare const useForm: ({ preLoadedValues, keyPrefix }: UseFormProps) => {
884
+ declare const useForm: ({ preLoadedValues, keyPrefix, namespace, schema, }: UseFormProps) => {
501
885
  form: react_hook_form.UseFormReturn<FieldValues, any, undefined>;
502
886
  idMap: Record<string, object>;
503
- setIdMap: React$1.Dispatch<React$1.SetStateAction<Record<string, object>>>;
504
- translate: react_i18next.UseTranslationResponse<"", string>;
887
+ setIdMap: react.Dispatch<react.SetStateAction<Record<string, object>>>;
888
+ translate: react_i18next.UseTranslationResponse<string, string>;
505
889
  };
506
890
 
507
891
  interface CalendarProps extends RenderProps {
@@ -518,6 +902,29 @@ interface GetVariantProps {
518
902
  selectable: boolean;
519
903
  }
520
904
  interface DatePickerProps extends Props {
905
+ onDateSelected?: (obj: {
906
+ date: Date;
907
+ }) => void;
908
+ selected: Date | Date[];
909
+ firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
910
+ showOutsideDays?: boolean;
911
+ date?: Date;
912
+ minDate?: Date;
913
+ maxDate?: Date;
914
+ monthsToDisplay?: number;
915
+ labels?: {
916
+ monthNamesShort: string[];
917
+ weekdayNamesShort: string[];
918
+ backButtonLabel?: string;
919
+ forwardButtonLabel?: string;
920
+ };
921
+ render?: (dayzedData: any) => react__default.ReactNode;
922
+ }
923
+ interface DatePickerLabels {
924
+ monthNamesShort: string[];
925
+ weekdayNamesShort: string[];
926
+ backButtonLabel?: string;
927
+ forwardButtonLabel?: string;
521
928
  }
522
929
 
523
930
  interface GetMultiDatesProps {
@@ -556,7 +963,101 @@ interface RecordDisplayProps {
556
963
  }
557
964
  declare const RecordDisplay: ({ object, boxProps, translate, prefix, }: RecordDisplayProps) => react_jsx_runtime.JSX.Element;
558
965
 
559
- declare module "@tanstack/react-table" {
966
+ interface TableDataDisplayProps {
967
+ colorPalette?: string;
968
+ emptyComponent?: ReactNode;
969
+ }
970
+ declare const TableDataDisplay: ({ colorPalette, emptyComponent, }: TableDataDisplayProps) => react_jsx_runtime.JSX.Element;
971
+
972
+ interface DefaultTableProps {
973
+ showFooter?: boolean;
974
+ tableProps?: Omit<TableProps, 'children'>;
975
+ tableHeaderProps?: TableHeaderProps;
976
+ tableBodyProps?: TableBodyProps;
977
+ tableFooterProps?: TableFooterProps;
978
+ controlProps?: TableControlsProps;
979
+ variant?: '' | 'greedy';
980
+ isLoading?: boolean;
981
+ }
982
+ declare const DefaultTable: ({ showFooter, tableProps, tableHeaderProps, tableBodyProps, tableFooterProps, controlProps, variant, isLoading, }: DefaultTableProps) => react_jsx_runtime.JSX.Element;
983
+
984
+ interface DefaultTableServerProps extends DefaultTableProps {
985
+ /**
986
+ * Optional isLoading prop to override auto-detected loading state.
987
+ * If not provided, will automatically detect from DataTableServerContext.
988
+ */
989
+ isLoading?: boolean;
990
+ }
991
+ /**
992
+ * DefaultTableServer is a wrapper around DefaultTable that automatically
993
+ * detects server-side loading state from DataTableServerContext.
994
+ *
995
+ * Use this component when working with DataTableServer to automatically
996
+ * show skeleton loading state during data fetching.
997
+ *
998
+ * @example
999
+ * ```tsx
1000
+ * <DataTableServer columns={columns} {...datatableServer}>
1001
+ * <DefaultTableServer />
1002
+ * </DataTableServer>
1003
+ * ```
1004
+ */
1005
+ declare const DefaultTableServer: ({ isLoading: isLoadingOverride, ...props }: DefaultTableServerProps) => react_jsx_runtime.JSX.Element;
1006
+
1007
+ interface DataDisplayProps {
1008
+ variant?: "horizontal" | "stats" | "";
1009
+ translate?: UseTranslationResponse<any, any>;
1010
+ }
1011
+ declare const DataDisplay: ({ variant }: DataDisplayProps) => react_jsx_runtime.JSX.Element;
1012
+
1013
+ interface DataTableServerProps<TData = unknown> {
1014
+ children: ReactNode | ReactNode[];
1015
+ /**
1016
+ * Column definitions for the table.
1017
+ *
1018
+ * It will pass into as the column definitions in `@tanstack/react-table`
1019
+ *
1020
+ * @link https://tanstack.com/table/latest/docs/guide/column-defs
1021
+ */
1022
+ columns: ColumnDef<TData>[];
1023
+ enableRowSelection?: boolean;
1024
+ enableMultiRowSelection?: boolean;
1025
+ enableSubRowSelection?: boolean;
1026
+ columnOrder: ColumnOrderState;
1027
+ columnFilters: ColumnFiltersState;
1028
+ globalFilter: string;
1029
+ density: DensityState;
1030
+ pagination: PaginationState;
1031
+ sorting: SortingState;
1032
+ rowSelection: RowSelectionState;
1033
+ columnVisibility: VisibilityState;
1034
+ setPagination: OnChangeFn<PaginationState>;
1035
+ setSorting: OnChangeFn<SortingState>;
1036
+ setColumnFilters: OnChangeFn<ColumnFiltersState>;
1037
+ setRowSelection: OnChangeFn<RowSelectionState>;
1038
+ setGlobalFilter: OnChangeFn<string>;
1039
+ setColumnOrder: OnChangeFn<ColumnOrderState>;
1040
+ setDensity: OnChangeFn<DensityState>;
1041
+ setColumnVisibility: OnChangeFn<VisibilityState>;
1042
+ query: UseQueryResult<DataResponse<TData>>;
1043
+ url?: string;
1044
+ translate: UseTranslationResponse<any, any>;
1045
+ tableLabel?: DataTableLabel;
1046
+ }
1047
+ /**
1048
+ * DataTableServer will create a context to hold all values to
1049
+ * help the render of the DataTable in serverside
1050
+ *
1051
+ * The query is required to be a GET request that can receive
1052
+ * specified params and return a specified response
1053
+ *
1054
+ * The `useDataTableServer` can help to create the specified request and response
1055
+ *
1056
+ * @link https://tanstack.com/table/latest/docs/guide/column-defs
1057
+ */
1058
+ declare function DataTableServer<TData = unknown>({ columns, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, url, translate, children, tableLabel, }: DataTableServerProps<TData>): react_jsx_runtime.JSX.Element;
1059
+
1060
+ declare module '@tanstack/react-table' {
560
1061
  interface ColumnMeta<TData extends RowData, TValue> {
561
1062
  /**
562
1063
  * If `showCustomDisplay` is `true`, it will use the cell render to render the value.
@@ -568,6 +1069,17 @@ declare module "@tanstack/react-table" {
568
1069
  * The display name of the column, used for rendering headers.
569
1070
  */
570
1071
  displayName?: string;
1072
+ /**
1073
+ * Text configuration for the column header menu items.
1074
+ * These strings can be customized per column.
1075
+ */
1076
+ headerTexts?: {
1077
+ pinColumn?: string;
1078
+ cancelPin?: string;
1079
+ sortAscending?: string;
1080
+ sortDescending?: string;
1081
+ clearSorting?: string;
1082
+ };
571
1083
  /**
572
1084
  * Specifies the type of filter to be used for the column.
573
1085
  *
@@ -584,11 +1096,14 @@ declare module "@tanstack/react-table" {
584
1096
  * - "dateRange": A date range filter.
585
1097
  * - "custom": A custom filter function.
586
1098
  */
587
- filterVariant?: "text" | "range" | "select" | "tag" | "boolean" | "dateRange" | "custom";
1099
+ filterVariant?: 'text' | 'range' | 'select' | 'tag' | 'boolean' | 'dateRange' | 'custom';
588
1100
  /**
589
1101
  * Options for the select filter variant, if applicable.
590
1102
  */
591
- filterOptions?: string[];
1103
+ filterOptions?: {
1104
+ label: string;
1105
+ value: string;
1106
+ }[];
592
1107
  /**
593
1108
  * Configuration for the range filter variant, if applicable.
594
1109
  *
@@ -611,7 +1126,14 @@ declare module "@tanstack/react-table" {
611
1126
  * @returns A JSX element representing the filter UI.
612
1127
  */
613
1128
  renderFilter?: (column: Column<TData>) => ReactNode;
1129
+ /**
1130
+ * Priority for responsive column hiding when table width is too narrow.
1131
+ * Lower priority numbers = hide first (e.g., priority 1 hides before priority 10).
1132
+ * Columns without priority default to Infinity (highest priority, never auto-hide).
1133
+ * Only applies when canResize={false}.
1134
+ */
1135
+ responsivePriority?: number;
614
1136
  }
615
1137
  }
616
1138
 
617
- export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerProps, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, ErrorAlert, type ErrorAlertProps, FilterDialog, FilterOptions, type FilterOptionsProps, FormBody, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, Pagination, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, type ResetFilteringButtonProps, ResetSelectionButton, type ResetSelectionButtonProps, ResetSortingButton, type ResetSortingButtonProps, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, ViewDialog, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
1139
+ export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerLabels, type DatePickerProps, type DateTimePickerLabels, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DefaultTableServer, type DefaultTableServerProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, type EnumPickerLabels, ErrorAlert, type ErrorAlertProps, type ErrorMessageConfig, type ErrorMessageResult, type FieldErrorConfig, type FilePickerLabels, type FilePickerMediaFile, type FilePickerProps, FilterDialog, FormBody, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, type IdPickerLabels, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, type TableHeaderTexts, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, type TagPickerProps, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, type ValidationErrorType, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, convertToAjvErrorsFormat, createErrorMessage, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };