@duke333/builder-ui 0.2.1 → 0.2.3

package/dist/index.js

@@ -420,11 +420,13 @@ function createBuilderClient({ transport, apiBasePath }) {
   return createBuilderApiClient(transport, { apiBasePath });
 }
 var BuilderContext = createContext(null);
+var defaultComponents = {};
 function BuilderProvider({
   children,
   client: configuredClient,
   transport,
   apiBasePath,
+  components = defaultComponents,
   queryClient,
   onNotify
 }) {
@@ -446,8 +448,8 @@ function BuilderProvider({
   const internalQueryClient = useRef(null);
   if (!internalQueryClient.current) internalQueryClient.current = queryClient ?? new QueryClient();
   const value = useMemo(
-    () => ({ client: internalClient, hooks, notify }),
-    [hooks, internalClient, notify]
+    () => ({ client: internalClient, components, hooks, notify }),
+    [components, hooks, internalClient, notify]
   );
   return /* @__PURE__ */ jsx(QueryClientProvider, { client: internalQueryClient.current, children: /* @__PURE__ */ jsxs(BuilderContext.Provider, { value, children: [
     children,
@@ -468,7 +470,7 @@ function builderErrorMessage(error, fallback) {
 }
 
 // src/ready/BuilderRuntimeComponents.tsx
-import { useMemo as useMemo4, useState as useState4 } from "react";
+import { useMemo as useMemo4, useState as useState5 } from "react";
 import { FormProvider as FormProvider2, useForm as useForm2 } from "react-hook-form";
 
 // src/runtime/runtimeUtils.ts
@@ -593,7 +595,8 @@ function ReadyFields({ formId, viewId, schema, extraItems = [] }) {
 }
 
 // src/ready/ReadyOverlay.tsx
-import { useEffect, useId, useRef as useRef3 } from "react";
+import { useEffect, useId, useRef as useRef3, useState as useState2 } from "react";
+import { createPortal } from "react-dom";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function ReadyOverlay({
   open,
@@ -605,10 +608,14 @@ function ReadyOverlay({
 }) {
   const panelRef = useRef3(null);
   const onCloseRef = useRef3(onClose);
+  const [portalRoot, setPortalRoot] = useState2(null);
   onCloseRef.current = onClose;
   const titleId = useId();
   useEffect(() => {
-    if (!open) return;
+    setPortalRoot(document.body);
+  }, []);
+  useEffect(() => {
+    if (!open || !portalRoot) return;
     const previous = document.activeElement;
     panelRef.current?.focus();
     const onKeyDown = (event) => {
@@ -638,29 +645,32 @@ function ReadyOverlay({
       document.body.style.overflow = overflow;
       previous?.focus();
     };
-  }, [open]);
-  if (!open) return null;
-  return /* @__PURE__ */ jsx3("div", { className: "builder-overlay", role: "presentation", onMouseDown: (event) => event.target === event.currentTarget && onClose(), children: /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      ref: panelRef,
-      className: `builder-overlay__panel builder-overlay__panel--${presentation}`,
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-labelledby": titleId,
-      tabIndex: -1,
-      children: [
-        /* @__PURE__ */ jsxs3("header", { className: "builder-overlay__header", children: [
-          /* @__PURE__ */ jsxs3("div", { children: [
-            /* @__PURE__ */ jsx3("h2", { id: titleId, className: "builder-title", children: title }),
-            description ? /* @__PURE__ */ jsx3("p", { className: "builder-description", children: description }) : null
+  }, [open, portalRoot]);
+  if (!open || !portalRoot) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx3("div", { className: "builder-overlay", role: "presentation", onMouseDown: (event) => event.target === event.currentTarget && onClose(), children: /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        ref: panelRef,
+        className: `builder-overlay__panel builder-overlay__panel--${presentation}`,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsxs3("header", { className: "builder-overlay__header", children: [
+            /* @__PURE__ */ jsxs3("div", { children: [
+              /* @__PURE__ */ jsx3("h2", { id: titleId, className: "builder-title", children: title }),
+              description ? /* @__PURE__ */ jsx3("p", { className: "builder-description", children: description }) : null
+            ] }),
+            /* @__PURE__ */ jsx3("button", { type: "button", className: "builder-icon-button", "aria-label": "\u0425\u0430\u0430\u0445", onClick: onClose, children: "\xD7" })
           ] }),
-          /* @__PURE__ */ jsx3("button", { type: "button", className: "builder-icon-button", "aria-label": "\u0425\u0430\u0430\u0445", onClick: onClose, children: "\xD7" })
-        ] }),
-        /* @__PURE__ */ jsx3("div", { className: "builder-overlay__body", children })
-      ]
-    }
-  ) });
+          /* @__PURE__ */ jsx3("div", { className: "builder-overlay__body", children })
+        ]
+      }
+    ) }),
+    portalRoot
+  );
 }
 function ReadyConfirmDialog({
   open,
@@ -684,16 +694,16 @@ function ReadyErrorState({ title, description }) {
 }
 
 // src/ready/ReadySubform.tsx
-import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef4, useState as useState3 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 
 // src/ready/ReadyTable.tsx
-import { useMemo as useMemo2, useState as useState2 } from "react";
+import { useMemo as useMemo2, useState as useState3 } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function useReadyTableState({ pageSize = 20 } = {}) {
-  const [page, setPage] = useState2(1);
-  const [search, setSearchValue] = useState2("");
-  const [sort, setSort] = useState2();
+  const [page, setPage] = useState3(1);
+  const [search, setSearchValue] = useState3("");
+  const [sort, setSort] = useState3();
   return {
     query: { page, pageSize, search: search || void 0, sort },
     page,
@@ -712,7 +722,7 @@ function useReadyTableState({ pageSize = 20 } = {}) {
   };
 }
 function useReadyTable(args) {
-  const [selectedIds, setSelectedIds] = useState2([]);
+  const [selectedIds, setSelectedIds] = useState3([]);
   return useMemo2(
     () => ({
       ...args,
@@ -819,7 +829,7 @@ function ReadyDataGrid({
   ] });
 }
 function readyColumns(columns) {
-  return columns.map((column) => ({ ...column }));
+  return columns.filter((column) => !column.hidden).map((column) => ({ ...column }));
 }
 
 // src/ready/ReadySubform.tsx
@@ -845,8 +855,8 @@ function makeDraftEntry(viewId, values, editing) {
 }
 function ReadySubform({ subform, parentEntry, rows, onRowsChange }) {
   const { hooks, notify } = useBuilderRuntime();
-  const [open, setOpen] = useState3(false);
-  const [editing, setEditing] = useState3(null);
+  const [open, setOpen] = useState4(false);
+  const [editing, setEditing] = useState4(null);
   const initialized = useRef4(false);
   const parentValue = linkedValue(parentEntry, subform.parentField);
   const viewQuery = hooks.useRuntimeBuilderView(subform.viewId, Boolean(subform.viewId));
@@ -876,6 +886,7 @@ function ReadySubform({ subform, parentEntry, rows, onRowsChange }) {
       key: "_actions",
       label: "\u04AE\u0439\u043B\u0434\u044D\u043B",
       sortable: false,
+      hidden: false,
       align: "right",
       render: (row) => /* @__PURE__ */ jsx5("button", { type: "button", className: "builder-link builder-link--danger", onClick: (event) => {
         event.stopPropagation();
@@ -940,7 +951,7 @@ function ReadySubform({ subform, parentEntry, rows, onRowsChange }) {
       /* @__PURE__ */ jsx5(ReadyFields, { formId: view.form.id, viewId: view.id, schema: view.form.schema }),
       /* @__PURE__ */ jsxs5("div", { className: "builder-actions", children: [
         /* @__PURE__ */ jsx5("button", { type: "button", className: "builder-button builder-button--ghost", onClick: close, children: "\u0411\u043E\u043B\u0438\u0445" }),
-        /* @__PURE__ */ jsx5("button", { type: "submit", className: "builder-button builder-button--primary", children: "\u0425\u0430\u0434\u0433\u0430\u043B\u0430\u0445" })
+        /* @__PURE__ */ jsx5("button", { type: "submit", className: "builder-button builder-button--primary", children: editing ? "\u0428\u0438\u043D\u044D\u0447\u043B\u044D\u0445" : "\u041D\u044D\u043C\u044D\u0445" })
       ] })
     ] }) }) }) : null
   ] });
@@ -948,7 +959,7 @@ function ReadySubform({ subform, parentEntry, rows, onRowsChange }) {
 
 // src/ready/BuilderRuntimeComponents.tsx
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function BuilderForm({ formId }) {
+function DefaultBuilderForm({ formId }) {
   const { hooks, notify } = useBuilderRuntime();
   const query = hooks.useRuntimeBuilderForm(formId);
   const save = hooks.useSaveRuntimeBuilderFormEntry(formId);
@@ -974,7 +985,7 @@ function BuilderForm({ formId }) {
     ] }) })
   ] });
 }
-function BuilderGrid({ listId }) {
+function DefaultBuilderGrid({ listId }) {
   const { hooks } = useBuilderRuntime();
   const listQuery = hooks.useRuntimeBuilderList(listId);
   const state = useReadyTableState();
@@ -1000,7 +1011,7 @@ function childPayload(row, includeIdentity) {
 }
 function BuilderEntryEditor({ view, editing, open, onClose }) {
   const { hooks, notify } = useBuilderRuntime();
-  const [subforms, setSubforms] = useState4({});
+  const [subforms, setSubforms] = useState5({});
   const save = hooks.useSaveBuilderViewEntry(view.id);
   const createComposite = hooks.useCreateCompositeBuilderViewEntry(view.id);
   const updateComposite = hooks.useUpdateCompositeBuilderViewEntry(view.id);
@@ -1041,11 +1052,11 @@ function BuilderEntryEditor({ view, editing, open, onClose }) {
     ] })
   ] }) }) : /* @__PURE__ */ jsx6(ReadyErrorState, { title: "Form \u0445\u043E\u043B\u0431\u043E\u043E\u0433\u04AF\u0439", description: "\u042D\u043D\u044D view-\u0434 form \u0442\u043E\u0445\u0438\u0440\u0443\u0443\u043B\u0430\u0430\u0433\u04AF\u0439 \u0431\u0430\u0439\u043D\u0430." }) });
 }
-function BuilderView({ viewId }) {
+function DefaultBuilderView({ viewId }) {
   const { hooks, notify } = useBuilderRuntime();
-  const [editing, setEditing] = useState4(null);
-  const [editorOpen, setEditorOpen] = useState4(false);
-  const [pendingDelete, setPendingDelete] = useState4(null);
+  const [editing, setEditing] = useState5(null);
+  const [editorOpen, setEditorOpen] = useState5(false);
+  const [pendingDelete, setPendingDelete] = useState5(null);
   const viewQuery = hooks.useRuntimeBuilderView(viewId);
   const state = useReadyTableState();
   const entriesQuery = hooks.useBuilderViewEntries(viewId, state.query);
@@ -1058,6 +1069,7 @@ function BuilderView({ viewId }) {
       key: "_actions",
       label: "\u04AE\u0439\u043B\u0434\u044D\u043B",
       sortable: false,
+      hidden: false,
       align: "right",
       render: (entry) => /* @__PURE__ */ jsxs6("div", { className: "builder-row-actions", "data-builder-row-action": true, children: [
         /* @__PURE__ */ jsx6("button", { type: "button", className: "builder-button builder-button--ghost", onClick: (event) => {
@@ -1116,6 +1128,21 @@ function BuilderView({ viewId }) {
     )
   ] });
 }
+function BuilderForm(props) {
+  const { components } = useBuilderRuntime();
+  const Component = components.Form;
+  return Component ? /* @__PURE__ */ jsx6(Component, { ...props }) : /* @__PURE__ */ jsx6(DefaultBuilderForm, { ...props });
+}
+function BuilderGrid(props) {
+  const { components } = useBuilderRuntime();
+  const Component = components.Grid;
+  return Component ? /* @__PURE__ */ jsx6(Component, { ...props }) : /* @__PURE__ */ jsx6(DefaultBuilderGrid, { ...props });
+}
+function BuilderView(props) {
+  const { components } = useBuilderRuntime();
+  const Component = components.View;
+  return Component ? /* @__PURE__ */ jsx6(Component, { ...props }) : /* @__PURE__ */ jsx6(DefaultBuilderView, { ...props });
+}
 
 // src/admin/editorState.ts
 var BUILDER_EDITOR_NONE_VALUE = "__none";
@@ -1271,16 +1298,19 @@ function builderFormEditorValuesFromEntity(form, emptyValues) {
 function builderListEditorValuesFromEntity(list, emptyValues) {
   if (!list) return emptyValues;
   const source = list.source;
+  const orderBy = list.schema.orderBy ? Array.isArray(list.schema.orderBy) ? list.schema.orderBy : [list.schema.orderBy] : [];
   return {
     title: list.title,
     description: list.description ?? "",
     sourceType: source?.type ?? "none",
     sourceTable: source?.type === "dbTable" ? source.tableName : BUILDER_EDITOR_NONE_VALUE,
     apiBasePath: source?.type === "apiEndpoint" ? source.basePath : "",
+    orderBy,
     columns: list.schema.columns.map((column) => ({
       key: column.key,
       label: column.label,
       sortable: column.sortable,
+      hidden: column.hidden ?? false,
       align: column.align
     })),
     triggers: valuesFromTriggers(list.triggers),
@@ -1325,6 +1355,7 @@ function builderListEditorColumnsFromTable(table) {
     key: column.name,
     label: column.label,
     sortable: column.sortable,
+    hidden: false,
     align: column.fieldType === "number" || column.fieldType === "money" ? "right" : "left"
   }));
 }
@@ -1396,11 +1427,19 @@ function builderFormEditorInputFromValues(values) {
 }
 function builderListEditorInputFromValues(values) {
   const source = values.sourceType === "dbTable" && values.sourceTable !== BUILDER_EDITOR_NONE_VALUE ? { type: "dbTable", tableName: values.sourceTable } : values.sourceType === "apiEndpoint" && values.apiBasePath ? { type: "apiEndpoint", basePath: values.apiBasePath } : null;
+  const orderBy = Array.from(
+    new Map(
+      values.orderBy.filter((rule) => rule.field && rule.field !== BUILDER_EDITOR_NONE_VALUE).map((rule) => [rule.field, rule])
+    ).values()
+  );
   return {
     title: values.title,
     description: values.description || null,
     source,
-    schema: { columns: values.columns },
+    schema: {
+      columns: values.columns,
+      ...source && orderBy.length > 0 ? { orderBy } : {}
+    },
     triggers: values.triggers.map((trigger) => ({
       event: trigger.event,
       action: "callApi",
@@ -1603,10 +1642,18 @@ function createBuilderDefaultFormEditorBody(options) {
           ] }),
           sourceType === "dbTable" ? /* @__PURE__ */ jsxs7("label", { style: styles.field, children: [
             /* @__PURE__ */ jsx7("span", { style: styles.label, children: "Table" }),
-            /* @__PURE__ */ jsxs7("select", { style: styles.input, ...form.register("sourceTable"), children: [
-              /* @__PURE__ */ jsx7("option", { value: BUILDER_EDITOR_NONE_VALUE, children: "Select table" }),
-              tables.map((table) => /* @__PURE__ */ jsx7("option", { value: table.name, children: table.label ?? table.name }, table.name))
-            ] })
+            /* @__PURE__ */ jsxs7(
+              "select",
+              {
+                style: styles.input,
+                value: sourceTable,
+                ...form.register("sourceTable"),
+                children: [
+                  /* @__PURE__ */ jsx7("option", { value: BUILDER_EDITOR_NONE_VALUE, children: "Select table" }),
+                  tables.map((table) => /* @__PURE__ */ jsx7("option", { value: table.name, children: table.label ?? table.name }, table.name))
+                ]
+              }
+            )
           ] }) : null,
           sourceType === "apiEndpoint" ? /* @__PURE__ */ jsxs7("label", { style: styles.field, children: [
             /* @__PURE__ */ jsx7("span", { style: styles.label, children: "API base path" }),
@@ -1864,6 +1911,7 @@ function createBuilderDefaultListEditorBody(options) {
     listId,
     form,
     columnArray,
+    orderByArray,
     triggerArray,
     sourceType,
     sourceTable,
@@ -1873,6 +1921,8 @@ function createBuilderDefaultListEditorBody(options) {
     isSaving,
     importColumnsFromTable
   }) {
+    const selectedTable = tables.find((table) => table.name === sourceTable);
+    const orderByColumns = selectedTable?.columns.filter((column) => column.sortable) ?? [];
     return /* @__PURE__ */ jsxs7("div", { style: styles.page, children: [
       /* @__PURE__ */ jsxs7("div", { style: styles.header, children: [
         /* @__PURE__ */ jsxs7("div", { children: [
@@ -1905,10 +1955,18 @@ function createBuilderDefaultListEditorBody(options) {
           ] }),
           sourceType === "dbTable" ? /* @__PURE__ */ jsxs7("label", { style: styles.field, children: [
             /* @__PURE__ */ jsx7("span", { style: styles.label, children: "Table" }),
-            /* @__PURE__ */ jsxs7("select", { style: styles.input, ...form.register("sourceTable"), children: [
-              /* @__PURE__ */ jsx7("option", { value: BUILDER_EDITOR_NONE_VALUE, children: "Select table" }),
-              tables.map((table) => /* @__PURE__ */ jsx7("option", { value: table.name, children: table.label ?? table.name }, table.name))
-            ] })
+            /* @__PURE__ */ jsxs7(
+              "select",
+              {
+                style: styles.input,
+                value: sourceTable,
+                ...form.register("sourceTable"),
+                children: [
+                  /* @__PURE__ */ jsx7("option", { value: BUILDER_EDITOR_NONE_VALUE, children: "Select table" }),
+                  tables.map((table) => /* @__PURE__ */ jsx7("option", { value: table.name, children: table.label ?? table.name }, table.name))
+                ]
+              }
+            )
           ] }) : null,
           sourceType === "apiEndpoint" ? /* @__PURE__ */ jsxs7("label", { style: styles.field, children: [
             /* @__PURE__ */ jsx7("span", { style: styles.label, children: "API base path" }),
@@ -1926,6 +1984,85 @@ function createBuilderDefaultListEditorBody(options) {
           ) }) : null
         ] })
       ] }),
+      /* @__PURE__ */ jsxs7("section", { style: styles.section, children: [
+        /* @__PURE__ */ jsxs7("div", { style: styles.sectionHeader, children: [
+          /* @__PURE__ */ jsxs7("div", { children: [
+            /* @__PURE__ */ jsx7("h2", { style: styles.sectionTitle, children: "Default ordering" }),
+            /* @__PURE__ */ jsx7("p", { style: styles.description, children: "Rules are applied from top to bottom." })
+          ] }),
+          /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              style: styles.button,
+              disabled: sourceType === "none" || orderByArray.fields.length >= 8,
+              onClick: () => orderByArray.append({
+                field: sourceType === "dbTable" ? orderByColumns[0]?.name ?? BUILDER_EDITOR_NONE_VALUE : "",
+                direction: "desc"
+              }),
+              children: "Add ordering"
+            }
+          )
+        ] }),
+        orderByArray.fields.length === 0 ? /* @__PURE__ */ jsx7("div", { style: styles.grid, children: /* @__PURE__ */ jsx7("p", { style: styles.description, children: "Automatic ordering is used." }) }) : null,
+        orderByArray.fields.map((rule, index) => /* @__PURE__ */ jsxs7("div", { style: styles.row, children: [
+          sourceType === "dbTable" ? /* @__PURE__ */ jsxs7("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx7("span", { style: styles.label, children: "Order by field" }),
+            /* @__PURE__ */ jsxs7("select", { style: styles.input, ...form.register(`orderBy.${index}.field`), children: [
+              /* @__PURE__ */ jsx7("option", { value: BUILDER_EDITOR_NONE_VALUE, children: "Select field" }),
+              orderByColumns.map((column) => /* @__PURE__ */ jsx7("option", { value: column.name, children: column.label }, column.name))
+            ] })
+          ] }) : /* @__PURE__ */ jsxs7("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx7("span", { style: styles.label, children: "Order by field" }),
+            /* @__PURE__ */ jsx7(
+              "input",
+              {
+                style: styles.input,
+                placeholder: "createdAt",
+                ...form.register(`orderBy.${index}.field`)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs7("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx7("span", { style: styles.label, children: "Direction" }),
+            /* @__PURE__ */ jsxs7("select", { style: styles.input, ...form.register(`orderBy.${index}.direction`), children: [
+              /* @__PURE__ */ jsx7("option", { value: "asc", children: "Ascending" }),
+              /* @__PURE__ */ jsx7("option", { value: "desc", children: "Descending" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { style: styles.actions, children: [
+            /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                style: styles.button,
+                disabled: index === 0,
+                onClick: () => orderByArray.move(index, index - 1),
+                children: "Move up"
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                style: styles.button,
+                disabled: index === orderByArray.fields.length - 1,
+                onClick: () => orderByArray.move(index, index + 1),
+                children: "Move down"
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                style: styles.button,
+                onClick: () => orderByArray.remove(index),
+                children: "Remove"
+              }
+            )
+          ] })
+        ] }, rule.id))
+      ] }),
       /* @__PURE__ */ jsxs7("section", { style: styles.section, children: [
         /* @__PURE__ */ jsxs7("div", { style: styles.sectionHeader, children: [
           /* @__PURE__ */ jsxs7("div", { children: [
@@ -1966,16 +2103,10 @@ function createBuilderDefaultListEditorBody(options) {
             /* @__PURE__ */ jsx7("input", { type: "checkbox", ...form.register(`columns.${index}.sortable`) }),
             "Sortable"
           ] }),
-          /* @__PURE__ */ jsx7(
-            "button",
-            {
-              type: "button",
-              style: styles.button,
-              onClick: () => columnArray.remove(index),
-              disabled: columnArray.fields.length <= 1,
-              children: "Remove"
-            }
-          )
+          /* @__PURE__ */ jsxs7("label", { style: styles.checkboxField, children: [
+            /* @__PURE__ */ jsx7("input", { type: "checkbox", ...form.register(`columns.${index}.hidden`) }),
+            "Hidden"
+          ] })
         ] }, column.id))
       ] }),
       /* @__PURE__ */ jsxs7("section", { style: styles.section, children: [
@@ -2020,7 +2151,7 @@ function createBuilderDefaultListEditorBody(options) {
 }
 
 // src/admin/BuilderDefaultEntityManager.tsx
-import { useMemo as useMemo5, useState as useState5 } from "react";
+import { useMemo as useMemo5, useState as useState6 } from "react";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var styles2 = {
   page: {
@@ -2117,7 +2248,7 @@ var styles2 = {
 };
 function createBuilderDefaultEntityManagerComponent(deps) {
   return function BuilderDefaultEntityManager() {
-    const [state, setState] = useState5({
+    const [state, setState] = useState6({
       page: 1,
       pageSize: 20,
       search: ""
@@ -2504,6 +2635,7 @@ function createBuilderListEditorPageComponent(deps) {
       defaultValues: deps.emptyValues
     });
     const columnArray = useFieldArray({ control: form.control, name: "columns" });
+    const orderByArray = useFieldArray({ control: form.control, name: "orderBy" });
     const triggerArray = useFieldArray({ control: form.control, name: "triggers" });
     const sourceType = useWatch2({ control: form.control, name: "sourceType" });
     const sourceTable = useWatch2({ control: form.control, name: "sourceTable" });
@@ -2537,6 +2669,7 @@ function createBuilderListEditorPageComponent(deps) {
         listId,
         form,
         columnArray,
+        orderByArray,
         triggerArray,
         sourceType,
         sourceTable,
@@ -2699,6 +2832,7 @@ function createBuilderAdminPages({
     key: "name",
     label: "Name",
     sortable: true,
+    hidden: false,
     align: "left"
   };
   const emptyListValues = {
@@ -2707,6 +2841,7 @@ function createBuilderAdminPages({
     sourceType: "none",
     sourceTable: BUILDER_EDITOR_NONE_VALUE,
     apiBasePath: "",
+    orderBy: [],
     columns: [emptyColumn],
     triggers: [],
     version: 0
@@ -2940,11 +3075,11 @@ function createBuilderAdminPages({
 }
 
 // src/admin/BuilderEntityManager.tsx
-import { useCallback as useCallback2, useMemo as useMemo6, useState as useState6 } from "react";
+import { useCallback as useCallback2, useMemo as useMemo6, useState as useState7 } from "react";
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function createBuilderEntityManagerComponent(deps) {
   return function BuilderEntityManager() {
-    const [pendingDelete, setPendingDelete] = useState6(null);
+    const [pendingDelete, setPendingDelete] = useState7(null);
     const state = deps.useDataTableState({ pageSize: 20 });
     const query = deps.hooks.useEntities(state.query);
     const remove = deps.hooks.useDelete();
@@ -3004,9 +3139,9 @@ function createBuilderEntityManagerComponent(deps) {
 }
 function createBuilderEntityDialogManagerComponent(deps) {
   return function BuilderEntityDialogManager() {
-    const [editing, setEditing] = useState6(null);
-    const [isEditorOpen, setEditorOpen] = useState6(false);
-    const [pendingDelete, setPendingDelete] = useState6(null);
+    const [editing, setEditing] = useState7(null);
+    const [isEditorOpen, setEditorOpen] = useState7(false);
+    const [pendingDelete, setPendingDelete] = useState7(null);
     const state = deps.useDataTableState({ pageSize: 20 });
     const query = deps.hooks.useEntities(state.query);
     const remove = deps.hooks.useDelete();
@@ -3376,7 +3511,7 @@ function createDynamicListComponent(deps) {
 }
 
 // src/components/DynamicView.tsx
-import { useMemo as useMemo10, useState as useState7 } from "react";
+import { useMemo as useMemo10, useState as useState8 } from "react";
 import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var interactiveRowTargetSelector = "button,a,input,select,textarea,[role='button'],[role='menuitem'],[data-builder-row-action]";
 function hasClosest(target) {
@@ -3389,9 +3524,9 @@ function shouldHandleDynamicViewRowClick(event) {
 }
 function createDynamicViewComponent(deps) {
   return function DynamicView({ viewId }) {
-    const [editing, setEditing] = useState7(null);
-    const [isDialogOpen, setDialogOpen] = useState7(false);
-    const [pendingDelete, setPendingDelete] = useState7(null);
+    const [editing, setEditing] = useState8(null);
+    const [isDialogOpen, setDialogOpen] = useState8(false);
+    const [pendingDelete, setPendingDelete] = useState8(null);
     const viewQuery = deps.hooks.useRuntimeBuilderView(viewId);
     const state = deps.useDataTableState({ pageSize: 20 });
     const entriesQuery = deps.hooks.useBuilderViewEntries(viewId, state.query);
@@ -3485,7 +3620,7 @@ function createDynamicViewComponent(deps) {
 }
 
 // src/components/RuntimeEntryDialog.tsx
-import { useEffect as useEffect6, useMemo as useMemo11, useState as useState8 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo11, useState as useState9 } from "react";
 import { FormProvider as FormProvider6, useForm as useForm7 } from "react-hook-form";
 import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function isDbTableSource(source) {
@@ -3520,7 +3655,7 @@ function createRuntimeEntryDialogComponent(deps) {
     onSave,
     isSaving
   }) {
-    const [draftSubforms, setDraftSubforms] = useState8({});
+    const [draftSubforms, setDraftSubforms] = useState9({});
     const compositeCreate = deps.useCreateCompositeEntry?.(view.id);
     const compositeUpdate = deps.useUpdateCompositeEntry?.(view.id);
     const form = useForm7({
@@ -3706,7 +3841,7 @@ function validateBuilderFrontendSetup(config) {
 // src/index.ts
 var builderUiPackage = {
   name: "@duke333/builder-ui",
-  version: "0.2.1"
+  version: "0.2.2"
 };
 export {
   BUILDER_EDITOR_NONE_VALUE,