@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.
- package/README.md +224 -5
- package/dist/index.d.ts +780 -258
- package/dist/index.js +3431 -1184
- package/dist/index.mjs +3328 -1086
- package/dist/types/components/DataTable/DataTable.d.ts +12 -7
- package/dist/types/components/DataTable/DataTableServer.d.ts +6 -4
- package/dist/types/components/DataTable/DefaultTable.d.ts +12 -14
- package/dist/types/components/DataTable/DefaultTableServer.d.ts +23 -0
- package/dist/types/components/DataTable/context/DataTableContext.d.ts +21 -3
- package/dist/types/components/DataTable/context/useDataTableContext.d.ts +2 -2
- package/dist/types/components/DataTable/controls/ReloadButton.d.ts +1 -2
- package/dist/types/components/DataTable/controls/ResetFilteringButton.d.ts +1 -4
- package/dist/types/components/DataTable/controls/ResetSelectionButton.d.ts +1 -4
- package/dist/types/components/DataTable/controls/ResetSortingButton.d.ts +1 -4
- package/dist/types/components/DataTable/controls/TableControls.d.ts +10 -2
- package/dist/types/components/DataTable/display/Table.d.ts +4 -3
- package/dist/types/components/DataTable/display/TableBody.d.ts +1 -2
- package/dist/types/components/DataTable/display/TableBodySkeleton.d.ts +5 -0
- package/dist/types/components/DataTable/display/TableCardContainer.d.ts +6 -3
- package/dist/types/components/DataTable/display/TableDataDisplay.d.ts +6 -1
- package/dist/types/components/DataTable/display/TableFooter.d.ts +1 -5
- package/dist/types/components/DataTable/display/TableHeader.d.ts +46 -8
- package/dist/types/components/DataTable/hooks/useResponsiveColumnVisibility.d.ts +13 -0
- package/dist/types/components/DataTable/useDataTableServer.d.ts +55 -3
- package/dist/types/components/DatePicker/DatePicker.d.ts +23 -0
- package/dist/types/components/DatePicker/DateTimePicker.d.ts +11 -0
- package/dist/types/components/DatePicker/DurationPicker.d.ts +12 -0
- package/dist/types/components/DatePicker/IsoTimePicker.d.ts +16 -0
- package/dist/types/components/DatePicker/PickerDemo.d.ts +1 -0
- package/dist/types/components/DatePicker/UniversalPicker.d.ts +9 -0
- package/dist/types/components/DatePicker/index.d.ts +7 -0
- package/dist/types/components/Filter/TagFilter.d.ts +5 -1
- package/dist/types/components/Form/SchemaFormContext.d.ts +22 -6
- package/dist/types/components/Form/components/FileDropzone.d.ts +2 -2
- package/dist/types/components/Form/components/core/DefaultForm.d.ts +1 -0
- package/dist/types/components/Form/components/core/FormBody.d.ts +2 -1
- package/dist/types/components/Form/components/core/FormRoot.d.ts +21 -8
- package/dist/types/components/Form/components/fields/BooleanPicker.d.ts +1 -1
- package/dist/types/components/Form/components/fields/ColumnRenderer.d.ts +3 -2
- package/dist/types/components/Form/components/fields/CustomInput.d.ts +8 -0
- package/dist/types/components/Form/components/fields/DatePicker.d.ts +2 -7
- package/dist/types/components/Form/components/fields/DateRangePicker.d.ts +2 -0
- package/dist/types/components/Form/components/fields/DateTimePicker.d.ts +2 -0
- package/dist/types/components/Form/components/fields/EnumPicker.d.ts +3 -2
- package/dist/types/components/Form/components/fields/FilePicker.d.ts +2 -5
- package/dist/types/components/Form/components/fields/IdPicker.d.ts +1 -1
- package/dist/types/components/Form/components/fields/NumberInputField.d.ts +1 -1
- package/dist/types/components/Form/components/fields/ObjectInput.d.ts +1 -1
- package/dist/types/components/Form/components/fields/RecordInput.d.ts +1 -1
- package/dist/types/components/Form/components/fields/SchemaRenderer.d.ts +1 -1
- package/dist/types/components/Form/components/fields/StringInputField.d.ts +23 -5
- package/dist/types/components/Form/components/fields/TextAreaInput.d.ts +12 -0
- package/dist/types/components/Form/components/{DatePicker.d.ts → fields/TimePicker.d.ts} +2 -2
- package/dist/types/components/Form/components/fields/types.d.ts +6 -0
- package/dist/types/components/Form/components/types/CustomJSONSchema7.d.ts +77 -4
- package/dist/types/components/Form/components/viewers/CustomViewer.d.ts +8 -0
- package/dist/types/components/Form/components/viewers/DateTimeViewer.d.ts +7 -0
- package/dist/types/components/Form/components/viewers/NumberViewer.d.ts +1 -1
- package/dist/types/components/Form/components/viewers/TextAreaViewer.d.ts +12 -0
- package/dist/types/components/Form/components/viewers/TimeViewer.d.ts +7 -0
- package/dist/types/components/Form/useForm.d.ts +6 -3
- package/dist/types/components/Form/utils/ajvResolver.d.ts +13 -0
- package/dist/types/components/Form/utils/buildErrorMessages.d.ts +223 -0
- package/dist/types/components/Form/utils/formatBytes.d.ts +6 -0
- package/dist/types/components/Form/utils/getFieldError.d.ts +6 -0
- package/dist/types/components/Form/utils/useFormI18n.d.ts +53 -0
- package/dist/types/components/Form/utils/validateData.d.ts +9 -0
- package/dist/types/components/TextArea/TextArea.d.ts +22 -0
- package/dist/types/components/TimePicker/TimePicker.d.ts +21 -0
- package/dist/types/components/ui/field.d.ts +3 -3
- package/dist/types/index.d.ts +79 -55
- package/package.json +18 -3
- package/dist/types/components/Controls/DensityFeature.d.ts +0 -23
- package/dist/types/components/Controls/DensityToggleButton.d.ts +0 -6
- package/dist/types/components/Controls/EditFilterButton.d.ts +0 -9
- package/dist/types/components/Controls/EditOrderButton.d.ts +0 -7
- package/dist/types/components/Controls/EditSortingButton.d.ts +0 -7
- package/dist/types/components/Controls/EditViewButton.d.ts +0 -7
- package/dist/types/components/Controls/FilterDialog.d.ts +0 -5
- package/dist/types/components/Controls/PageSizeControl.d.ts +0 -4
- package/dist/types/components/Controls/Pagination.d.ts +0 -1
- package/dist/types/components/Controls/ResetFilteringButton.d.ts +0 -4
- package/dist/types/components/Controls/ResetSelectionButton.d.ts +0 -4
- package/dist/types/components/Controls/ResetSortingButton.d.ts +0 -4
- package/dist/types/components/Controls/RowCountText.d.ts +0 -1
- package/dist/types/components/Controls/SelectAllRowsToggle.d.ts +0 -8
- package/dist/types/components/Controls/TablePagination.d.ts +0 -1
- package/dist/types/components/Controls/ViewDialog.d.ts +0 -5
- package/dist/types/components/DataTable/CardHeader.d.ts +0 -13
- package/dist/types/components/DataTable/DataDisplay.d.ts +0 -6
- package/dist/types/components/DataTable/ReloadButton.d.ts +0 -5
- package/dist/types/components/DataTable/Table.d.ts +0 -10
- package/dist/types/components/DataTable/TableBody.d.ts +0 -21
- package/dist/types/components/DataTable/TableCardContainer.d.ts +0 -7
- package/dist/types/components/DataTable/TableCards.d.ts +0 -11
- package/dist/types/components/DataTable/TableComponent.d.ts +0 -6
- package/dist/types/components/DataTable/TableControls.d.ts +0 -21
- package/dist/types/components/DataTable/TableFilter.d.ts +0 -1
- package/dist/types/components/DataTable/TableFilterTags.d.ts +0 -1
- package/dist/types/components/DataTable/TableFilters.d.ts +0 -1
- package/dist/types/components/DataTable/TableFooter.d.ts +0 -9
- package/dist/types/components/DataTable/TableHeader.d.ts +0 -13
- package/dist/types/components/DataTable/TableLoadingComponent.d.ts +0 -5
- package/dist/types/components/DataTable/TableOrderer.d.ts +0 -1
- package/dist/types/components/DataTable/TableSelector.d.ts +0 -1
- package/dist/types/components/DataTable/TableSorter.d.ts +0 -1
- package/dist/types/components/DataTable/TableViewer.d.ts +0 -1
- package/dist/types/components/DataTable/TextCell.d.ts +0 -10
- package/dist/types/components/DataTable/components/EmptyState.d.ts +0 -5
- package/dist/types/components/DataTable/components/ErrorAlert.d.ts +0 -4
- package/dist/types/components/DataTable/components/RecordDisplay.d.ts +0 -9
- package/dist/types/components/DataTable/components/TextCell.d.ts +0 -10
- package/dist/types/components/Filter/DateRangeFilter.d.ts +0 -9
- package/dist/types/components/Filter/FilterOptions.d.ts +0 -4
- package/dist/types/components/Form/Form.d.ts +0 -36
- package/dist/types/components/Form/components/ArrayRenderer.d.ts +0 -7
- package/dist/types/components/Form/components/BooleanPicker.d.ts +0 -7
- package/dist/types/components/Form/components/ColumnRenderer.d.ts +0 -7
- package/dist/types/components/Form/components/EnumPicker.d.ts +0 -8
- package/dist/types/components/Form/components/FilePicker.d.ts +0 -5
- package/dist/types/components/Form/components/IdPicker.d.ts +0 -8
- package/dist/types/components/Form/components/IdViewer.d.ts +0 -5
- package/dist/types/components/Form/components/NumberInputField.d.ts +0 -7
- package/dist/types/components/Form/components/ObjectInput.d.ts +0 -7
- package/dist/types/components/Form/components/RecordInput.d.ts +0 -7
- package/dist/types/components/Form/components/SchemaRenderer.d.ts +0 -7
- package/dist/types/components/Form/components/StringInputField.d.ts +0 -20
- 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,
|
|
3
|
-
import * as
|
|
4
|
-
import
|
|
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 {
|
|
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 {
|
|
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?:
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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?:
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
248
|
-
|
|
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
|
-
*
|
|
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
|
|
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
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
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
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
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
|
|
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
|
-
|
|
445
|
-
|
|
446
|
-
|
|
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
|
-
|
|
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:
|
|
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:
|
|
504
|
-
translate: react_i18next.UseTranslationResponse<
|
|
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
|
-
|
|
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?:
|
|
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?:
|
|
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,
|
|
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 };
|