@bsol-oss/react-datatable5 13.0.1-beta.0 → 13.0.1-beta.2

package/dist/index.d.ts

@@ -817,12 +817,25 @@ interface TimePickerLabels {
     placeholder?: string;
     emptyMessage?: string;
 }
+interface LoadInitialValuesParams {
+    ids: string[];
+    foreign_key: ForeignKeyProps;
+    setIdMap: React__default.Dispatch<React__default.SetStateAction<Record<string, object>>>;
+}
+interface LoadInitialValuesResult {
+    data: {
+        data: Record<string, any>[];
+        count: number;
+    };
+    idMap: Record<string, object>;
+}
 interface CustomJSONSchema7 extends JSONSchema7 {
     gridColumn?: string;
     gridRow?: string;
     foreign_key?: ForeignKeyProps;
     variant?: string;
     renderDisplay?: (item: unknown) => ReactNode;
+    loadInitialValues?: (params: LoadInitialValuesParams) => Promise<LoadInitialValuesResult>;
     inputRender?: (props: {
         column: string;
         schema: CustomJSONSchema7;
@@ -844,6 +857,24 @@ interface CustomJSONSchema7 extends JSONSchema7 {
     numberStorageType?: 'string' | 'number';
     errorMessages?: Partial<Record<ValidationErrorType | string, string>>;
     filePicker?: FilePickerProps;
+    tagPicker?: {
+        queryFn?: (params: {
+            in_table: string;
+            where?: {
+                id: string;
+                value: string[];
+            }[];
+            limit?: number;
+            offset?: number;
+            searching?: string;
+        }) => Promise<{
+            data: {
+                data: any[];
+                count: number;
+            };
+            idMap?: Record<string, object>;
+        }>;
+    };
 }
 declare const defaultRenderDisplay: (item: unknown) => ReactNode;
 interface TagPickerProps {
@@ -869,7 +900,6 @@ interface FilePickerProps {
 
 interface FormRootProps<TData extends FieldValues> {
     schema: CustomJSONSchema7;
-    serverUrl: string;
     requestUrl?: string;
     idMap: Record<string, object>;
     setIdMap: Dispatch<SetStateAction<Record<string, object>>>;
@@ -913,7 +943,7 @@ declare const idPickerSanityCheck: (column: string, foreign_key?: {
     table?: string | undefined;
     column?: string | undefined;
 } | undefined) => void;
-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, formButtonLabels, timePickerLabels, insideDialog, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, requireConfirmation, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog, }: FormRootProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface DefaultFormProps<TData extends FieldValues> {
     formConfig: Omit<FormRootProps<TData>, "children">;
@@ -1388,4 +1418,4 @@ declare module '@tanstack/react-table' {
     }
 }
 
-export { CalendarDisplay, type CalendarDisplayProps, type CalendarEvent, type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, DatePickerInput, type DatePickerInputProps, 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, type FormButtonLabels, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, type IdPickerLabels, MediaLibraryBrowser, type MediaLibraryBrowserProps, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerLabels, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, SelectAllRowsToggle, type SelectAllRowsToggleProps, 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 TimePickerLabels, type Translate, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, type ValidationErrorType, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, convertToAjvErrorsFormat, createErrorMessage, defaultRenderDisplay, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
+export { CalendarDisplay, type CalendarDisplayProps, type CalendarEvent, type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, DatePickerInput, type DatePickerInputProps, 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, type FormButtonLabels, FormRoot, type FormRootProps, FormTitle, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, type IdPickerLabels, type LoadInitialValuesParams, type LoadInitialValuesResult, MediaLibraryBrowser, type MediaLibraryBrowserProps, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerLabels, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, SelectAllRowsToggle, type SelectAllRowsToggleProps, 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 TimePickerLabels, type Translate, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, type ValidationErrorType, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, convertToAjvErrorsFormat, createErrorMessage, defaultRenderDisplay, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };

package/dist/index.js

@@ -4036,7 +4036,6 @@ const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {},
 //@ts-expect-error TODO: find appropriate type
 const SchemaFormContext = React.createContext({
     schema: {},
-    serverUrl: '',
     requestUrl: '',
     order: [],
     ignore: [],
@@ -4276,7 +4275,7 @@ const idPickerSanityCheck = (column, foreign_key) => {
         throw new Error(`The key column does not exist in properties of column ${column} when using id-picker.`);
     }
 };
-const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, customSuccessRenderer, displayConfig = {
+const FormRoot = ({ schema, idMap, setIdMap, form, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, customSuccessRenderer, displayConfig = {
     showSubmitButton: true,
     showResetButton: true,
     showTitle: true,
@@ -4317,9 +4316,11 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
         }
     };
     const defaultSubmitPromise = (data) => {
+        if (!requestOptions.url) {
+            throw new Error('requestOptions.url is required when onSubmit is not provided');
+        }
         const options = {
             method: 'POST',
-            url: `${serverUrl}`,
             data: clearEmptyString(data),
             ...requestOptions,
         };
@@ -4337,7 +4338,6 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
     };
     return (jsxRuntime.jsx(SchemaFormContext.Provider, { value: {
             schema,
-            serverUrl,
             order,
             ignore,
             include,
@@ -5618,34 +5618,6 @@ const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
                 }) })] }));
 };
 
-const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, offset = 0, }) => {
-    if (serverUrl === undefined || serverUrl.length == 0) {
-        throw new Error("The serverUrl is missing");
-    }
-    if (in_table === undefined || in_table.length == 0) {
-        throw new Error("The in_table is missing");
-    }
-    const options = {
-        method: "GET",
-        url: `${serverUrl}/api/g/${in_table}`,
-        params: {
-            searching,
-            where,
-            limit,
-            offset
-        },
-    };
-    try {
-        const { data } = await axios.request(options);
-        console.log(data);
-        return data;
-    }
-    catch (error) {
-        console.error(error);
-        throw error;
-    }
-};
-
 // Default renderDisplay function that stringifies JSON
 const defaultRenderDisplay = (item) => {
     return JSON.stringify(item);
@@ -5653,8 +5625,13 @@ const defaultRenderDisplay = (item) => {
 
 const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
     const { watch, getValues, formState: { errors }, setValue, } = reactHookForm.useFormContext();
-    const { serverUrl, idMap, setIdMap, idPickerLabels, insideDialog } = useSchemaContext();
-    const { renderDisplay, foreign_key } = schema;
+    const { idMap, setIdMap, idPickerLabels, insideDialog } = useSchemaContext();
+    const { renderDisplay, loadInitialValues: schemaLoadInitialValues, foreign_key, variant, } = schema;
+    // loadInitialValues must be provided in schema for id-picker fields
+    // It's used to load the record of the id so the display is human-readable
+    if (variant === 'id-picker' && !schemaLoadInitialValues) {
+        throw new Error(`loadInitialValues is required in schema for IdPicker field '${column}'. Please provide loadInitialValues function in the schema to load records for human-readable display.`);
+    }
     const { table, column: column_ref, customQueryFn, } = foreign_key;
     const [searchText, setSearchText] = React.useState('');
     const [debouncedSearchText, setDebouncedSearchText] = React.useState('');
@@ -5707,48 +5684,16 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
             if (missingIds.length === 0) {
                 return { data: [], count: 0 };
             }
-            if (customQueryFn) {
-                const { data, idMap } = await customQueryFn({
-                    searching: '',
-                    limit: missingIds.length,
-                    offset: 0,
-                    where: [
-                        {
-                            id: column_ref,
-                            value: missingIds.length === 1 ? missingIds[0] : missingIds,
-                        },
-                    ],
-                });
-                setIdMap((state) => {
-                    return { ...state, ...idMap };
-                });
-                return data;
+            // Use schema's loadInitialValues (required for id-picker)
+            if (!schemaLoadInitialValues) {
+                throw new Error(`loadInitialValues is required in schema for IdPicker field '${column}'.`);
             }
-            const data = await getTableData({
-                serverUrl,
-                searching: '',
-                in_table: table,
-                limit: missingIds.length,
-                offset: 0,
-                where: [
-                    {
-                        id: column_ref,
-                        value: missingIds.length === 1 ? missingIds[0] : missingIds,
-                    },
-                ],
-            });
-            const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
-                return [
-                    item[column_ref],
-                    {
-                        ...item,
-                    },
-                ];
-            }));
-            setIdMap((state) => {
-                return { ...state, ...newMap };
+            const result = await schemaLoadInitialValues({
+                ids: missingIds,
+                foreign_key: foreign_key,
+                setIdMap,
             });
-            return data;
+            return result.data;
         },
         enabled: missingIds.length > 0, // Only fetch if there are missing IDs
         staleTime: 300000,
@@ -5758,35 +5703,21 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
     const query = reactQuery.useQuery({
         queryKey: [`idpicker`, { column, searchText: debouncedSearchText, limit }],
         queryFn: async () => {
-            if (customQueryFn) {
-                const { data, idMap } = await customQueryFn({
-                    searching: debouncedSearchText ?? '',
-                    limit: limit,
-                    offset: 0,
-                });
-                setIdMap((state) => {
-                    return { ...state, ...idMap };
-                });
-                return data;
+            // customQueryFn is required when serverUrl is not available
+            if (!customQueryFn) {
+                throw new Error(`customQueryFn is required in foreign_key for table ${table}. serverUrl has been removed.`);
             }
-            const data = await getTableData({
-                serverUrl,
+            const { data, idMap } = await customQueryFn({
                 searching: debouncedSearchText ?? '',
-                in_table: table,
                 limit: limit,
                 offset: 0,
             });
-            const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
-                return [
-                    item[column_ref],
-                    {
-                        ...item,
-                    },
-                ];
-            }));
-            setIdMap((state) => {
-                return { ...state, ...newMap };
-            });
+            // Update idMap with returned values
+            if (idMap && Object.keys(idMap).length > 0) {
+                setIdMap((state) => {
+                    return { ...state, ...idMap };
+                });
+            }
             return data;
         },
         enabled: true, // Always enabled for combobox
@@ -5910,6 +5841,7 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         idPickerLabels,
         insideDialog: insideDialog ?? false,
         renderDisplay,
+        loadInitialValues: schemaLoadInitialValues, // Required for id-picker, checked above
         column_ref,
         errors,
         setValue,
@@ -6203,31 +6135,35 @@ react.RadioCard.ItemIndicator;
 
 const TagPicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
-    const { serverUrl } = useSchemaContext();
     if (schema.properties == undefined) {
-        throw new Error("schema properties undefined when using DatePicker");
+        throw new Error('schema properties undefined when using DatePicker');
     }
-    const { gridColumn, gridRow, in_table, object_id_column } = schema;
+    const { gridColumn, gridRow, in_table, object_id_column, tagPicker } = schema;
     if (in_table === undefined) {
-        throw new Error("in_table is undefined when using TagPicker");
+        throw new Error('in_table is undefined when using TagPicker');
     }
     if (object_id_column === undefined) {
-        throw new Error("object_id_column is undefined when using TagPicker");
+        throw new Error('object_id_column is undefined when using TagPicker');
+    }
+    if (!tagPicker?.queryFn) {
+        throw new Error('tagPicker.queryFn is required in schema. serverUrl has been removed.');
     }
     const query = reactQuery.useQuery({
         queryKey: [`tagpicker`, in_table],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
-                in_table: "tables_tags_view",
+            const result = await tagPicker.queryFn({
+                in_table: 'tables_tags_view',
                 where: [
                     {
-                        id: "table_name",
+                        id: 'table_name',
                         value: [in_table],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         staleTime: 10000,
     });
@@ -6235,17 +6171,19 @@ const TagPicker = ({ column, schema, prefix }) => {
     const existingTagsQuery = reactQuery.useQuery({
         queryKey: [`existing`, { in_table, object_id_column }, object_id],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
+            const result = await tagPicker.queryFn({
                 in_table: in_table,
                 where: [
                     {
                         id: object_id_column,
-                        value: object_id[0],
+                        value: [object_id[0]],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         enabled: object_id != undefined,
         staleTime: 10000,
@@ -6256,9 +6194,9 @@ const TagPicker = ({ column, schema, prefix }) => {
     if (!!object_id === false) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
-    return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 4, gridColumn,
+    return (jsxRuntime.jsxs(react.Flex, { flexFlow: 'column', gap: 4, gridColumn,
         gridRow, children: [isFetching && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isFetching" }), isLoading && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isLoading" }), isPending && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isPending" }), isError && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isError" }), dataList.map(({ parent_tag_name, all_tags, is_mutually_exclusive }) => {
-                return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 2, children: [jsxRuntime.jsx(react.Text, { children: parent_tag_name }), is_mutually_exclusive && (jsxRuntime.jsx(RadioCardRoot, { defaultValue: "next", variant: "surface", onValueChange: (tagIds) => {
+                return (jsxRuntime.jsxs(react.Flex, { flexFlow: 'column', gap: 2, children: [jsxRuntime.jsx(react.Text, { children: parent_tag_name }), is_mutually_exclusive && (jsxRuntime.jsx(RadioCardRoot, { defaultValue: "next", variant: 'surface', onValueChange: (tagIds) => {
                                 const existedTags = Object.values(all_tags)
                                     .filter(({ id }) => {
                                     return existingTagList.some(({ tag_id }) => tag_id === id);
@@ -6270,20 +6208,20 @@ const TagPicker = ({ column, schema, prefix }) => {
                                     tagIds.value,
                                 ]);
                                 setValue(`${column}.${parent_tag_name}.old`, existedTags);
-                            }, children: jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsxRuntime.jsx(react.Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsxRuntime.jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", disabled: true }, `${tagName}-${id}`));
+                                        return (jsxRuntime.jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', disabled: true }, `${tagName}-${id}`));
                                     }
-                                    return (jsxRuntime.jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", colorPalette: "blue" }, `${tagName}-${id}`));
+                                    return (jsxRuntime.jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', colorPalette: 'blue' }, `${tagName}-${id}`));
                                 }) }) })), !is_mutually_exclusive && (jsxRuntime.jsx(react.CheckboxGroup, { onValueChange: (tagIds) => {
                                 setValue(`${column}.${parent_tag_name}.current`, tagIds);
-                            }, children: jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsxRuntime.jsx(react.Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%", disabled: true, colorPalette: "blue" }, `${tagName}-${id}`));
+                                        return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%', disabled: true, colorPalette: 'blue' }, `${tagName}-${id}`));
                                     }
-                                    return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%" }, `${tagName}-${id}`));
+                                    return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%' }, `${tagName}-${id}`));
                                 }) }) }))] }, `tag-${parent_tag_name}`));
-            }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
+            }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: (errors[`${column}`]?.message ?? 'No error message') }))] }));
 };
 
 const Textarea = React.forwardRef(({ value, defaultValue, placeholder, onChange, onFocus, onBlur, disabled = false, readOnly = false, className, rows = 4, maxLength, autoFocus = false, invalid = false, required = false, label, helperText, errorText, ...props }, ref) => {
@@ -7965,31 +7903,35 @@ const StringViewer = ({ column, schema, prefix, }) => {
 
 const TagViewer = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
-    const { serverUrl } = useSchemaContext();
     if (schema.properties == undefined) {
-        throw new Error("schema properties undefined when using DatePicker");
+        throw new Error('schema properties undefined when using DatePicker');
     }
-    const { gridColumn, gridRow, in_table, object_id_column } = schema;
+    const { gridColumn, gridRow, in_table, object_id_column, tagPicker } = schema;
     if (in_table === undefined) {
-        throw new Error("in_table is undefined when using TagPicker");
+        throw new Error('in_table is undefined when using TagPicker');
     }
     if (object_id_column === undefined) {
-        throw new Error("object_id_column is undefined when using TagPicker");
+        throw new Error('object_id_column is undefined when using TagPicker');
+    }
+    if (!tagPicker?.queryFn) {
+        throw new Error('tagPicker.queryFn is required in schema. serverUrl has been removed.');
     }
     const query = reactQuery.useQuery({
         queryKey: [`tagpicker`, in_table],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
-                in_table: "tables_tags_view",
+            const result = await tagPicker.queryFn({
+                in_table: 'tables_tags_view',
                 where: [
                     {
-                        id: "table_name",
+                        id: 'table_name',
                         value: [in_table],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         staleTime: 10000,
     });
@@ -7997,17 +7939,19 @@ const TagViewer = ({ column, schema, prefix }) => {
     const existingTagsQuery = reactQuery.useQuery({
         queryKey: [`existing`, { in_table, object_id_column }, object_id],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
+            const result = await tagPicker.queryFn({
                 in_table: in_table,
                 where: [
                     {
                         id: object_id_column,
-                        value: object_id[0],
+                        value: [object_id[0]],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         enabled: object_id != undefined,
         staleTime: 10000,
@@ -8018,9 +7962,9 @@ const TagViewer = ({ column, schema, prefix }) => {
     if (!!object_id === false) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
-    return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 4, gridColumn,
+    return (jsxRuntime.jsxs(react.Flex, { flexFlow: 'column', gap: 4, gridColumn,
         gridRow, children: [isFetching && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isFetching" }), isLoading && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isLoading" }), isPending && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isPending" }), isError && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isError" }), dataList.map(({ parent_tag_name, all_tags, is_mutually_exclusive }) => {
-                return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 2, children: [jsxRuntime.jsx(react.Text, { children: parent_tag_name }), is_mutually_exclusive && (jsxRuntime.jsx(RadioCardRoot, { defaultValue: "next", variant: "surface", onValueChange: (tagIds) => {
+                return (jsxRuntime.jsxs(react.Flex, { flexFlow: 'column', gap: 2, children: [jsxRuntime.jsx(react.Text, { children: parent_tag_name }), is_mutually_exclusive && (jsxRuntime.jsx(RadioCardRoot, { defaultValue: "next", variant: 'surface', onValueChange: (tagIds) => {
                                 const existedTags = Object.values(all_tags)
                                     .filter(({ id }) => {
                                     return existingTagList.some(({ tag_id }) => tag_id === id);
@@ -8032,20 +7976,20 @@ const TagViewer = ({ column, schema, prefix }) => {
                                     tagIds.value,
                                 ]);
                                 setValue(`${column}.${parent_tag_name}.old`, existedTags);
-                            }, children: jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsxRuntime.jsx(react.Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsxRuntime.jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", disabled: true }, `${tagName}-${id}`));
+                                        return (jsxRuntime.jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', disabled: true }, `${tagName}-${id}`));
                                     }
-                                    return (jsxRuntime.jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", colorPalette: "blue" }, `${tagName}-${id}`));
+                                    return (jsxRuntime.jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', colorPalette: 'blue' }, `${tagName}-${id}`));
                                 }) }) })), !is_mutually_exclusive && (jsxRuntime.jsx(react.CheckboxGroup, { onValueChange: (tagIds) => {
                                 setValue(`${column}.${parent_tag_name}.current`, tagIds);
-                            }, children: jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsxRuntime.jsx(react.Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%", disabled: true, colorPalette: "blue" }, `${tagName}-${id}`));
+                                        return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%', disabled: true, colorPalette: 'blue' }, `${tagName}-${id}`));
                                     }
-                                    return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%" }, `${tagName}-${id}`));
+                                    return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%' }, `${tagName}-${id}`));
                                 }) }) }))] }, `tag-${parent_tag_name}`));
-            }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
+            }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: 'red.400', children: (errors[`${column}`]?.message ?? 'No error message') }))] }));
 };
 
 const TextAreaViewer = ({ column, schema, prefix, }) => {

package/dist/index.mjs

@@ -4016,7 +4016,6 @@ const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {},
 //@ts-expect-error TODO: find appropriate type
 const SchemaFormContext = createContext({
     schema: {},
-    serverUrl: '',
     requestUrl: '',
     order: [],
     ignore: [],
@@ -4256,7 +4255,7 @@ const idPickerSanityCheck = (column, foreign_key) => {
         throw new Error(`The key column does not exist in properties of column ${column} when using id-picker.`);
     }
 };
-const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, customSuccessRenderer, displayConfig = {
+const FormRoot = ({ schema, idMap, setIdMap, form, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, customSuccessRenderer, displayConfig = {
     showSubmitButton: true,
     showResetButton: true,
     showTitle: true,
@@ -4297,9 +4296,11 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
         }
     };
     const defaultSubmitPromise = (data) => {
+        if (!requestOptions.url) {
+            throw new Error('requestOptions.url is required when onSubmit is not provided');
+        }
         const options = {
             method: 'POST',
-            url: `${serverUrl}`,
             data: clearEmptyString(data),
             ...requestOptions,
         };
@@ -4317,7 +4318,6 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
     };
     return (jsx(SchemaFormContext.Provider, { value: {
             schema,
-            serverUrl,
             order,
             ignore,
             include,
@@ -5598,34 +5598,6 @@ const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
                 }) })] }));
 };
 
-const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, offset = 0, }) => {
-    if (serverUrl === undefined || serverUrl.length == 0) {
-        throw new Error("The serverUrl is missing");
-    }
-    if (in_table === undefined || in_table.length == 0) {
-        throw new Error("The in_table is missing");
-    }
-    const options = {
-        method: "GET",
-        url: `${serverUrl}/api/g/${in_table}`,
-        params: {
-            searching,
-            where,
-            limit,
-            offset
-        },
-    };
-    try {
-        const { data } = await axios.request(options);
-        console.log(data);
-        return data;
-    }
-    catch (error) {
-        console.error(error);
-        throw error;
-    }
-};
-
 // Default renderDisplay function that stringifies JSON
 const defaultRenderDisplay = (item) => {
     return JSON.stringify(item);
@@ -5633,8 +5605,13 @@ const defaultRenderDisplay = (item) => {
 
 const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
     const { watch, getValues, formState: { errors }, setValue, } = useFormContext();
-    const { serverUrl, idMap, setIdMap, idPickerLabels, insideDialog } = useSchemaContext();
-    const { renderDisplay, foreign_key } = schema;
+    const { idMap, setIdMap, idPickerLabels, insideDialog } = useSchemaContext();
+    const { renderDisplay, loadInitialValues: schemaLoadInitialValues, foreign_key, variant, } = schema;
+    // loadInitialValues must be provided in schema for id-picker fields
+    // It's used to load the record of the id so the display is human-readable
+    if (variant === 'id-picker' && !schemaLoadInitialValues) {
+        throw new Error(`loadInitialValues is required in schema for IdPicker field '${column}'. Please provide loadInitialValues function in the schema to load records for human-readable display.`);
+    }
     const { table, column: column_ref, customQueryFn, } = foreign_key;
     const [searchText, setSearchText] = useState('');
     const [debouncedSearchText, setDebouncedSearchText] = useState('');
@@ -5687,48 +5664,16 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
             if (missingIds.length === 0) {
                 return { data: [], count: 0 };
             }
-            if (customQueryFn) {
-                const { data, idMap } = await customQueryFn({
-                    searching: '',
-                    limit: missingIds.length,
-                    offset: 0,
-                    where: [
-                        {
-                            id: column_ref,
-                            value: missingIds.length === 1 ? missingIds[0] : missingIds,
-                        },
-                    ],
-                });
-                setIdMap((state) => {
-                    return { ...state, ...idMap };
-                });
-                return data;
+            // Use schema's loadInitialValues (required for id-picker)
+            if (!schemaLoadInitialValues) {
+                throw new Error(`loadInitialValues is required in schema for IdPicker field '${column}'.`);
             }
-            const data = await getTableData({
-                serverUrl,
-                searching: '',
-                in_table: table,
-                limit: missingIds.length,
-                offset: 0,
-                where: [
-                    {
-                        id: column_ref,
-                        value: missingIds.length === 1 ? missingIds[0] : missingIds,
-                    },
-                ],
-            });
-            const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
-                return [
-                    item[column_ref],
-                    {
-                        ...item,
-                    },
-                ];
-            }));
-            setIdMap((state) => {
-                return { ...state, ...newMap };
+            const result = await schemaLoadInitialValues({
+                ids: missingIds,
+                foreign_key: foreign_key,
+                setIdMap,
             });
-            return data;
+            return result.data;
         },
         enabled: missingIds.length > 0, // Only fetch if there are missing IDs
         staleTime: 300000,
@@ -5738,35 +5683,21 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
     const query = useQuery({
         queryKey: [`idpicker`, { column, searchText: debouncedSearchText, limit }],
         queryFn: async () => {
-            if (customQueryFn) {
-                const { data, idMap } = await customQueryFn({
-                    searching: debouncedSearchText ?? '',
-                    limit: limit,
-                    offset: 0,
-                });
-                setIdMap((state) => {
-                    return { ...state, ...idMap };
-                });
-                return data;
+            // customQueryFn is required when serverUrl is not available
+            if (!customQueryFn) {
+                throw new Error(`customQueryFn is required in foreign_key for table ${table}. serverUrl has been removed.`);
             }
-            const data = await getTableData({
-                serverUrl,
+            const { data, idMap } = await customQueryFn({
                 searching: debouncedSearchText ?? '',
-                in_table: table,
                 limit: limit,
                 offset: 0,
             });
-            const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
-                return [
-                    item[column_ref],
-                    {
-                        ...item,
-                    },
-                ];
-            }));
-            setIdMap((state) => {
-                return { ...state, ...newMap };
-            });
+            // Update idMap with returned values
+            if (idMap && Object.keys(idMap).length > 0) {
+                setIdMap((state) => {
+                    return { ...state, ...idMap };
+                });
+            }
             return data;
         },
         enabled: true, // Always enabled for combobox
@@ -5890,6 +5821,7 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         idPickerLabels,
         insideDialog: insideDialog ?? false,
         renderDisplay,
+        loadInitialValues: schemaLoadInitialValues, // Required for id-picker, checked above
         column_ref,
         errors,
         setValue,
@@ -6183,31 +6115,35 @@ RadioCard.ItemIndicator;
 
 const TagPicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
-    const { serverUrl } = useSchemaContext();
     if (schema.properties == undefined) {
-        throw new Error("schema properties undefined when using DatePicker");
+        throw new Error('schema properties undefined when using DatePicker');
     }
-    const { gridColumn, gridRow, in_table, object_id_column } = schema;
+    const { gridColumn, gridRow, in_table, object_id_column, tagPicker } = schema;
     if (in_table === undefined) {
-        throw new Error("in_table is undefined when using TagPicker");
+        throw new Error('in_table is undefined when using TagPicker');
     }
     if (object_id_column === undefined) {
-        throw new Error("object_id_column is undefined when using TagPicker");
+        throw new Error('object_id_column is undefined when using TagPicker');
+    }
+    if (!tagPicker?.queryFn) {
+        throw new Error('tagPicker.queryFn is required in schema. serverUrl has been removed.');
     }
     const query = useQuery({
         queryKey: [`tagpicker`, in_table],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
-                in_table: "tables_tags_view",
+            const result = await tagPicker.queryFn({
+                in_table: 'tables_tags_view',
                 where: [
                     {
-                        id: "table_name",
+                        id: 'table_name',
                         value: [in_table],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         staleTime: 10000,
     });
@@ -6215,17 +6151,19 @@ const TagPicker = ({ column, schema, prefix }) => {
     const existingTagsQuery = useQuery({
         queryKey: [`existing`, { in_table, object_id_column }, object_id],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
+            const result = await tagPicker.queryFn({
                 in_table: in_table,
                 where: [
                     {
                         id: object_id_column,
-                        value: object_id[0],
+                        value: [object_id[0]],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         enabled: object_id != undefined,
         staleTime: 10000,
@@ -6236,9 +6174,9 @@ const TagPicker = ({ column, schema, prefix }) => {
     if (!!object_id === false) {
         return jsx(Fragment, {});
     }
-    return (jsxs(Flex, { flexFlow: "column", gap: 4, gridColumn,
+    return (jsxs(Flex, { flexFlow: 'column', gap: 4, gridColumn,
         gridRow, children: [isFetching && jsx(Fragment, { children: "isFetching" }), isLoading && jsx(Fragment, { children: "isLoading" }), isPending && jsx(Fragment, { children: "isPending" }), isError && jsx(Fragment, { children: "isError" }), dataList.map(({ parent_tag_name, all_tags, is_mutually_exclusive }) => {
-                return (jsxs(Flex, { flexFlow: "column", gap: 2, children: [jsx(Text, { children: parent_tag_name }), is_mutually_exclusive && (jsx(RadioCardRoot, { defaultValue: "next", variant: "surface", onValueChange: (tagIds) => {
+                return (jsxs(Flex, { flexFlow: 'column', gap: 2, children: [jsx(Text, { children: parent_tag_name }), is_mutually_exclusive && (jsx(RadioCardRoot, { defaultValue: "next", variant: 'surface', onValueChange: (tagIds) => {
                                 const existedTags = Object.values(all_tags)
                                     .filter(({ id }) => {
                                     return existingTagList.some(({ tag_id }) => tag_id === id);
@@ -6250,20 +6188,20 @@ const TagPicker = ({ column, schema, prefix }) => {
                                     tagIds.value,
                                 ]);
                                 setValue(`${column}.${parent_tag_name}.old`, existedTags);
-                            }, children: jsx(Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsx(Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", disabled: true }, `${tagName}-${id}`));
+                                        return (jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', disabled: true }, `${tagName}-${id}`));
                                     }
-                                    return (jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", colorPalette: "blue" }, `${tagName}-${id}`));
+                                    return (jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', colorPalette: 'blue' }, `${tagName}-${id}`));
                                 }) }) })), !is_mutually_exclusive && (jsx(CheckboxGroup, { onValueChange: (tagIds) => {
                                 setValue(`${column}.${parent_tag_name}.current`, tagIds);
-                            }, children: jsx(Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsx(Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%", disabled: true, colorPalette: "blue" }, `${tagName}-${id}`));
+                                        return (jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%', disabled: true, colorPalette: 'blue' }, `${tagName}-${id}`));
                                     }
-                                    return (jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%" }, `${tagName}-${id}`));
+                                    return (jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%' }, `${tagName}-${id}`));
                                 }) }) }))] }, `tag-${parent_tag_name}`));
-            }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
+            }), errors[`${column}`] && (jsx(Text, { color: 'red.400', children: (errors[`${column}`]?.message ?? 'No error message') }))] }));
 };
 
 const Textarea = forwardRef(({ value, defaultValue, placeholder, onChange, onFocus, onBlur, disabled = false, readOnly = false, className, rows = 4, maxLength, autoFocus = false, invalid = false, required = false, label, helperText, errorText, ...props }, ref) => {
@@ -7945,31 +7883,35 @@ const StringViewer = ({ column, schema, prefix, }) => {
 
 const TagViewer = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
-    const { serverUrl } = useSchemaContext();
     if (schema.properties == undefined) {
-        throw new Error("schema properties undefined when using DatePicker");
+        throw new Error('schema properties undefined when using DatePicker');
     }
-    const { gridColumn, gridRow, in_table, object_id_column } = schema;
+    const { gridColumn, gridRow, in_table, object_id_column, tagPicker } = schema;
     if (in_table === undefined) {
-        throw new Error("in_table is undefined when using TagPicker");
+        throw new Error('in_table is undefined when using TagPicker');
     }
     if (object_id_column === undefined) {
-        throw new Error("object_id_column is undefined when using TagPicker");
+        throw new Error('object_id_column is undefined when using TagPicker');
+    }
+    if (!tagPicker?.queryFn) {
+        throw new Error('tagPicker.queryFn is required in schema. serverUrl has been removed.');
     }
     const query = useQuery({
         queryKey: [`tagpicker`, in_table],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
-                in_table: "tables_tags_view",
+            const result = await tagPicker.queryFn({
+                in_table: 'tables_tags_view',
                 where: [
                     {
-                        id: "table_name",
+                        id: 'table_name',
                         value: [in_table],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         staleTime: 10000,
     });
@@ -7977,17 +7919,19 @@ const TagViewer = ({ column, schema, prefix }) => {
     const existingTagsQuery = useQuery({
         queryKey: [`existing`, { in_table, object_id_column }, object_id],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
+            const result = await tagPicker.queryFn({
                 in_table: in_table,
                 where: [
                     {
                         id: object_id_column,
-                        value: object_id[0],
+                        value: [object_id[0]],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         enabled: object_id != undefined,
         staleTime: 10000,
@@ -7998,9 +7942,9 @@ const TagViewer = ({ column, schema, prefix }) => {
     if (!!object_id === false) {
         return jsx(Fragment, {});
     }
-    return (jsxs(Flex, { flexFlow: "column", gap: 4, gridColumn,
+    return (jsxs(Flex, { flexFlow: 'column', gap: 4, gridColumn,
         gridRow, children: [isFetching && jsx(Fragment, { children: "isFetching" }), isLoading && jsx(Fragment, { children: "isLoading" }), isPending && jsx(Fragment, { children: "isPending" }), isError && jsx(Fragment, { children: "isError" }), dataList.map(({ parent_tag_name, all_tags, is_mutually_exclusive }) => {
-                return (jsxs(Flex, { flexFlow: "column", gap: 2, children: [jsx(Text, { children: parent_tag_name }), is_mutually_exclusive && (jsx(RadioCardRoot, { defaultValue: "next", variant: "surface", onValueChange: (tagIds) => {
+                return (jsxs(Flex, { flexFlow: 'column', gap: 2, children: [jsx(Text, { children: parent_tag_name }), is_mutually_exclusive && (jsx(RadioCardRoot, { defaultValue: "next", variant: 'surface', onValueChange: (tagIds) => {
                                 const existedTags = Object.values(all_tags)
                                     .filter(({ id }) => {
                                     return existingTagList.some(({ tag_id }) => tag_id === id);
@@ -8012,20 +7956,20 @@ const TagViewer = ({ column, schema, prefix }) => {
                                     tagIds.value,
                                 ]);
                                 setValue(`${column}.${parent_tag_name}.old`, existedTags);
-                            }, children: jsx(Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsx(Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", disabled: true }, `${tagName}-${id}`));
+                                        return (jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', disabled: true }, `${tagName}-${id}`));
                                     }
-                                    return (jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", colorPalette: "blue" }, `${tagName}-${id}`));
+                                    return (jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', colorPalette: 'blue' }, `${tagName}-${id}`));
                                 }) }) })), !is_mutually_exclusive && (jsx(CheckboxGroup, { onValueChange: (tagIds) => {
                                 setValue(`${column}.${parent_tag_name}.current`, tagIds);
-                            }, children: jsx(Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsx(Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%", disabled: true, colorPalette: "blue" }, `${tagName}-${id}`));
+                                        return (jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%', disabled: true, colorPalette: 'blue' }, `${tagName}-${id}`));
                                     }
-                                    return (jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%" }, `${tagName}-${id}`));
+                                    return (jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%' }, `${tagName}-${id}`));
                                 }) }) }))] }, `tag-${parent_tag_name}`));
-            }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
+            }), errors[`${column}`] && (jsx(Text, { color: 'red.400', children: (errors[`${column}`]?.message ?? 'No error message') }))] }));
 };
 
 const TextAreaViewer = ({ column, schema, prefix, }) => {

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

@@ -6,7 +6,6 @@ import { Translate } from './useForm';
 import { DateTimePickerLabels, IdPickerLabels, EnumPickerLabels, FilePickerLabels, FormButtonLabels, TimePickerLabels } from './components/types/CustomJSONSchema7';
 export interface SchemaFormContext<TData extends FieldValues> {
     schema: JSONSchema7;
-    serverUrl: string;
     requestUrl: string;
     order: string[];
     ignore: string[];

package/dist/types/components/Form/components/core/FormRoot.d.ts

@@ -7,7 +7,6 @@ import { Translate } from '../../useForm';
 import { CustomJSONSchema7, DateTimePickerLabels, IdPickerLabels, EnumPickerLabels, FilePickerLabels, FormButtonLabels, TimePickerLabels } from '../types/CustomJSONSchema7';
 export interface FormRootProps<TData extends FieldValues> {
     schema: CustomJSONSchema7;
-    serverUrl: string;
     requestUrl?: string;
     idMap: Record<string, object>;
     setIdMap: Dispatch<SetStateAction<Record<string, object>>>;
@@ -51,4 +50,4 @@ export declare const idPickerSanityCheck: (column: string, foreign_key?: {
     table?: string | undefined;
     column?: string | undefined;
 } | undefined) => void;
-export 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, formButtonLabels, timePickerLabels, insideDialog, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormRoot: <TData extends FieldValues>({ schema, idMap, setIdMap, form, translate, children, order, ignore, include, onSubmit, rowNumber, requestOptions, getUpdatedData, customErrorRenderer, customSuccessRenderer, displayConfig, requireConfirmation, dateTimePickerLabels, idPickerLabels, enumPickerLabels, filePickerLabels, formButtonLabels, timePickerLabels, insideDialog, }: FormRootProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/fields/TagPicker.d.ts

@@ -1,4 +1,4 @@
-import { TagPickerProps } from "../types/CustomJSONSchema7";
+import { TagPickerProps } from '../types/CustomJSONSchema7';
 export interface Tag {
     id: string;
     name: string;

package/dist/types/components/Form/components/fields/useIdPickerData.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="react" />
-import { CustomJSONSchema7 } from '../types/CustomJSONSchema7';
+import React from 'react';
+import { CustomJSONSchema7, LoadInitialValuesParams, LoadInitialValuesResult } from '../types/CustomJSONSchema7';
 export interface RecordType {
     [key: string]: any;
 }
+export type { LoadInitialValuesParams, LoadInitialValuesResult, } from '../types/CustomJSONSchema7';
 export interface UseIdPickerDataProps {
     column: string;
     schema: CustomJSONSchema7;
@@ -39,6 +40,7 @@ export interface UseIdPickerDataReturn {
     idPickerLabels: any;
     insideDialog: boolean;
     renderDisplay: ((item: RecordType) => React.ReactNode) | undefined;
+    loadInitialValues: (params: LoadInitialValuesParams) => Promise<LoadInitialValuesResult>;
     column_ref: string;
     errors: any;
     setValue: (name: string, value: any) => void;

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

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 import { ForeignKeyProps } from '../fields/StringInputField';
 import { UseFormReturn } from 'react-hook-form';
 import { ValidationErrorType } from '../../utils/buildErrorMessages';
+import React from 'react';
 export interface DateTimePickerLabels {
     monthNamesShort?: string[];
     weekdayNamesShort?: string[];
@@ -60,12 +61,25 @@ export interface TimePickerLabels {
     placeholder?: string;
     emptyMessage?: string;
 }
+export interface LoadInitialValuesParams {
+    ids: string[];
+    foreign_key: ForeignKeyProps;
+    setIdMap: React.Dispatch<React.SetStateAction<Record<string, object>>>;
+}
+export interface LoadInitialValuesResult {
+    data: {
+        data: Record<string, any>[];
+        count: number;
+    };
+    idMap: Record<string, object>;
+}
 export interface CustomJSONSchema7 extends JSONSchema7 {
     gridColumn?: string;
     gridRow?: string;
     foreign_key?: ForeignKeyProps;
     variant?: string;
     renderDisplay?: (item: unknown) => ReactNode;
+    loadInitialValues?: (params: LoadInitialValuesParams) => Promise<LoadInitialValuesResult>;
     inputRender?: (props: {
         column: string;
         schema: CustomJSONSchema7;
@@ -87,6 +101,24 @@ export interface CustomJSONSchema7 extends JSONSchema7 {
     numberStorageType?: 'string' | 'number';
     errorMessages?: Partial<Record<ValidationErrorType | string, string>>;
     filePicker?: FilePickerProps;
+    tagPicker?: {
+        queryFn?: (params: {
+            in_table: string;
+            where?: {
+                id: string;
+                value: string[];
+            }[];
+            limit?: number;
+            offset?: number;
+            searching?: string;
+        }) => Promise<{
+            data: {
+                data: any[];
+                count: number;
+            };
+            idMap?: Record<string, object>;
+        }>;
+    };
 }
 export declare const defaultRenderDisplay: (item: unknown) => ReactNode;
 export interface TagPickerProps {

package/dist/types/components/Form/components/viewers/TagViewer.d.ts

@@ -1,4 +1,4 @@
-import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
+import { CustomJSONSchema7 } from '../types/CustomJSONSchema7';
 export interface Tag {
     id: string;
     name: string;

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

@@ -1,5 +1,4 @@
 export interface GetTableDataConfig {
-    serverUrl: string;
     in_table: string;
     limit?: number;
     offset?: number;
@@ -13,4 +12,4 @@ export interface GetTableResponse {
     data?: object[];
     count: number;
 }
-export declare const getTableData: ({ serverUrl, in_table, searching, where, limit, offset, }: GetTableDataConfig) => Promise<any>;
+export declare const getTableData: ({ in_table, searching, where, limit, offset, }: GetTableDataConfig) => Promise<never>;

package/package.json

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