@bsol-oss/react-datatable5 11.0.0-beta.1 → 11.0.0-beta.10

package/dist/index.js

@@ -2380,7 +2380,7 @@ function ColumnCard({ columnId }) {
             onDrop: () => setDragging(false), // NEW
         });
     }, [columnId, table]);
-    return (jsxRuntime.jsxs(react.Grid, { ref: ref, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", style: dragging ? { opacity: 0.4 } : {}, children: [jsxRuntime.jsx(react.Flex, { alignItems: "center", padding: "0", children: jsxRuntime.jsx(fa6.FaGripLinesVertical, { color: "gray.400" }) }), jsxRuntime.jsx(react.Flex, { justifyContent: "space-between", alignItems: "center", children: jsxRuntime.jsx(CheckboxCard, { variant: "surface", label: displayName, checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }) })] }));
+    return (jsxRuntime.jsxs(react.Grid, { ref: ref, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", style: dragging ? { opacity: 0.4 } : {}, children: [jsxRuntime.jsx(react.Flex, { alignItems: "center", padding: "0", cursor: 'grab', children: jsxRuntime.jsx(fa6.FaGripLinesVertical, { color: "gray.400" }) }), jsxRuntime.jsx(react.Flex, { justifyContent: "space-between", alignItems: "center", children: jsxRuntime.jsx(CheckboxCard, { variant: "surface", label: displayName, checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }) })] }));
 }
 function CardContainer({ location, children }) {
     const ref = React.useRef(null);
@@ -2418,9 +2418,11 @@ function CardContainer({ location, children }) {
 }
 const TableViewer = () => {
     const { table } = useDataTableContext();
-    const [order, setOrder] = React.useState(table.getAllLeafColumns().map((column) => {
-        return column.id;
-    }));
+    const order = table.getState().columnOrder.length > 0
+        ? table.getState().columnOrder
+        : table.getAllLeafColumns().map(({ id }) => {
+            return id;
+        });
     React.useEffect(() => {
         return monitorForElements({
             onDrop({ source, location }) {
@@ -2445,11 +2447,10 @@ const TableViewer = () => {
                     ...columnAfter,
                 ].filter((id) => id != "<marker>");
                 table.setColumnOrder(newOrder);
-                setOrder(newOrder);
             },
         });
-    }, [order, table]);
-    return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "0.25rem", children: table.getState().columnOrder.map((columnId, index) => {
+    }, [table]);
+    return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "0.25rem", children: order.map((columnId, index) => {
             return (jsxRuntime.jsx(CardContainer, { location: index, children: jsxRuntime.jsx(ColumnCard, { columnId: columnId }) }));
         }) }));
 };
@@ -2624,89 +2625,77 @@ const RecordDisplay = ({ object, boxProps, translate, prefix = "", }) => {
         }) }));
 };
 
-const formatValue = (value) => {
-    if (typeof value === "object") {
-        return JSON.stringify(value);
-    }
-    if (typeof value === "string") {
-        return value;
-    }
-    if (typeof value === "number" || typeof value === "boolean") {
-        return `${value}`;
-    }
-    if (value === undefined) {
-        return `undefined`;
-    }
-    throw new Error(`value is unknown, ${typeof value}`);
-};
-const DataDisplay = ({ variant = "", translate }) => {
-    const { table } = useDataTableContext();
+const CellRenderer = ({ cell }) => {
+    const { translate } = useDataTableContext();
     const getLabel = ({ columnId }) => {
         if (translate !== undefined) {
             return translate.t(`${columnId}`);
         }
         return snakeToLabel(columnId);
     };
-    if (variant == "horizontal") {
-        return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
-                return (jsxRuntime.jsx(react.Card.Root, { children: jsxRuntime.jsx(react.Card.Body, { children: jsxRuntime.jsx(react.DataList.Root, { gap: 4, padding: 4, display: "grid", variant: "subtle", orientation: "horizontal", overflow: "auto", children: row.getVisibleCells().map((cell) => {
-                                const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
-                                if (showCustomDataDisplay) {
-                                    return (jsxRuntime.jsx(react.Flex, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
-                                }
-                                const value = cell.getValue();
-                                if (typeof value === "object") {
-                                    return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
-                                                    borderWidth: 1,
-                                                    borderRadius: 4,
-                                                    borderColor: "gray.400",
-                                                    paddingX: 4,
-                                                    paddingY: 2,
-                                                }, object: value })] }, cell.id));
-                                }
-                                return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(react.DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
-                            }) }) }) }, `chakra-table-card-${row.id}`));
-            }) }));
+    const formatValue = (value) => {
+        if (typeof value === "object") {
+            return JSON.stringify(value);
+        }
+        if (typeof value === "string") {
+            return value;
+        }
+        if (typeof value === "number" || typeof value === "boolean") {
+            return `${value}`;
+        }
+        if (value === undefined) {
+            if (translate !== undefined) {
+                return translate.t(`undefined`);
+            }
+            return `undefined`;
+        }
+        throw new Error(`value is unknown, ${typeof value}`);
+    };
+    const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
+    const gridColumn = cell.column.columnDef.meta?.gridColumn ?? [
+        "span 12",
+        "span 6",
+        "span 3",
+    ];
+    const gridRow = cell.column.columnDef.meta?.gridRow ?? {};
+    if (showCustomDataDisplay) {
+        return (jsxRuntime.jsx(react.Flex, { gridColumn, gridRow, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
     }
-    if (variant == "stats") {
-        return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
-                return (jsxRuntime.jsx(react.Card.Root, { children: jsxRuntime.jsx(react.Card.Body, { children: jsxRuntime.jsx(react.DataList.Root, { gap: 4, padding: 4, display: "flex", flexFlow: "row", variant: "subtle", overflow: "auto", children: row.getVisibleCells().map((cell) => {
-                                const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
-                                if (showCustomDataDisplay) {
-                                    return (jsxRuntime.jsx(react.Flex, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
-                                }
-                                const value = cell.getValue();
-                                if (typeof value === "object") {
-                                    return (jsxRuntime.jsxs(react.DataList.Item, { display: "inline-flex", flexFlow: "column", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
-                                                    borderWidth: 1,
-                                                    borderRadius: 4,
-                                                    borderColor: "gray.400",
-                                                    paddingX: 4,
-                                                    paddingY: 2,
-                                                }, object: value })] }));
-                                }
-                                return (jsxRuntime.jsxs(react.DataList.Item, { display: "flex", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(react.DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
-                            }) }) }) }, `chakra-table-card-${row.id}`));
-            }) }));
+    const value = cell.getValue();
+    if (typeof value === "object") {
+        return (jsxRuntime.jsxs(react.Box, { gridColumn, gridRow, children: [jsxRuntime.jsx(react.Box, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
+                        borderWidth: 1,
+                        borderRadius: 4,
+                        borderColor: "gray.400",
+                        paddingX: 4,
+                        paddingY: 2,
+                    }, object: value })] }, cell.id));
     }
+    return (jsxRuntime.jsxs(react.Box, { gridColumn, gridRow, children: [jsxRuntime.jsx(react.Box, { color: 'gray.400', children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(react.Box, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
+};
+const DataDisplay = ({ variant = "" }) => {
+    const { table, translate } = useDataTableContext();
     return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
-            return (jsxRuntime.jsx(react.Card.Root, { children: jsxRuntime.jsx(react.Card.Body, { children: jsxRuntime.jsx(react.DataList.Root, { gap: 4, padding: 4, display: "grid", variant: "subtle", gridTemplateColumns: "repeat(auto-fit, minmax(20rem, 1fr))", children: row.getVisibleCells().map((cell) => {
-                            const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
-                            if (showCustomDataDisplay) {
-                                return (jsxRuntime.jsx(react.Flex, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
-                            }
-                            const value = cell.getValue();
-                            if (typeof value === "object") {
-                                return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
-                                                borderWidth: 1,
-                                                borderRadius: 4,
-                                                borderColor: "gray.400",
-                                                paddingX: 4,
-                                                paddingY: 2,
-                                            }, object: value })] }, cell.id));
-                            }
-                            return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(react.DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
-                        }) }) }) }, `chakra-table-card-${row.id}`));
+            const rowId = row.id;
+            return (jsxRuntime.jsx(react.Card.Root, { children: jsxRuntime.jsx(react.Card.Body, { display: "grid", gap: 4, padding: 4, gridTemplateColumns: "repeat(12, 1fr)", children: table.getAllColumns().map((column) => {
+                        const childCell = row.getAllCells().find((cell) => {
+                            return cell.id === `${rowId}_${column.id}`;
+                        });
+                        if (column.columns.length > 0) {
+                            return (jsxRuntime.jsxs(react.Card.Root, { margin: "1", gridColumn: "span 12", children: [jsxRuntime.jsx(react.Card.Header, { color: "gray.400", children: translate.t(column.id) }), jsxRuntime.jsx(react.Card.Body, { display: "grid", gap: "4", gridTemplateColumns: "repeat(12, 1fr)", children: column.columns.map((column) => {
+                                            if (!column.getIsVisible()) {
+                                                return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+                                            }
+                                            const foundCell = row
+                                                .getVisibleCells()
+                                                .find((cell) => {
+                                                return cell.id === `${rowId}_${column.id}`;
+                                            });
+                                            return jsxRuntime.jsx(CellRenderer, { cell: foundCell });
+                                        }) })] }, `chakra-table-card-${childCell?.id}`));
+                        }
+                        return jsxRuntime.jsx(CellRenderer, { cell: childCell });
+                    }) }) }, `chakra-table-card-${rowId}`));
         }) }));
 };
 
@@ -3494,7 +3483,7 @@ const widthSanityCheck = (widthList, ignoreList, properties) => {
         throw new Error(`The width list is too long given from the number of remaining properties after ignore some.`);
     }
 };
-const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth = 400, translate, }) => {
+const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {}, defaultWidth = 400, translate, }) => {
     const { properties } = schema;
     idListSanityCheck("ignore", ignore, properties);
     widthSanityCheck(width, ignore, properties);
@@ -3506,7 +3495,8 @@ const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth =
         return snakeToLabel(column);
     };
     const keys = Object.keys(properties);
-    const ignored = keys.filter((key) => {
+    const included = include.length > 0 ? include : keys;
+    const ignored = included.filter((key) => {
         return !ignore.some((shouldIgnoreKey) => key === shouldIgnoreKey);
     });
     const columnHelper = reactTable.createColumnHelper();
@@ -3558,239 +3548,14 @@ const SchemaFormContext = React.createContext({
     requestUrl: "",
     order: [],
     ignore: [],
+    include: [],
     onSubmit: async () => { },
     rowNumber: 0,
     requestOptions: {},
 });
 
-const PopoverContent = React__namespace.forwardRef(function PopoverContent(props, ref) {
-    const { portalled = true, portalRef, ...rest } = props;
-    return (jsxRuntime.jsx(react.Portal, { disabled: !portalled, container: portalRef, children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { ref: ref, ...rest }) }) }));
-});
-React__namespace.forwardRef(function PopoverArrow(props, ref) {
-    return (jsxRuntime.jsx(react.Popover.Arrow, { ...props, ref: ref, children: jsxRuntime.jsx(react.Popover.ArrowTip, {}) }));
-});
-React__namespace.forwardRef(function PopoverCloseTrigger(props, ref) {
-    return (jsxRuntime.jsx(react.Popover.CloseTrigger, { position: "absolute", top: "1", insetEnd: "1", ...props, asChild: true, ref: ref, children: jsxRuntime.jsx(CloseButton, { size: "sm" }) }));
-});
-const PopoverTitle = react.Popover.Title;
-react.Popover.Description;
-react.Popover.Footer;
-react.Popover.Header;
-const PopoverRoot = react.Popover.Root;
-const PopoverBody = react.Popover.Body;
-const PopoverTrigger = react.Popover.Trigger;
-
-const Field = React__namespace.forwardRef(function Field(props, ref) {
-    const { label, children, helperText, errorText, optionalText, ...rest } = props;
-    return (jsxRuntime.jsxs(react.Field.Root, { ref: ref, ...rest, children: [label && (jsxRuntime.jsxs(react.Field.Label, { children: [label, jsxRuntime.jsx(react.Field.RequiredIndicator, { fallback: optionalText })] })), children, helperText && (jsxRuntime.jsx(react.Field.HelperText, { children: helperText })), errorText && (jsxRuntime.jsx(react.Field.ErrorText, { children: errorText }))] }));
-});
-
 const useSchemaContext = () => {
-    const { schema, serverUrl, requestUrl, order, ignore, onSubmit, rowNumber, idMap, setIdMap, translate, requestOptions, } = React.useContext(SchemaFormContext);
-    return {
-        schema,
-        serverUrl,
-        requestUrl,
-        order,
-        ignore,
-        onSubmit,
-        rowNumber,
-        idMap,
-        setIdMap,
-        translate,
-        requestOptions,
-    };
-};
-
-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;
-    }
-};
-
-const IdPicker = ({ column, isMultiple = false }) => {
-    const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
-    const { schema, serverUrl, idMap, setIdMap, translate } = useSchemaContext();
-    const { required } = schema;
-    const isRequired = required?.some((columnId) => columnId === column);
-    if (schema.properties == undefined) {
-        throw new Error("schema properties is undefined when using DatePicker");
-    }
-    const { gridColumn, gridRow, renderDisplay, foreign_key } = schema.properties[column];
-    const { table, column: column_ref, display_column, } = foreign_key;
-    const [searchText, setSearchText] = React.useState();
-    const [limit, setLimit] = React.useState(10);
-    const [openSearchResult, setOpenSearchResult] = React.useState();
-    const [page, setPage] = React.useState(0);
-    const ref = React.useRef(null);
-    const selectedIds = watch(column) ?? [];
-    const query = reactQuery.useQuery({
-        queryKey: [`idpicker`, { column, searchText, limit, page }],
-        queryFn: async () => {
-            const data = await getTableData({
-                serverUrl,
-                searching: searchText ?? "",
-                in_table: table,
-                limit: limit,
-                offset: page * 10,
-            });
-            const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
-                return [
-                    item[column_ref],
-                    {
-                        ...item,
-                    },
-                ];
-            }));
-            setIdMap((state) => {
-                return { ...state, ...newMap };
-            });
-            return data;
-        },
-        enabled: (searchText ?? "")?.length > 0,
-        staleTime: 300000,
-    });
-    const { isLoading, isFetching, data, isPending, isError } = query;
-    const dataList = data?.data ?? [];
-    const count = data?.count ?? 0;
-    const isDirty = (searchText?.length ?? 0) > 0;
-    const onSearchChange = async (event) => {
-        setSearchText(event.target.value);
-        setPage(0);
-        setLimit(10);
-    };
-    const watchId = watch(column);
-    const watchIds = (watch(column) ?? []);
-    const getPickedValue = () => {
-        if (Object.keys(idMap).length <= 0) {
-            return "";
-        }
-        const record = idMap[watchId];
-        if (record === undefined) {
-            return "";
-        }
-        return record[display_column];
-    };
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${column}.fieldLabel`)}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: "wrap", gap: 1, children: [selectedIds.map((id) => {
-                        const item = idMap[id];
-                        if (item === undefined) {
-                            return jsxRuntime.jsx(react.Text, { children: "undefined" }, id);
-                        }
-                        return (jsxRuntime.jsx(Tag, { closable: true, onClick: () => {
-                                setValue(column, watchIds.filter((id) => id != item[column_ref]));
-                            }, children: !!renderDisplay === true
-                                ? renderDisplay(item)
-                                : item[display_column] }, id));
-                    }), jsxRuntime.jsx(Tag, { cursor: "pointer", onClick: () => {
-                            setOpenSearchResult(true);
-                        }, children: "Add" })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
-                    setOpenSearchResult(true);
-                }, children: getPickedValue() })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(`${column}.typeToSearch`), onChange: (event) => {
-                                        onSearchChange(event);
-                                        setOpenSearchResult(true);
-                                    }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), (searchText?.length ?? 0) > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { 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" }), jsxRuntime.jsx(react.Text, { justifySelf: "center", children: `${translate.t(`${column}.total`)} ${count}, ${translate.t(`${column}.showing`)} ${limit}` }), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: 
-                                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                                    dataList.map((item) => {
-                                                        const selected = isMultiple
-                                                            ? watchIds.some((id) => item[column_ref] === id)
-                                                            : watchId === item[column_ref];
-                                                        return (jsxRuntime.jsx(react.Box, { cursor: "pointer", onClick: () => {
-                                                                if (!isMultiple) {
-                                                                    setOpenSearchResult(false);
-                                                                    setValue(column, item[column_ref]);
-                                                                    return;
-                                                                }
-                                                                const newSet = new Set([
-                                                                    ...(watchIds ?? []),
-                                                                    item[column_ref],
-                                                                ]);
-                                                                setValue(column, [...newSet]);
-                                                            }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
-                                                                ? renderDisplay(item)
-                                                                : item[display_column] }, item[column_ref]));
-                                                    }) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(react.Text, { children: translate.t(`${column}.emptySearchResult`) })) }))] }), jsxRuntime.jsx(PaginationRoot, { justifySelf: "center", count: query?.data?.count ?? 0, pageSize: 10, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxRuntime.jsxs(react.HStack, { gap: "4", children: [jsxRuntime.jsx(PaginationPrevTrigger, {}), jsxRuntime.jsx(PaginationPageText, {}), jsxRuntime.jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.fieldRequired`) }))] }));
-};
-
-const HoverCardContent = React__namespace.forwardRef(function HoverCardContent(props, ref) {
-    const { portalled = true, portalRef, ...rest } = props;
-    return (jsxRuntime.jsx(react.Portal, { disabled: !portalled, container: portalRef, children: jsxRuntime.jsx(react.HoverCard.Positioner, { children: jsxRuntime.jsx(react.HoverCard.Content, { ref: ref, ...rest }) }) }));
-});
-const HoverCardArrow = React__namespace.forwardRef(function HoverCardArrow(props, ref) {
-    return (jsxRuntime.jsx(react.HoverCard.Arrow, { ref: ref, ...props, children: jsxRuntime.jsx(react.HoverCard.ArrowTip, {}) }));
-});
-const HoverCardRoot = react.HoverCard.Root;
-const HoverCardTrigger = react.HoverCard.Trigger;
-
-const IdViewer = ({ value, column }) => {
-    const { schema, idMap, translate } = useSchemaContext();
-    if (schema.properties == undefined) {
-        throw new Error("schema properties when using DatePicker");
-    }
-    const { foreign_key } = schema.properties[column];
-    if (foreign_key === undefined) {
-        throw new Error("foreign_key when variant is id-picker");
-    }
-    const { display_column } = foreign_key;
-    if (value === undefined) {
-        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", children: [jsxRuntime.jsx(react.Text, { children: translate.t(`${column}.fieldLabel`) }), jsxRuntime.jsx(react.Text, { children: translate.t(`empty`) })] }));
-    }
-    return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", children: [jsxRuntime.jsx(react.Text, { children: translate.t(`${column}.fieldLabel`) }), jsxRuntime.jsxs(HoverCardRoot, { children: [jsxRuntime.jsx(HoverCardTrigger, { asChild: true, children: jsxRuntime.jsx(react.Text, { cursor: 'pointer', children: idMap[value][display_column] }) }), jsxRuntime.jsxs(HoverCardContent, { children: [jsxRuntime.jsx(HoverCardArrow, {}), jsxRuntime.jsx(RecordDisplay, { object: idMap[value] })] })] })] }));
-};
-
-const NumberInputRoot = React__namespace.forwardRef(function NumberInput(props, ref) {
-    const { children, ...rest } = props;
-    return (jsxRuntime.jsxs(react.NumberInput.Root, { ref: ref, variant: "outline", ...rest, children: [children, jsxRuntime.jsxs(react.NumberInput.Control, { children: [jsxRuntime.jsx(react.NumberInput.IncrementTrigger, {}), jsxRuntime.jsx(react.NumberInput.DecrementTrigger, {})] })] }));
-});
-const NumberInputField$1 = react.NumberInput.Input;
-react.NumberInput.Scrubber;
-react.NumberInput.Label;
-
-const NumberInputField = ({ column }) => {
-    const { register, formState: { errors }, } = reactHookForm.useFormContext();
-    const { schema, translate } = useSchemaContext();
-    const { required } = schema;
-    const isRequired = required?.some((columnId) => columnId === column);
-    if (schema.properties == undefined) {
-        throw new Error("schema properties when using String Input Field");
-    }
-    const { gridColumn, gridRow } = schema.properties[column];
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${column}.fieldLabel`)}`, required: isRequired, gridColumn, gridRow, children: [jsxRuntime.jsx(NumberInputRoot, { children: jsxRuntime.jsx(NumberInputField$1, { ...register(column, { required: isRequired }) }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.fieldRequired`) }))] }));
-};
-
-const StringInputField = ({ column }) => {
-    const { register, formState: { errors }, } = reactHookForm.useFormContext();
-    const { schema, translate } = useSchemaContext();
-    const { required } = schema;
-    const isRequired = required?.some((columnId) => columnId === column);
-    if (schema.properties == undefined) {
-        throw new Error("schema properties when using String Input Field");
-    }
-    const { gridColumn, gridRow } = schema.properties[column];
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(`${column}.fieldLabel`)}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsxRuntime.jsx(react.Input, { ...register(column, { required: isRequired }), autoComplete: "off" }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.fieldRequired`) }))] }) }));
+    return React.useContext(SchemaFormContext);
 };
 
 const clearEmptyString = (object) => {
@@ -3807,35 +3572,58 @@ const AccordionItemContent = React__namespace.forwardRef(function AccordionItemC
 const AccordionRoot = react.Accordion.Root;
 const AccordionItem = react.Accordion.Item;
 
-const ToggleTip = React__namespace.forwardRef(function ToggleTip(props, ref) {
-    const { showArrow, children, portalled = true, content, portalRef, ...rest } = props;
-    return (jsxRuntime.jsxs(react.Popover.Root, { ...rest, positioning: { ...rest.positioning, gutter: 4 }, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: children }), jsxRuntime.jsx(react.Portal, { disabled: !portalled, container: portalRef, children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsxs(react.Popover.Content, { width: "auto", px: "2", py: "1", textStyle: "xs", rounded: "sm", ref: ref, children: [showArrow && (jsxRuntime.jsx(react.Popover.Arrow, { children: jsxRuntime.jsx(react.Popover.ArrowTip, {}) })), content] }) }) })] }));
-});
-const InfoTip = React__namespace.forwardRef(function InfoTip(props, ref) {
-    const { children, ...rest } = props;
-    return (jsxRuntime.jsx(ToggleTip, { content: children, ...rest, ref: ref, children: jsxRuntime.jsx(react.IconButton, { variant: "ghost", "aria-label": "info", size: "2xs", colorPalette: "gray", children: jsxRuntime.jsx(hi.HiOutlineInformationCircle, {}) }) }));
-});
+function removeIndex(str) {
+    return str.replace(/\.\d+\./g, '.');
+}
+
+const ArrayRenderer = ({ schema, column, prefix, }) => {
+    const { gridRow, gridColumn = "1/span 12", required, items } = schema;
+    // @ts-expect-error TODO: find suitable types
+    const { type } = items;
+    const { translate } = useSchemaContext();
+    const colLabel = `${prefix}${column}`;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const { formState: { errors }, setValue, watch, } = reactHookForm.useFormContext();
+    const fields = (watch(colLabel) ?? []);
+    return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), fields.map((field, index) => (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", children: [jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: jsxRuntime.jsx(SchemaRenderer, { column: `${index}`,
+                            prefix: `${colLabel}.`,
+                            schema: items }) }), jsxRuntime.jsx(react.Flex, { justifyContent: "end", children: jsxRuntime.jsx(react.Button, { variant: "ghost", onClick: () => {
+                                setValue(colLabel, fields.filter((_, curIndex) => {
+                                    return curIndex === index;
+                                }));
+                            }, children: translate.t(removeIndex(`${colLabel}.remove`)) }) })] }, `${colLabel}.${index}`))), jsxRuntime.jsx(react.Flex, { children: jsxRuntime.jsx(react.Button, { onClick: () => {
+                        if (type === "number") {
+                            setValue(colLabel, [...fields, 0]);
+                            return;
+                        }
+                        if (type === "string") {
+                            setValue(colLabel, [...fields, ""]);
+                            return;
+                        }
+                        if (type === "boolean") {
+                            setValue(colLabel, [...fields, false]);
+                            return;
+                        }
+                        setValue(colLabel, [...fields, {}]);
+                    }, children: translate.t(removeIndex(`${colLabel}.add`)) }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+};
 
-const DataListRoot = react.DataList.Root;
-const DataListItem = React__namespace.forwardRef(function DataListItem(props, ref) {
-    const { label, info, value, children, grow, ...rest } = props;
-    return (jsxRuntime.jsxs(react.DataList.Item, { ref: ref, ...rest, children: [jsxRuntime.jsxs(react.DataList.ItemLabel, { flex: grow ? "1" : undefined, children: [label, info && jsxRuntime.jsx(InfoTip, { children: info })] }), jsxRuntime.jsx(react.DataList.ItemValue, { flex: grow ? "1" : undefined, children: value }), children] }));
+const Field = React__namespace.forwardRef(function Field(props, ref) {
+    const { label, children, helperText, errorText, optionalText, ...rest } = props;
+    return (jsxRuntime.jsxs(react.Field.Root, { ref: ref, ...rest, children: [label && (jsxRuntime.jsxs(react.Field.Label, { children: [label, jsxRuntime.jsx(react.Field.RequiredIndicator, { fallback: optionalText })] })), children, helperText && (jsxRuntime.jsx(react.Field.HelperText, { children: helperText })), errorText && (jsxRuntime.jsx(react.Field.ErrorText, { children: errorText }))] }));
 });
 
-const BooleanPicker = ({ column }) => {
+const BooleanPicker = ({ schema, column, prefix }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
-    const { schema, translate } = useSchemaContext();
-    const { required } = schema;
+    const { translate } = useSchemaContext();
+    const { required, gridColumn, gridRow } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    const value = watch(column);
-    if (schema.properties == undefined) {
-        throw new Error("schema properties when using BooleanPicker");
-    }
-    const { gridColumn, gridRow } = schema.properties[column];
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${column}.fieldLabel`)}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [jsxRuntime.jsx(CheckboxCard, { checked: value, variant: "surface", onSelect: () => {
-                    setValue(column, !value);
-                } }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.fieldRequired`) }))] }));
+    const colLabel = `${prefix}${column}`;
+    const value = watch(colLabel);
+    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, required: isRequired, alignItems: "stretch", gridColumn,
+        gridRow, children: [jsxRuntime.jsx(CheckboxCard, { checked: value, variant: "surface", onChange: () => {
+                    setValue(colLabel, !value);
+                } }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
 };
 
 const monthNamesShort = [
@@ -3907,18 +3695,33 @@ let DatePicker$1 = class DatePicker extends React.Component {
     }
 };
 
-const DatePicker = ({ column }) => {
+const PopoverContent = React__namespace.forwardRef(function PopoverContent(props, ref) {
+    const { portalled = true, portalRef, ...rest } = props;
+    return (jsxRuntime.jsx(react.Portal, { disabled: !portalled, container: portalRef, children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { ref: ref, ...rest }) }) }));
+});
+React__namespace.forwardRef(function PopoverArrow(props, ref) {
+    return (jsxRuntime.jsx(react.Popover.Arrow, { ...props, ref: ref, children: jsxRuntime.jsx(react.Popover.ArrowTip, {}) }));
+});
+React__namespace.forwardRef(function PopoverCloseTrigger(props, ref) {
+    return (jsxRuntime.jsx(react.Popover.CloseTrigger, { position: "absolute", top: "1", insetEnd: "1", ...props, asChild: true, ref: ref, children: jsxRuntime.jsx(CloseButton, { size: "sm" }) }));
+});
+const PopoverTitle = react.Popover.Title;
+react.Popover.Description;
+react.Popover.Footer;
+react.Popover.Header;
+const PopoverRoot = react.Popover.Root;
+const PopoverBody = react.Popover.Body;
+const PopoverTrigger = react.Popover.Trigger;
+
+const DatePicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
-    const { schema, translate } = useSchemaContext();
-    const { required } = schema;
+    const { translate } = useSchemaContext();
+    const { required, gridColumn, gridRow } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
+    const colLabel = `${prefix}${column}`;
     const [open, setOpen] = React.useState(false);
-    const selectedDate = watch(column);
-    if (schema.properties == undefined) {
-        throw new Error("schema properties when using DatePicker");
-    }
-    const { gridColumn, gridRow } = schema.properties[column];
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${column}.fieldLabel`)}`, required: isRequired, alignItems: "stretch", gridColumn,
+    const selectedDate = watch(colLabel);
+    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, required: isRequired, alignItems: "stretch", gridColumn,
         gridRow, children: [jsxRuntime.jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsx(Button, { size: "sm", variant: "outline", onClick: () => {
                                 setOpen(true);
                             }, children: selectedDate !== undefined ? selectedDate : "" }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(DatePicker$1
@@ -3927,10 +3730,10 @@ const DatePicker = ({ column }) => {
                                     // @ts-expect-error TODO: find appropriate types
                                     selected: new Date(selectedDate), 
                                     // @ts-expect-error TODO: find appropriate types
-                                    onDateSelected: ({ selected, selectable, date }) => {
-                                        setValue(column, dayjs(date).format("YYYY-MM-DD"));
+                                    onDateSelected: ({ date }) => {
+                                        setValue(colLabel, dayjs(date).format("YYYY-MM-DD"));
                                         setOpen(false);
-                                    } })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.fieldRequired`) }))] }));
+                                    } })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
 };
 
 function filterArray(array, searchTerm) {
@@ -3943,30 +3746,27 @@ function filterArray(array, searchTerm) {
     });
 }
 
-const EnumPicker = ({ column, isMultiple = false }) => {
+const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
-    const { schema, translate } = useSchemaContext();
+    const { translate } = useSchemaContext();
     const { required } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    if (schema.properties == undefined) {
-        throw new Error("schema properties when using DatePicker");
-    }
-    const { gridColumn, gridRow, renderDisplay } = schema.properties[column];
+    const { gridColumn, gridRow, renderDisplay } = schema;
     const [searchText, setSearchText] = React.useState();
     const [limit, setLimit] = React.useState(10);
     const [openSearchResult, setOpenSearchResult] = React.useState();
     const ref = React.useRef(null);
-    const watchEnum = watch(column);
-    const watchEnums = (watch(column) ?? []);
-    const properties = (schema.properties[column] ?? {});
-    const dataList = properties.enum ?? [];
-    const count = properties.enum?.length ?? 0;
+    const colLabel = `${prefix}${column}`;
+    const watchEnum = watch(colLabel);
+    const watchEnums = (watch(colLabel) ?? []);
+    const dataList = schema.enum ?? [];
+    const count = schema.enum?.length ?? 0;
     const isDirty = (searchText?.length ?? 0) > 0;
     const onSearchChange = async (event) => {
         setSearchText(event.target.value);
         setLimit(10);
     };
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${column}.fieldLabel`)}`, required: isRequired, alignItems: "stretch", gridColumn,
+    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.fieldLabel`))}`, required: isRequired, alignItems: "stretch", gridColumn,
         gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: "wrap", gap: 1, children: [watchEnums.map((enumValue) => {
                         const item = enumValue;
                         if (item === undefined) {
@@ -3975,12 +3775,16 @@ const EnumPicker = ({ column, isMultiple = false }) => {
                         return (jsxRuntime.jsx(Tag, { closable: true, onClick: () => {
                                 // setSelectedEnums((state) => state.filter((id) => id != item));
                                 setValue(column, watchEnums.filter((id) => id != item));
-                            }, children: !!renderDisplay === true ? renderDisplay(item) : item }));
+                            }, children: !!renderDisplay === true
+                                ? renderDisplay(item)
+                                : translate.t(removeIndex(`${colLabel}.${item}`)) }));
                     }), jsxRuntime.jsx(Tag, { cursor: "pointer", onClick: () => {
                             setOpenSearchResult(true);
-                        }, children: "Add" })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
+                        }, children: translate.t(removeIndex(`${colLabel}.addMore`)) })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
                     setOpenSearchResult(true);
-                }, children: watchEnum })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(`${column}.typeToSearch`), onChange: (event) => {
+                }, children: watchEnum === undefined
+                    ? ""
+                    : translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(`${column}.typeToSearch`), onChange: (event) => {
                                         onSearchChange(event);
                                         setOpenSearchResult(true);
                                     }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(react.Text, { children: `${translate.t(`${column}.total`)}: ${count}, ${translate.t(`${column}.showing`)} ${limit}` }), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: filterArray(dataList, searchText ?? "").map((item) => {
@@ -3990,13 +3794,15 @@ const EnumPicker = ({ column, isMultiple = false }) => {
                                                 return (jsxRuntime.jsx(react.Box, { cursor: "pointer", onClick: () => {
                                                         if (!isMultiple) {
                                                             setOpenSearchResult(false);
-                                                            setValue(column, item);
+                                                            setValue(colLabel, item);
                                                             return;
                                                         }
                                                         const newSet = new Set([...(watchEnums ?? []), item]);
-                                                        setValue(column, [...newSet]);
-                                                    }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true ? renderDisplay(item) : item }, `${column}-${item}`));
-                                            }) }), isDirty && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [dataList.length <= 0 && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Empty Search Result" }), " "] }))] })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.fieldRequired`) }))] }));
+                                                        setValue(colLabel, [...newSet]);
+                                                    }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
+                                                        ? renderDisplay(item)
+                                                        : translate.t(removeIndex(`${colLabel}.${item}`)) }, `${colLabel}-${item}`));
+                                            }) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: translate.t(removeIndex(`${colLabel}.emptySearchResult`)) })) }))] })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
 };
 
 function isEnteringWindow(_ref) {
@@ -4351,41 +4157,222 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
     return (jsxRuntime.jsxs(react.Grid, { ...getColor(isDraggedOver), ref: ref, cursor: "pointer", onClick: handleClick, borderStyle: "dashed", borderColor: "gray.400", alignContent: "center", justifyContent: "center", borderWidth: 1, borderRadius: 4, ...gridProps, children: [children, !!children === false && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Flex, { children: placeholder }), jsxRuntime.jsx(react.Input, { type: "file", multiple: true, style: { display: "none" }, ref: fileInput, onChange: handleChange })] }))] }));
 };
 
-const FilePicker = ({ column }) => {
+const FilePicker = ({ column, schema, prefix }) => {
     const { setValue, formState: { errors }, watch, } = reactHookForm.useFormContext();
-    const { schema, translate } = useSchemaContext();
-    const { required } = schema;
+    const { translate } = useSchemaContext();
+    const { required, gridColumn, gridRow } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    if (schema.properties == undefined) {
-        throw new Error("schema properties when using String Input Field");
-    }
-    const { gridColumn, gridRow } = schema.properties[column];
     const currentFiles = (watch(column) ?? []);
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${column}.fieldLabel`)}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", display: "grid", gridTemplateRows: "auto 1fr auto", alignItems: "stretch", children: [jsxRuntime.jsx(FileDropzone, { onDrop: ({ files }) => {
+    const colLabel = `${prefix}${column}`;
+    return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${colLabel}.fieldLabel`)}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", display: "grid", gridTemplateRows: "auto 1fr auto", alignItems: "stretch", children: [jsxRuntime.jsx(FileDropzone, { onDrop: ({ files }) => {
                     const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
-                    setValue(column, [...currentFiles, ...newFiles]);
-                }, placeholder: translate.t(`${column}.fileDropzone`) }), jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: 1, children: currentFiles.map((file) => {
+                    setValue(colLabel, [...currentFiles, ...newFiles]);
+                }, placeholder: translate.t(removeIndex(`${colLabel}.fileDropzone`)) }), jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: 1, children: currentFiles.map((file) => {
                     return (jsxRuntime.jsx(react.Card.Root, { variant: "subtle", children: jsxRuntime.jsxs(react.Card.Body, { gap: "2", cursor: "pointer", onClick: () => {
                                 setValue(column, currentFiles.filter(({ name }) => {
                                     return name !== file.name;
                                 }));
-                            }, display: "flex", flexFlow: 'row', alignItems: 'center', padding: '2', children: [jsxRuntime.jsx(react.Box, { children: file.name }), jsxRuntime.jsx(ti.TiDeleteOutline, {})] }) }, file.name));
-                }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.fieldRequired`) }))] }));
+                            }, display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [jsxRuntime.jsx(react.Box, { children: file.name }), jsxRuntime.jsx(ti.TiDeleteOutline, {})] }) }, file.name));
+                }) }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
 };
 
-const ObjectInput = ({ column }) => {
-    const { formState: { errors }, setValue, getValues, } = reactHookForm.useFormContext();
-    const { schema, translate } = useSchemaContext();
-    const { required } = schema;
-    const isRequired = required?.some((columnId) => columnId === column);
-    const entries = Object.entries(getValues(column) ?? {});
+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;
+    }
+};
+
+const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
+    const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
+    const { serverUrl, idMap, setIdMap, translate } = useSchemaContext();
+    const { required, gridColumn, gridRow, renderDisplay, foreign_key } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const { table, column: column_ref, display_column, } = foreign_key;
+    const [searchText, setSearchText] = React.useState();
+    const [limit, setLimit] = React.useState(10);
+    const [openSearchResult, setOpenSearchResult] = React.useState();
+    const [page, setPage] = React.useState(0);
+    const ref = React.useRef(null);
+    const colLabel = `${prefix}${column}`;
+    const query = reactQuery.useQuery({
+        queryKey: [`idpicker`, { column, searchText, limit, page }],
+        queryFn: async () => {
+            const data = await getTableData({
+                serverUrl,
+                searching: searchText ?? "",
+                in_table: table,
+                limit: limit,
+                offset: page * 10,
+            });
+            const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
+                return [
+                    item[column_ref],
+                    {
+                        ...item,
+                    },
+                ];
+            }));
+            setIdMap((state) => {
+                return { ...state, ...newMap };
+            });
+            return data;
+        },
+        enabled: (searchText ?? "")?.length > 0,
+        staleTime: 300000,
+    });
+    const { isLoading, isFetching, data, isPending, isError } = query;
+    const dataList = data?.data ?? [];
+    const count = data?.count ?? 0;
+    const isDirty = (searchText?.length ?? 0) > 0;
+    const watchId = watch(colLabel);
+    const watchIds = (watch(colLabel) ?? []);
+    reactQuery.useQuery({
+        queryKey: [`idpicker`, { column, searchText, limit, page }],
+        queryFn: async () => {
+            const data = await getTableData({
+                serverUrl,
+                searching: watchId,
+                in_table: table,
+                limit: limit,
+                offset: page * 10,
+            });
+            const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
+                return [
+                    item[column_ref],
+                    {
+                        ...item,
+                    },
+                ];
+            }));
+            setIdMap((state) => {
+                return { ...state, ...newMap };
+            });
+            return data;
+        },
+        staleTime: 300000,
+    });
+    const onSearchChange = async (event) => {
+        setSearchText(event.target.value);
+        setPage(0);
+        setLimit(10);
+    };
+    const getPickedValue = () => {
+        if (Object.keys(idMap).length <= 0) {
+            return "";
+        }
+        const record = idMap[watchId];
+        if (record === undefined) {
+            return "";
+        }
+        return record[display_column];
+    };
+    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(removeIndex(`${column}.fieldLabel`)))}`, required: isRequired, alignItems: "stretch", gridColumn,
+        gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: "wrap", gap: 1, children: [watchIds.map((id) => {
+                        const item = idMap[id];
+                        if (item === undefined) {
+                            return (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.undefined`)) }, id));
+                        }
+                        return (jsxRuntime.jsx(Tag, { closable: true, onClick: () => {
+                                setValue(column, watchIds.filter((id) => id != item[column_ref]));
+                            }, children: !!renderDisplay === true
+                                ? renderDisplay(item)
+                                : item[display_column] }, id));
+                    }), jsxRuntime.jsx(Tag, { cursor: "pointer", onClick: () => {
+                            setOpenSearchResult(true);
+                        }, children: translate.t(removeIndex(`${colLabel}.addMore`)) })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
+                    setOpenSearchResult(true);
+                }, children: getPickedValue() })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(removeIndex(`${colLabel}.typeToSearch`)), onChange: (event) => {
+                                        onSearchChange(event);
+                                        setOpenSearchResult(true);
+                                    }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), (searchText?.length ?? 0) > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isFetching && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isFetching" }), isLoading && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isLoading" }), isPending && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isPending" }), (isFetching || isLoading || isPending) && jsxRuntime.jsx(react.Spinner, {}), isError && (jsxRuntime.jsx(react.Icon, { color: "red.400", children: jsxRuntime.jsx(bi.BiError, {}) })), jsxRuntime.jsx(react.Text, { justifySelf: "center", children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit}` }), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: 
+                                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                                    dataList.map((item) => {
+                                                        const selected = isMultiple
+                                                            ? watchIds.some((id) => item[column_ref] === id)
+                                                            : watchId === item[column_ref];
+                                                        return (jsxRuntime.jsx(react.Box, { cursor: "pointer", onClick: () => {
+                                                                if (!isMultiple) {
+                                                                    setOpenSearchResult(false);
+                                                                    setValue(colLabel, item[column_ref]);
+                                                                    return;
+                                                                }
+                                                                const newSet = new Set([
+                                                                    ...(watchIds ?? []),
+                                                                    item[column_ref],
+                                                                ]);
+                                                                setValue(colLabel, [...newSet]);
+                                                            }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
+                                                                ? renderDisplay(item)
+                                                                : item[display_column] }, item[column_ref]));
+                                                    }) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.emptySearchResult`)) })) }))] }), jsxRuntime.jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize: 10, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxRuntime.jsxs(react.HStack, { gap: "4", children: [jsxRuntime.jsx(PaginationPrevTrigger, {}), count > 0 && jsxRuntime.jsx(PaginationPageText, {}), jsxRuntime.jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+};
+
+const NumberInputRoot = React__namespace.forwardRef(function NumberInput(props, ref) {
+    const { children, ...rest } = props;
+    return (jsxRuntime.jsxs(react.NumberInput.Root, { ref: ref, variant: "outline", ...rest, children: [children, jsxRuntime.jsxs(react.NumberInput.Control, { children: [jsxRuntime.jsx(react.NumberInput.IncrementTrigger, {}), jsxRuntime.jsx(react.NumberInput.DecrementTrigger, {})] })] }));
+});
+const NumberInputField$1 = react.NumberInput.Input;
+react.NumberInput.Scrubber;
+react.NumberInput.Label;
+
+const NumberInputField = ({ schema, column, prefix, }) => {
+    const { register, formState: { errors }, watch } = reactHookForm.useFormContext();
+    const { translate } = useSchemaContext();
+    const { required, gridColumn, gridRow } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const colLabel = `${prefix}${column}`;
+    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, required: isRequired, gridColumn, gridRow, children: [jsxRuntime.jsx(NumberInputRoot, { children: jsxRuntime.jsx(NumberInputField$1, { ...register(`${colLabel}`, { required: isRequired }) }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+};
+
+const ObjectInput = ({ schema, column, prefix }) => {
+    const { properties, gridRow, gridColumn = "1/span 12", required } = schema;
+    const { translate } = useSchemaContext();
+    const colLabel = `${prefix}${column}`;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const { formState: { errors }, } = reactHookForm.useFormContext();
+    if (properties === undefined) {
+        throw new Error(`properties is undefined when using ObjectInput`);
+    }
+    return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: Object.keys(properties ?? {}).map((key) => {
+                    return (
+                    // @ts-expect-error find suitable types
+                    jsxRuntime.jsx(ColumnRenderer, { column: `${key}`,
+                        prefix: `${prefix}${column}.`,
+                        properties }, `form-${colLabel}-${key}`));
+                }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+};
+
+const RecordInput$1 = ({ column, schema, prefix }) => {
+    const { formState: { errors }, setValue, getValues, } = reactHookForm.useFormContext();
+    const { translate } = useSchemaContext();
+    const { required, gridColumn, gridRow } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const entries = Object.entries(getValues(column) ?? {});
     const [showNewEntries, setShowNewEntries] = React.useState(false);
     const [newKey, setNewKey] = React.useState();
     const [newValue, setNewValue] = React.useState();
-    if (schema.properties == undefined) {
-        throw new Error("schema properties when using DatePicker");
-    }
-    const { gridColumn, gridRow } = schema.properties[column];
     return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${column}.fieldLabel`)}`, required: isRequired, alignItems: "stretch", gridColumn, gridRow, children: [entries.map(([key, value]) => {
                 return (jsxRuntime.jsxs(react.Grid, { templateColumns: "1fr 1fr auto", gap: 1, children: [jsxRuntime.jsx(react.Input, { value: key, onChange: (e) => {
                                 const filtered = entries.filter(([target]) => {
@@ -4429,6 +4416,15 @@ const ObjectInput = ({ column }) => {
                 }, children: translate.t(`${column}.addNew`) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.fieldRequired`) }))] }));
 };
 
+const StringInputField = ({ column, schema, prefix, }) => {
+    const { register, formState: { errors }, } = reactHookForm.useFormContext();
+    const { translate } = useSchemaContext();
+    const { required, gridColumn, gridRow } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const colLabel = `${prefix}${column}`;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsxRuntime.jsx(react.Input, { ...register(`${colLabel}`, { required: isRequired }), autoComplete: "off" }), errors[colLabel] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }) }));
+};
+
 const RadioCardItem = React__namespace.forwardRef(function RadioCardItem(props, ref) {
     const { inputProps, label, description, addon, icon, indicator = jsxRuntime.jsx(react.RadioCard.ItemIndicator, {}), indicatorPlacement = "end", ...rest } = props;
     const hasContent = label || description || icon;
@@ -4439,13 +4435,344 @@ const RadioCardRoot = react.RadioCard.Root;
 react.RadioCard.Label;
 react.RadioCard.ItemIndicator;
 
-const TagPicker = ({ column }) => {
+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");
+    }
+    const { gridColumn, gridRow, in_table, object_id_column } = schema;
+    if (in_table === undefined) {
+        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");
+    }
+    const query = reactQuery.useQuery({
+        queryKey: [`tagpicker`, in_table],
+        queryFn: async () => {
+            return await getTableData({
+                serverUrl,
+                in_table: "tables_tags_view",
+                where: [
+                    {
+                        id: "table_name",
+                        value: [in_table],
+                    },
+                ],
+                limit: 100,
+            });
+        },
+        staleTime: 10000,
+    });
+    const object_id = watch(object_id_column);
+    const existingTagsQuery = reactQuery.useQuery({
+        queryKey: [`existing`, { in_table, object_id_column }, object_id],
+        queryFn: async () => {
+            return await getTableData({
+                serverUrl,
+                in_table: in_table,
+                where: [
+                    {
+                        id: object_id_column,
+                        value: object_id[0],
+                    },
+                ],
+                limit: 100,
+            });
+        },
+        enabled: object_id != undefined,
+        staleTime: 10000,
+    });
+    const { isLoading, isFetching, data, isPending, isError } = query;
+    const dataList = data?.data ?? [];
+    const existingTagList = existingTagsQuery.data?.data ?? [];
+    if (!!object_id === false) {
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    }
+    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) => {
+                                const existedTags = Object.values(all_tags)
+                                    .filter(({ id }) => {
+                                    return existingTagList.some(({ tag_id }) => tag_id === id);
+                                })
+                                    .map(({ id }) => {
+                                    return id;
+                                });
+                                setValue(`${column}.${parent_tag_name}.current`, [
+                                    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 }]) => {
+                                    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%", 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 }]) => {
+                                    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%" }, `${tagName}-${id}`));
+                                }) }) }))] }, `tag-${parent_tag_name}`));
+            }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
+};
+
+const SchemaRenderer = ({ schema, prefix, column, }) => {
+    const colSchema = schema;
+    const { type, variant, properties: innerProperties, foreign_key, items, } = schema;
+    if (type === "string") {
+        if ((schema.enum ?? []).length > 0) {
+            return jsxRuntime.jsx(EnumPicker, { schema: colSchema, prefix, column });
+        }
+        if (variant === "id-picker") {
+            idPickerSanityCheck(column, foreign_key);
+            return jsxRuntime.jsx(IdPicker, { schema: colSchema, prefix, column });
+        }
+        if (variant === "date-picker") {
+            return jsxRuntime.jsx(DatePicker, { schema: colSchema, prefix, column });
+        }
+        return jsxRuntime.jsx(StringInputField, { schema: colSchema, prefix, column });
+    }
+    if (type === "number" || type === "integer") {
+        return jsxRuntime.jsx(NumberInputField, { schema: colSchema, prefix, column });
+    }
+    if (type === "boolean") {
+        return jsxRuntime.jsx(BooleanPicker, { schema: colSchema, prefix, column });
+    }
+    if (type === "object") {
+        if (innerProperties) {
+            return jsxRuntime.jsx(ObjectInput, { schema: colSchema, prefix, column });
+        }
+        return jsxRuntime.jsx(RecordInput$1, { schema: colSchema, prefix, column });
+    }
+    if (type === "array") {
+        if (variant === "id-picker") {
+            idPickerSanityCheck(column, foreign_key);
+            return (jsxRuntime.jsx(IdPicker, { schema: colSchema, prefix, column, isMultiple: true }));
+        }
+        if (variant === "tag-picker") {
+            return jsxRuntime.jsx(TagPicker, { schema: colSchema, prefix, column });
+        }
+        if (variant === "file-picker") {
+            return jsxRuntime.jsx(FilePicker, { schema: colSchema, prefix, column });
+        }
+        if (items) {
+            return jsxRuntime.jsx(ArrayRenderer, { schema: colSchema, prefix, column });
+        }
+        return jsxRuntime.jsx(react.Text, { children: `array ${column}` });
+    }
+    if (type === "null") {
+        return jsxRuntime.jsx(react.Text, { children: `null ${column}` });
+    }
+    return jsxRuntime.jsx(react.Text, { children: "missing type" });
+};
+
+const ColumnRenderer = ({ column, properties, prefix, }) => {
+    const colSchema = properties[column];
+    const colLabel = `${prefix}${column}`;
+    if (colSchema === undefined) {
+        throw new Error(`${colLabel} does not exist when using ColumnRenderer`);
+    }
+    return jsxRuntime.jsx(SchemaRenderer, { schema: colSchema, prefix, column });
+};
+
+const ArrayViewer = ({ schema, column, prefix }) => {
+    const { gridRow, gridColumn = "1/span 12", required, items } = schema;
+    const { translate } = useSchemaContext();
+    const colLabel = `${prefix}${column}`;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const { watch, formState: { errors }, } = reactHookForm.useFormContext();
+    const values = watch(colLabel) ?? [];
+    return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), values.map((field, index) => (jsxRuntime.jsx(react.Flex, { flexFlow: "column", children: jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: jsxRuntime.jsx(SchemaViewer, { column: `${index}`,
+                        prefix: `${colLabel}.`,
+                        schema: items }) }) }, `form-${prefix}${column}.${index}`))), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+};
+
+const BooleanViewer = ({ schema, column, prefix, }) => {
+    const { watch, formState: { errors }, } = reactHookForm.useFormContext();
+    const { translate } = useSchemaContext();
+    const { required, gridColumn, gridRow } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const colLabel = `${prefix}${column}`;
+    const value = watch(colLabel);
+    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, required: isRequired, alignItems: "stretch", gridColumn,
+        gridRow, children: [jsxRuntime.jsx(react.Text, { children: value
+                    ? translate.t(removeIndex(`${colLabel}.true`))
+                    : translate.t(removeIndex(`${colLabel}.false`)) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+};
+
+const DateViewer = ({ column, schema, prefix }) => {
+    const { watch, formState: { errors }, } = reactHookForm.useFormContext();
+    const { translate } = useSchemaContext();
+    const { required, gridColumn, gridRow } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const colLabel = `${prefix}${column}`;
+    const selectedDate = watch(colLabel);
+    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.fieldLabel`))}`, required: isRequired, alignItems: "stretch", gridColumn,
+        gridRow, children: [jsxRuntime.jsxs(react.Text, { children: [" ", selectedDate !== undefined ? selectedDate : ""] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.fieldRequired`) }))] }));
+};
+
+const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
+    const { watch, formState: { errors }, } = reactHookForm.useFormContext();
+    const { translate } = useSchemaContext();
+    const { required } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const { gridColumn, gridRow, renderDisplay } = schema;
+    const colLabel = `${prefix}${column}`;
+    const watchEnum = watch(colLabel);
+    const watchEnums = (watch(colLabel) ?? []);
+    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.fieldLabel`))}`, required: isRequired, alignItems: "stretch", gridColumn,
+        gridRow, children: [isMultiple && (jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: 1, children: watchEnums.map((enumValue) => {
+                    const item = enumValue;
+                    if (item === undefined) {
+                        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "undefined" });
+                    }
+                    return (jsxRuntime.jsx(Tag, { closable: true, children: !!renderDisplay === true
+                            ? renderDisplay(item)
+                            : translate.t(removeIndex(`${colLabel}.${item}`)) }));
+                }) })), !isMultiple && (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+};
+
+const FileViewer = ({ column, schema, prefix }) => {
+    const { setValue, formState: { errors }, watch, } = reactHookForm.useFormContext();
+    const { translate } = useSchemaContext();
+    const { required, gridColumn, gridRow } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const currentFiles = (watch(column) ?? []);
+    const colLabel = `${prefix}${column}`;
+    return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${colLabel}.fieldLabel`)}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", display: "grid", gridTemplateRows: "auto 1fr auto", alignItems: "stretch", children: [jsxRuntime.jsx(FileDropzone, { onDrop: ({ files }) => {
+                    const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
+                    setValue(colLabel, [...currentFiles, ...newFiles]);
+                }, placeholder: translate.t(`${colLabel}.fileDropzone`) }), jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: 1, children: currentFiles.map((file) => {
+                    return (jsxRuntime.jsx(react.Card.Root, { variant: "subtle", children: jsxRuntime.jsxs(react.Card.Body, { gap: "2", cursor: "pointer", onClick: () => {
+                                setValue(column, currentFiles.filter(({ name }) => {
+                                    return name !== file.name;
+                                }));
+                            }, display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [jsxRuntime.jsx(react.Box, { children: file.name }), jsxRuntime.jsx(ti.TiDeleteOutline, {})] }) }, file.name));
+                }) }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+};
+
+const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
+    const { watch, formState: { errors }, } = reactHookForm.useFormContext();
+    const { idMap, translate } = useSchemaContext();
+    const { required, gridColumn, gridRow, renderDisplay, foreign_key } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const { display_column } = foreign_key;
+    const colLabel = `${prefix}${column}`;
+    const watchId = watch(colLabel);
+    const watchIds = (watch(colLabel) ?? []);
+    const getPickedValue = () => {
+        if (Object.keys(idMap).length <= 0) {
+            return "";
+        }
+        const record = idMap[watchId];
+        if (record === undefined) {
+            return "";
+        }
+        return record[display_column];
+    };
+    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.fieldLabel`))}`, required: isRequired, alignItems: "stretch", gridColumn,
+        gridRow, children: [isMultiple && (jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: 1, children: watchIds.map((id) => {
+                    const item = idMap[id];
+                    if (item === undefined) {
+                        return (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.undefined`)) }, id));
+                    }
+                    return (jsxRuntime.jsx(Tag, { closable: true, children: !!renderDisplay === true
+                            ? renderDisplay(item)
+                            : item[display_column] }, id));
+                }) })), !isMultiple && jsxRuntime.jsx(react.Text, { children: getPickedValue() }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+};
+
+const NumberViewer = ({ schema, column, prefix, }) => {
+    const { watch, formState: { errors }, } = reactHookForm.useFormContext();
+    const { translate } = useSchemaContext();
+    const { required, gridColumn, gridRow } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const colLabel = `${prefix}${column}`;
+    const value = watch(colLabel);
+    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, required: isRequired, gridColumn, gridRow, children: [jsxRuntime.jsx(react.Text, { children: value }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+};
+
+const ObjectViewer = ({ schema, column, prefix }) => {
+    const { properties, gridRow, gridColumn = "1/span 12", required } = schema;
+    const { translate } = useSchemaContext();
+    const colLabel = `${prefix}${column}`;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const { formState: { errors }, } = reactHookForm.useFormContext();
+    if (properties === undefined) {
+        throw new Error(`properties is undefined when using ObjectInput`);
+    }
+    return (jsxRuntime.jsxs(react.Box, { gridRow, gridColumn, children: [jsxRuntime.jsxs(react.Box, { as: "label", gridColumn: "1/span12", children: [`${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, isRequired && jsxRuntime.jsx("span", { children: "*" })] }), jsxRuntime.jsx(react.Grid, { gap: "4", padding: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat("auto-fit", auto)`, children: Object.keys(properties ?? {}).map((key) => {
+                    return (
+                    // @ts-expect-error find suitable types
+                    jsxRuntime.jsx(ColumnViewer, { column: `${key}`,
+                        prefix: `${prefix}${column}.`,
+                        properties }, `form-objectviewer-${colLabel}-${key}`));
+                }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+};
+
+const RecordInput = ({ column, schema, prefix }) => {
+    const { formState: { errors }, setValue, getValues, } = reactHookForm.useFormContext();
+    const { translate } = useSchemaContext();
+    const { required, gridColumn, gridRow } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const entries = Object.entries(getValues(column) ?? {});
+    const [showNewEntries, setShowNewEntries] = React.useState(false);
+    const [newKey, setNewKey] = React.useState();
+    const [newValue, setNewValue] = React.useState();
+    return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${column}.fieldLabel`)}`, required: isRequired, alignItems: "stretch", gridColumn, gridRow, children: [entries.map(([key, value]) => {
+                return (jsxRuntime.jsxs(react.Grid, { templateColumns: "1fr 1fr auto", gap: 1, children: [jsxRuntime.jsx(react.Input, { value: key, onChange: (e) => {
+                                const filtered = entries.filter(([target]) => {
+                                    return target !== key;
+                                });
+                                setValue(column, Object.fromEntries([...filtered, [e.target.value, value]]));
+                            }, autoComplete: "off" }), jsxRuntime.jsx(react.Input, { value: value, onChange: (e) => {
+                                setValue(column, {
+                                    ...getValues(column),
+                                    [key]: e.target.value,
+                                });
+                            }, autoComplete: "off" }), jsxRuntime.jsx(react.IconButton, { variant: "ghost", onClick: () => {
+                                const filtered = entries.filter(([target]) => {
+                                    return target !== key;
+                                });
+                                setValue(column, Object.fromEntries([...filtered]));
+                            }, children: jsxRuntime.jsx(cg.CgClose, {}) })] }));
+            }), jsxRuntime.jsx(react.Show, { when: showNewEntries, children: jsxRuntime.jsxs(react.Card.Root, { children: [jsxRuntime.jsx(react.Card.Body, { gap: "2", children: jsxRuntime.jsxs(react.Grid, { templateColumns: "1fr 1fr auto", gap: 1, children: [jsxRuntime.jsx(react.Input, { value: newKey, onChange: (e) => {
+                                            setNewKey(e.target.value);
+                                        }, autoComplete: "off" }), jsxRuntime.jsx(react.Input, { value: newValue, onChange: (e) => {
+                                            setNewValue(e.target.value);
+                                        }, autoComplete: "off" })] }) }), jsxRuntime.jsxs(react.Card.Footer, { justifyContent: "flex-end", children: [jsxRuntime.jsx(react.IconButton, { variant: "subtle", onClick: () => {
+                                        setShowNewEntries(false);
+                                        setNewKey(undefined);
+                                        setNewValue(undefined);
+                                    }, children: jsxRuntime.jsx(cg.CgClose, {}) }), jsxRuntime.jsx(Button, { onClick: () => {
+                                        if (!!newKey === false) {
+                                            setShowNewEntries(false);
+                                            setNewKey(undefined);
+                                            setNewValue(undefined);
+                                            return;
+                                        }
+                                        setValue(column, Object.fromEntries([...entries, [newKey, newValue]]));
+                                        setShowNewEntries(false);
+                                        setNewKey(undefined);
+                                        setNewValue(undefined);
+                                    }, children: translate.t(`${column}.save`) })] })] }) }), jsxRuntime.jsx(Button, { onClick: () => {
+                    setShowNewEntries(true);
+                    setNewKey(undefined);
+                    setNewValue(undefined);
+                }, children: translate.t(`${column}.addNew`) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(`${column}.fieldRequired`) }))] }));
+};
+
+const TagViewer = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
-    const { schema, serverUrl } = useSchemaContext();
+    const { serverUrl } = useSchemaContext();
     if (schema.properties == undefined) {
         throw new Error("schema properties undefined when using DatePicker");
     }
-    const { gridColumn, gridRow, in_table, object_id_column } = schema.properties[column];
+    const { gridColumn, gridRow, in_table, object_id_column } = schema;
     if (in_table === undefined) {
         throw new Error("in_table is undefined when using TagPicker");
     }
@@ -4471,7 +4798,7 @@ const TagPicker = ({ column }) => {
     });
     const object_id = watch(object_id_column);
     const existingTagsQuery = reactQuery.useQuery({
-        queryKey: [`existing`, in_table, object_id_column, object_id],
+        queryKey: [`existing`, { in_table, object_id_column }, object_id],
         queryFn: async () => {
             return await getTableData({
                 serverUrl,
@@ -4524,6 +4851,77 @@ const TagPicker = ({ column }) => {
             }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
 };
 
+const StringViewer = ({ column, schema, prefix, }) => {
+    const { watch, formState: { errors }, } = reactHookForm.useFormContext();
+    const { translate } = useSchemaContext();
+    const { required, gridColumn, gridRow } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const colLabel = `${prefix}${column}`;
+    const value = watch(colLabel);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsxRuntime.jsx(react.Text, { children: value }), errors[colLabel] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }) }));
+};
+
+const SchemaViewer = ({ schema, prefix, column, }) => {
+    const colSchema = schema;
+    const { type, variant, properties: innerProperties, foreign_key, items, } = schema;
+    if (type === "string") {
+        if ((schema.enum ?? []).length > 0) {
+            return jsxRuntime.jsx(EnumViewer, { schema: colSchema, prefix, column });
+        }
+        if (variant === "id-picker") {
+            idPickerSanityCheck(column, foreign_key);
+            return jsxRuntime.jsx(IdViewer, { schema: colSchema, prefix, column });
+        }
+        if (variant === "date-picker") {
+            return jsxRuntime.jsx(DateViewer, { schema: colSchema, prefix, column });
+        }
+        return jsxRuntime.jsx(StringViewer, { schema: colSchema, prefix, column });
+    }
+    if (type === "number" || type === "integer") {
+        return jsxRuntime.jsx(NumberViewer, { schema: colSchema, prefix, column });
+    }
+    if (type === "boolean") {
+        return jsxRuntime.jsx(BooleanViewer, { schema: colSchema, prefix, column });
+    }
+    if (type === "object") {
+        if (innerProperties) {
+            return jsxRuntime.jsx(ObjectViewer, { schema: colSchema, prefix, column });
+        }
+        return jsxRuntime.jsx(RecordInput, { schema: colSchema, prefix, column });
+    }
+    if (type === "array") {
+        if (variant === "id-picker") {
+            idPickerSanityCheck(column, foreign_key);
+            return (jsxRuntime.jsx(IdViewer, { schema: colSchema, prefix, column, isMultiple: true }));
+        }
+        if (variant === "tag-picker") {
+            return jsxRuntime.jsx(TagViewer, { schema: colSchema, prefix, column });
+        }
+        if (variant === "file-picker") {
+            return jsxRuntime.jsx(FileViewer, { schema: colSchema, prefix, column });
+        }
+        if (items) {
+            return jsxRuntime.jsx(ArrayViewer, { schema: colSchema, prefix, column });
+        }
+        return jsxRuntime.jsx(react.Text, { children: `array ${column}` });
+    }
+    if (type === "null") {
+        return jsxRuntime.jsx(react.Text, { children: `null ${column}` });
+    }
+    return jsxRuntime.jsx(react.Text, { children: "missing type" });
+};
+
+const ColumnViewer = ({ column, properties, prefix, }) => {
+    if (properties === undefined) {
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    }
+    const colSchema = properties[column];
+    if (colSchema === undefined) {
+        throw new Error(`${column} does not exist when using ColumnRenderer`);
+    }
+    return jsxRuntime.jsx(SchemaViewer, { schema: colSchema, prefix, column });
+};
+
 const idPickerSanityCheck = (column, foreign_key) => {
     if (!!foreign_key == false) {
         throw new Error(`The key foreign_key does not exist in properties of column ${column} when using id-picker.`);
@@ -4540,7 +4938,7 @@ const idPickerSanityCheck = (column, foreign_key) => {
     }
 };
 const FormInternal = () => {
-    const { schema, requestUrl, order, ignore, onSubmit, rowNumber, idMap, translate, requestOptions, } = useSchemaContext();
+    const { schema, requestUrl, order, ignore, include, onSubmit, rowNumber, translate, requestOptions, } = useSchemaContext();
     const methods = reactHookForm.useFormContext();
     const [isSuccess, setIsSuccess] = React.useState(false);
     const [isError, setIsError] = React.useState(false);
@@ -4599,184 +4997,64 @@ const FormInternal = () => {
         setIsError(false);
         setIsConfirming(true);
     };
-    const renderOrder = (order, origin_list) => {
-        const not_exist = origin_list.filter((columnA) => !order.some((columnB) => columnA === columnB));
-        return [...order, ...not_exist];
-    };
-    const ordered = renderOrder(order, Object.keys(properties));
-    const getDataListProps = (value) => {
-        if (value == undefined || value.length <= 0) {
-            return {
-                value: `<${translate.t("empty") ?? "Empty"}>`,
-                color: "gray.400",
-            };
-        }
-        return {
-            value: value,
-        };
+    const renderColumns = ({ order, keys, ignore, include, }) => {
+        const included = include.length > 0 ? include : keys;
+        const not_exist = included.filter((columnA) => !order.some((columnB) => columnA === columnB));
+        const ordered = [...order, ...not_exist];
+        const ignored = ordered.filter((column) => !ignore.some((shouldIgnore) => column === shouldIgnore));
+        return ignored;
     };
+    const ordered = renderColumns({
+        order,
+        keys: Object.keys(properties),
+        ignore,
+        include,
+    });
     if (isSuccess) {
-        return (jsxRuntime.jsxs(react.Grid, { gap: 2, children: [jsxRuntime.jsx(react.Heading, { children: translate.t("title") }), jsxRuntime.jsxs(react.Alert.Root, { status: "success", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsx(react.Alert.Title, { children: translate.t("submitSuccess") })] }), jsxRuntime.jsx(Button, { onClick: () => {
-                        setIsError(false);
-                        setIsSubmiting(false);
-                        setIsSuccess(false);
-                        setIsConfirming(false);
-                        setValidatedData(undefined);
-                        methods.reset();
-                    }, formNoValidate: true, children: translate.t("submitAgain") })] }));
+        return (jsxRuntime.jsxs(react.Grid, { gap: 2, children: [jsxRuntime.jsx(react.Heading, { children: translate.t("title") }), jsxRuntime.jsxs(react.Alert.Root, { status: "success", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsx(react.Alert.Title, { children: translate.t("submitSuccess") })] }), jsxRuntime.jsx(react.Flex, { justifyContent: "end", children: jsxRuntime.jsx(Button, { onClick: () => {
+                            setIsError(false);
+                            setIsSubmiting(false);
+                            setIsSuccess(false);
+                            setIsConfirming(false);
+                            setValidatedData(undefined);
+                            methods.reset();
+                        }, formNoValidate: true, children: translate.t("submitAgain") }) })] }));
     }
     if (isConfirming) {
-        return (jsxRuntime.jsxs(react.Grid, { gap: 2, children: [jsxRuntime.jsxs(react.Heading, { children: [" ", translate.t("title")] }), jsxRuntime.jsx(DataListRoot, { orientation: "horizontal", gap: 4, display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: ordered.map((column) => {
-                        if (properties === undefined) {
-                            return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-                        }
-                        const key = column;
-                        const values = properties[column];
-                        const shouldIgnore = ignore.some((column) => {
-                            return column == key;
-                        });
-                        if (shouldIgnore) {
-                            return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-                        }
-                        const { type, variant, gridColumn, gridRow, foreign_key } = values;
-                        if (type === "string") {
-                            if (variant === "id-picker") {
-                                idPickerSanityCheck(column, foreign_key);
-                                return (jsxRuntime.jsx(IdViewer, { value: (validatedData ?? {})[column], column,
-                                    dataListItemProps: { gridColumn, gridRow } }, `form-${key}`));
-                            }
-                            if (variant === "date-picker") {
-                                const value = (validatedData ?? {})[column];
-                                if (!!value === false) {
-                                    return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps(undefined) }, `form-${key}`));
-                                }
-                                const date = dayjs(value).format("YYYY-MM-DD");
-                                return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps(date) }, `form-${key}`));
-                            }
-                            return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps((validatedData ?? {})[column]) }, `form-${key}`));
-                        }
-                        if (type === "object") {
-                            const value = (validatedData ?? {})[column];
-                            if (!!value === false) {
-                                return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps(undefined) }, `form-${key}`));
-                            }
-                            return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 2, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsxRuntime.jsx(react.Text, { children: translate.t(`input.${column}`) }), jsxRuntime.jsx(DataListRoot, { orientation: "horizontal", padding: 4, borderColor: "gray.200", borderWidth: 1, borderRadius: 4, children: Object.entries(value).map(([key, value]) => {
-                                            return (jsxRuntime.jsx(DataListItem, { label: `${key}`, ...getDataListProps(value) }, `form-${column}-${key}`));
-                                        }) })] }, `form-${key}`));
-                        }
-                        if (type === "boolean") {
-                            return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps((validatedData ?? {})[column]) }, `form-${key}`));
-                        }
-                        if (type === "number" || type === "integer") {
-                            return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps((validatedData ?? {})[column]) }, `form-${key}`));
-                        }
-                        if (type === "array") {
-                            if (variant === "tag-picker") {
-                                const value = (validatedData ?? {})[column];
-                                return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps(JSON.stringify(value)) }, `form-${key}`));
-                            }
-                            if (variant === "file-picker") {
-                                const fileNames = ((validatedData ?? {})[column] ?? []).map((file) => {
-                                    return file.name;
-                                });
-                                return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps(JSON.stringify(fileNames)) }, `form-${key}`));
-                            }
-                            if (variant === "id-picker") {
-                                const value = (validatedData ?? {})[column];
-                                if (schema.properties == undefined) {
-                                    throw new Error("schema properties when using DatePicker");
-                                }
-                                const { foreign_key } = schema.properties[column];
-                                if (foreign_key === undefined) {
-                                    throw new Error("foreign_key when variant is id-picker");
-                                }
-                                const { display_column } = foreign_key;
-                                const mapped = value.map((item) => {
-                                    return idMap[item][display_column];
-                                });
-                                return (jsxRuntime.jsxs(react.Grid, { flexFlow: "column", gridColumn,
-                                    gridRow, children: [jsxRuntime.jsx(react.Text, { children: translate.t(`input.${column}`) }), jsxRuntime.jsx(RecordDisplay, { object: mapped })] }, `form-${key}`));
-                            }
-                            const objectString = JSON.stringify((validatedData ?? {})[column]);
-                            return (jsxRuntime.jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${translate.t(`${column}.fieldLabel`)}`, ...getDataListProps(objectString) }, `form-${key}`));
-                        }
-                        if (type === "null") {
-                            return jsxRuntime.jsx(jsxRuntime.Fragment, { children: `null ${column}` });
-                        }
-                        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: `unknown type ${column}` });
-                    }) }), jsxRuntime.jsx(Button, { onClick: () => {
-                        onFormSubmit(validatedData);
-                    }, children: translate.t("confirm") }), jsxRuntime.jsx(Button, { onClick: () => {
-                        setIsConfirming(false);
-                    }, variant: "subtle", children: translate.t("cancel") }), isSubmiting && (jsxRuntime.jsx(react.Box, { pos: "absolute", inset: "0", bg: "bg/80", children: jsxRuntime.jsx(react.Center, { h: "full", children: jsxRuntime.jsx(react.Spinner, { color: "teal.500" }) }) })), isError && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(react.Alert.Root, { status: "error", children: jsxRuntime.jsx(react.Alert.Title, { children: jsxRuntime.jsx(AccordionRoot, { collapsible: true, defaultValue: ["b"], children: jsxRuntime.jsxs(AccordionItem, { value: "b", children: [jsxRuntime.jsxs(AccordionItemTrigger, { children: [jsxRuntime.jsx(react.Alert.Indicator, {}), `${error}`] }), jsxRuntime.jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) }) }) }))] }));
+        return (jsxRuntime.jsxs(react.Grid, { gap: 2, children: [jsxRuntime.jsxs(react.Heading, { children: [" ", translate.t("title")] }), jsxRuntime.jsx(react.Grid, { gap: 4, gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: ordered.map((column) => {
+                        return (jsxRuntime.jsx(ColumnViewer
+                        // @ts-expect-error find suitable types
+                        , { 
+                            // @ts-expect-error find suitable types
+                            properties: properties, prefix: ``, column }, `form-viewer-${column}`));
+                    }) }), jsxRuntime.jsxs(react.Flex, { justifyContent: "end", gap: "2", children: [jsxRuntime.jsx(Button, { onClick: () => {
+                                setIsConfirming(false);
+                            }, variant: "subtle", children: translate.t("cancel") }), jsxRuntime.jsx(Button, { onClick: () => {
+                                onFormSubmit(validatedData);
+                            }, children: translate.t("confirm") })] }), isSubmiting && (jsxRuntime.jsx(react.Box, { pos: "absolute", inset: "0", bg: "bg/80", children: jsxRuntime.jsx(react.Center, { h: "full", children: jsxRuntime.jsx(react.Spinner, { color: "teal.500" }) }) })), isError && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(react.Alert.Root, { status: "error", children: jsxRuntime.jsx(react.Alert.Title, { children: jsxRuntime.jsx(AccordionRoot, { collapsible: true, defaultValue: ["b"], children: jsxRuntime.jsxs(AccordionItem, { value: "b", children: [jsxRuntime.jsxs(AccordionItemTrigger, { children: [jsxRuntime.jsx(react.Alert.Indicator, {}), `${error}`] }), jsxRuntime.jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) }) }) }))] }));
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(react.Grid, { gap: 2, children: [jsxRuntime.jsxs(react.Heading, { children: [" ", translate.t("title")] }), jsxRuntime.jsx(react.Grid, { gap: 4, gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: ordered.map((column) => {
-                            if (properties === undefined) {
-                                return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-                            }
-                            const key = column;
-                            const values = properties[column];
-                            const shouldIgnore = ignore.some((column) => {
-                                return column == key;
-                            });
-                            if (shouldIgnore) {
-                                return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-                            }
-                            //@ts-expect-error TODO: add more fields to support form-creation
-                            const { type, variant, foreign_key } = values;
-                            if (type === "string") {
-                                // @ts-expect-error enum should exists
-                                if ((values.enum ?? []).length > 0) {
-                                    return jsxRuntime.jsx(EnumPicker, { column: key }, `form-${key}`);
-                                }
-                                if (variant === "id-picker") {
-                                    idPickerSanityCheck(column, foreign_key);
-                                    return jsxRuntime.jsx(IdPicker, { column: key }, `form-${key}`);
-                                }
-                                if (variant === "date-picker") {
-                                    return jsxRuntime.jsx(DatePicker, { column: key }, `form-${key}`);
-                                }
-                                return jsxRuntime.jsx(StringInputField, { column: key }, `form-${key}`);
-                            }
-                            if (type === "number" || type === "integer") {
-                                return jsxRuntime.jsx(NumberInputField, { column: key }, `form-${key}`);
-                            }
-                            if (type === "boolean") {
-                                return jsxRuntime.jsx(BooleanPicker, { column: key }, `form-${key}`);
-                            }
-                            if (type === "object") {
-                                return jsxRuntime.jsx(ObjectInput, { column: key }, `form-${key}`);
-                            }
-                            if (type === "array") {
-                                if (variant === "id-picker") {
-                                    idPickerSanityCheck(column, foreign_key);
-                                    return jsxRuntime.jsx(IdPicker, { column: key, isMultiple: true }, `form-${key}`);
-                                }
-                                if (variant === "tag-picker") {
-                                    return jsxRuntime.jsx(TagPicker, { column: key }, `form-${key}`);
-                                }
-                                if (variant === "file-picker") {
-                                    return jsxRuntime.jsx(FilePicker, { column: key }, `form-${key}`);
-                                }
-                                return jsxRuntime.jsx(react.Text, { children: `array ${column}` }, `form-${key}`);
-                            }
-                            if (type === "null") {
-                                return jsxRuntime.jsx(react.Text, { children: `null ${column}` }, `form-${key}`);
-                            }
-                            return jsxRuntime.jsx(react.Text, { children: "missing type" }, `form-${key}`);
-                        }) }), jsxRuntime.jsx(Button, { onClick: () => {
-                            methods.handleSubmit(onValid)();
-                        }, formNoValidate: true, children: translate.t("submit") })] }), isError && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["isError", jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" ", `${error}`] })] }))] }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(react.Grid, { gap: "2", children: [jsxRuntime.jsxs(react.Heading, { children: [" ", translate.t("title")] }), jsxRuntime.jsx(react.Grid, { gap: "4", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: ordered.map((column) => {
+                        return (jsxRuntime.jsx(ColumnRenderer
+                        // @ts-expect-error find suitable types
+                        , { 
+                            // @ts-expect-error find suitable types
+                            properties: properties, prefix: ``, column }, `form-input-${column}`));
+                    }) }), jsxRuntime.jsxs(react.Flex, { justifyContent: "end", gap: "2", children: [jsxRuntime.jsx(Button, { onClick: () => {
+                                methods.reset();
+                            }, variant: "subtle", children: translate.t("reset") }), jsxRuntime.jsx(Button, { onClick: () => {
+                                methods.handleSubmit(onValid)();
+                            }, formNoValidate: true, children: translate.t("submit") })] })] }) }));
 };
-const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [], ignore = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, }) => {
-    const { properties } = schema;
-    idListSanityCheck("order", order, properties);
-    idListSanityCheck("ignore", ignore, properties);
+const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, }) => {
+    // const { properties } = schema;
+    // idListSanityCheck("order", order, properties as object);
+    // idListSanityCheck("ignore", ignore, properties as object);
     return (jsxRuntime.jsx(SchemaFormContext.Provider, { value: {
             schema,
             serverUrl,
             order,
             ignore,
+            include,
             // @ts-expect-error TODO: find appropriate types
             onSubmit,
             rowNumber,
@@ -4788,7 +5066,9 @@ const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [],
 };
 
 const useForm = ({ preLoadedValues, keyPrefix }) => {
-    const form = reactHookForm.useForm({ values: preLoadedValues });
+    const form = reactHookForm.useForm({
+        values: preLoadedValues,
+    });
     const [idMap, setIdMap] = React.useState({});
     const translate = reactI18next.useTranslation("", { keyPrefix });
     return {
@@ -4858,6 +5138,7 @@ exports.ViewDialog = ViewDialog;
 exports.getColumns = getColumns;
 exports.getMultiDates = getMultiDates;
 exports.getRangeDates = getRangeDates;
+exports.idPickerSanityCheck = idPickerSanityCheck;
 exports.useDataTable = useDataTable;
 exports.useDataTableContext = useDataTableContext;
 exports.useDataTableServer = useDataTableServer;