cabloy 5.1.169 → 5.1.171

package/zova/src/suite/cabloy-basic/modules/basic-page/src/component/blockPage/controller.tsx

@@ -1,6 +1,7 @@
 import type { RowSelectionState, SortingState } from '@tanstack/vue-table';
 import type { TableIdentity } from 'table-identity';
 import type { IComponentOptions } from 'zova';
+import type { ModelLayoutProfile } from 'zova-module-a-layoutprofile';
 import type {
   IJsxRenderContextPage,
   IPageScope,
@@ -19,7 +20,7 @@ import { BeanControllerBase, deepEqual } from 'zova';
 import { ZovaJsx } from 'zova-jsx';
 import { Controller } from 'zova-module-a-bean';
 import { $QueriesEnsureLoaded } from 'zova-module-a-model';
-import { BeanControllerTableBase } from 'zova-module-a-table';
+import { BeanControllerTableBase, ITableLayout } from 'zova-module-a-table';
 import { ModelResource } from 'zova-module-rest-resource';
 
 import {
@@ -62,6 +63,7 @@ export class ControllerBlockPage<TData extends {} = {}> extends BeanControllerBa
   tableRef: BeanControllerTableBase<TData> | undefined;
   private _tableMetaRefreshPending = false;
   private _tableMetaRefreshTask: Promise<void> | undefined;
+  $$modelLayoutProfile: ModelLayoutProfile | undefined;
 
   jsxZova: ZovaJsx;
   jsxCelScope: IPageScope;
@@ -91,6 +93,14 @@ export class ControllerBlockPage<TData extends {} = {}> extends BeanControllerBa
       true,
       this.resource,
     );
+    const layoutKey = this.layoutKey;
+    if (layoutKey) {
+      this.$$modelLayoutProfile = await this.bean._getBeanSelector(
+        'a-layoutprofile.model.layoutProfile',
+        true,
+        layoutKey,
+      );
+    }
     // jsx
     this._prepareJsx();
     // query
@@ -120,6 +130,7 @@ export class ControllerBlockPage<TData extends {} = {}> extends BeanControllerBa
     await $QueriesEnsureLoaded(
       () => this.$$modelResource.apiSchemasSelect.sdk,
       () => this.queryData,
+      () => this.queryLayoutProfile,
     );
     this._refreshSelectedRows((this.data ?? []) as unknown as Record<string, unknown>[]);
     this._notifySelectionChange();
@@ -144,6 +155,38 @@ export class ControllerBlockPage<TData extends {} = {}> extends BeanControllerBa
     return this.$props.resource;
   }
 
+  get queryLayoutProfile() {
+    return this.$$modelLayoutProfile?.load();
+  }
+
+  get tableLayout(): ITableLayout | undefined {
+    return this.queryLayoutProfile?.data as ITableLayout | undefined;
+  }
+
+  get layoutKey() {
+    return this.$pageRoute?.path;
+  }
+
+  get columnConfigSeed() {
+    const layout = this.tableRef?.layout;
+    const properties = this.tableRef?.layoutProperties;
+    if (!layout || !properties || !this.$$modelLayoutProfile || !this.$passport.isAuthenticated)
+      return;
+    return { layout, properties };
+  }
+
+  async saveColumnConfig(layout: ITableLayout): Promise<void> {
+    if (!this.$$modelLayoutProfile) return;
+    await this.$$modelLayoutProfile.save().mutateAsync(layout as any);
+    await this._requestTableMetaRefresh();
+  }
+
+  async resetColumnConfig(): Promise<void> {
+    if (!this.$$modelLayoutProfile) return;
+    await this.$$modelLayoutProfile.reset().mutateAsync();
+    await this._requestTableMetaRefresh();
+  }
+
   private _normalizeSelectedIds(ids: readonly TableIdentity[]) {
     const selectedIds: TableIdentity[] = [];
     const keys = new Set<string>();

package/zova/src/suite/cabloy-basic/modules/basic-page/src/component/blockTable/controller.tsx

@@ -50,6 +50,7 @@ export class ControllerBlockTable<TData extends {} = {}> extends BeanControllerB
           rowSelection={$$page.rowSelection}
           onRowSelectionChange={updater => $$page.onRowSelectionChange(updater)}
           tableScope={$$page.jsxCelScope}
+          layout={$$page.tableLayout}
         ></ZTable>
       </div>
     );

package/zova/src/suite/cabloy-basic/modules/basic-page/src/component/blockToolbarBulk/controller.tsx

@@ -9,7 +9,10 @@ import { VNode } from 'vue';
 import { BeanControllerBase, Use } from 'zova';
 import { Controller } from 'zova-module-a-bean';
 
-import { resolveTableActionBulkDynamicProps } from '../../lib/selection.js';
+import {
+  groupTableActionBulkActions,
+  resolveTableActionBulkDynamicProps,
+} from '../../lib/selection.js';
 
 declare module 'zova-module-a-openapi' {
   export interface IResourceBlockRecord {
@@ -65,35 +68,48 @@ export class ControllerBlockToolbarBulk extends BeanControllerBase {
     const { $$page } = this.$$renderContext;
     const domActions = this._renderActions();
     const selectionAvailable = $$page.selectionAvailable;
-    if ((!domActions || domActions.length === 0) && !selectionAvailable) return;
+    if (domActions.start.length === 0 && domActions.end.length === 0 && !selectionAvailable) return;
     return (
       <div class={this.$props.class}>
-        <div class="join" role="toolbar" aria-label={this.scope.locale.BulkActions()}>
-          {$$page.selectionToggleAvailable && (
-            <button type="button" class="btn join-item" onClick={() => $$page.toggleSelection()}>
-              {$$page.selectionVisible ? this.scope.locale.Done() : this.scope.locale.Select()}
-            </button>
+        <div
+          class="flex flex-wrap items-center gap-3"
+          role="toolbar"
+          aria-label={this.scope.locale.BulkActions()}
+        >
+          {(selectionAvailable || domActions.start.length > 0) && (
+            <div class="join">
+              {$$page.selectionToggleAvailable && (
+                <button
+                  type="button"
+                  class="btn join-item"
+                  onClick={() => $$page.toggleSelection()}
+                >
+                  {$$page.selectionVisible ? this.scope.locale.Done() : this.scope.locale.Select()}
+                </button>
+              )}
+              {$$page.selectionEnabled && (
+                <span
+                  class="join-item border-base-300 bg-base-200 px-3 py-2"
+                  role="status"
+                  aria-live="polite"
+                >
+                  {this.scope.locale.SelectedItems($$page.selection.count)}
+                </span>
+              )}
+              {domActions.start}
+            </div>
           )}
-          {$$page.selectionEnabled && (
-            <span
-              class="join-item border-base-300 bg-base-200 px-3 py-2"
-              role="status"
-              aria-live="polite"
-            >
-              {this.scope.locale.SelectedItems($$page.selection.count)}
-            </span>
-          )}
-          {domActions}
+          {domActions.end.length > 0 && <div class="ml-auto join">{domActions.end}</div>}
         </div>
       </div>
     );
   }
 
-  private _renderActions() {
+  private _renderActions(): Record<'start' | 'end', VNode[]> {
     const { $jsx, $celScope } = this.$$renderContext;
     const actions = this.$props.actions;
-    if (!actions || actions.length === 0) return;
-    const domActions: VNode[] = [];
+    if (!actions || actions.length === 0) return { start: [], end: [] };
+    const items: { item: VNode; placement?: unknown }[] = [];
     actions.forEach((action, index) => {
       const actionName = action.name;
       const permissionHint = action.options?.permission;
@@ -127,12 +143,11 @@ export class ControllerBlockToolbarBulk extends BeanControllerBase {
       });
       const domAction = $jsx.render(action.render!, options, $celScope, this.$$renderContext);
       if (!domAction) return;
-      if (Array.isArray(domAction)) {
-        domActions.push(...domAction);
-      } else {
-        domActions.push(domAction);
+      const renderedActions = Array.isArray(domAction) ? domAction : [domAction];
+      for (const item of renderedActions) {
+        items.push({ item, placement: action.options?.placement });
       }
     });
-    return domActions;
+    return groupTableActionBulkActions(items);
   }
 }

package/zova/src/suite/cabloy-basic/modules/basic-page/src/lib/selection.ts

@@ -33,6 +33,7 @@ export function resolvePickerSelectionMax(
 }
 
 export type TypeTableActionBulkDynamicDisabledReason = 'maxExceeded' | 'selectionUnavailable';
+export type TypeTableActionBulkPlacement = 'start' | 'end';
 
 export interface IResourceTableActionBulkDynamicProps {
   dynamicSelection: IResourceTableSelectionPayload;
@@ -41,6 +42,16 @@ export interface IResourceTableActionBulkDynamicProps {
   selectedMaxIds?: number;
 }
 
+export function groupTableActionBulkActions<T>(
+  items: readonly { item: T; placement?: unknown }[],
+): Record<TypeTableActionBulkPlacement, T[]> {
+  const groups: Record<TypeTableActionBulkPlacement, T[]> = { start: [], end: [] };
+  for (const { item, placement } of items) {
+    groups[placement === 'end' ? 'end' : 'start'].push(item);
+  }
+  return groups;
+}
+
 export function resolveTableActionBulkDynamicProps(
   options: IResourceTableActionBulkOptionsBase | undefined,
   selection: IResourceTableSelectionPayload,

package/zova/src/suite/cabloy-basic/modules/basic-page/test/lib/selection.test.ts

@@ -2,6 +2,7 @@ import assert from 'node:assert/strict';
 import test from 'node:test';
 
 import {
+  groupTableActionBulkActions,
   limitPickerRowSelection,
   reconcileSelection,
   resolvePickerSelectionMax,
@@ -11,6 +12,28 @@ import {
   selectionRowIds,
 } from '../../src/lib/selection.ts';
 
+test('bulk actions group by placement without changing declaration order', () => {
+  const items = [
+    { item: 'create' },
+    { item: 'columnConfig', placement: 'end' },
+    { item: 'delete' },
+    { item: 'export', placement: 'end' },
+    { item: 'unknown', placement: 'other' },
+  ];
+
+  assert.deepEqual(groupTableActionBulkActions(items), {
+    start: ['create', 'delete', 'unknown'],
+    end: ['columnConfig', 'export'],
+  });
+  assert.deepEqual(items, [
+    { item: 'create' },
+    { item: 'columnConfig', placement: 'end' },
+    { item: 'delete' },
+    { item: 'export', placement: 'end' },
+    { item: 'unknown', placement: 'other' },
+  ]);
+});
+
 test('selection maximum uses action metadata before the frontend fallback', () => {
   assert.equal(resolveSelectionMaxIds(undefined), 100);
   assert.equal(resolveSelectionMaxIds(100), 100);

package/zova/src/suite/cabloy-basic/modules/basic-table/src/.metadata/component/actionColumnConfig.ts

@@ -0,0 +1,31 @@
+import type { TypeControllerInnerProps } from 'zova';
+
+import { defineComponent } from 'vue';
+import { prepareComponentOptions, useController } from 'zova';
+
+import type { ControllerActionColumnConfigProps } from '../../component/actionColumnConfig/controller.jsx';
+
+import { ControllerActionColumnConfig } from '../../component/actionColumnConfig/controller.jsx';
+export type ZActionColumnConfigProps = {
+  controllerRef?: (ref: ControllerActionColumnConfig) => void;
+} & ControllerActionColumnConfigProps;
+
+type ControllerInnerProps = TypeControllerInnerProps<
+  ControllerActionColumnConfigProps,
+  keyof typeof ControllerActionColumnConfig.$propsDefault
+>;
+declare module 'zova-module-basic-table' {
+  export interface ControllerActionColumnConfig {
+    $props: ControllerInnerProps;
+  }
+}
+
+export const ZActionColumnConfig = defineComponent((_props: ZActionColumnConfigProps) => {
+  useController(ControllerActionColumnConfig, undefined, undefined);
+  return () => {};
+}, prepareComponentOptions(ControllerActionColumnConfig.$componentOptions));
+declare module 'zova-module-a-bean' {
+  export interface IVonaComponentRecord {
+    'basic-table:actionColumnConfig': ControllerActionColumnConfigProps;
+  }
+}

package/zova/src/suite/cabloy-basic/modules/basic-table/src/.metadata/index.ts

@@ -1,5 +1,6 @@
 // eslint-disable
 /** controller: begin */
+export * from '../component/actionColumnConfig/controller.jsx';
 export * from '../component/actionCreate/controller.jsx';
 export * from '../component/actionDeleteBulk/controller.jsx';
 export * from '../component/table/controller.jsx';
@@ -11,6 +12,11 @@ declare module 'zova' {
 }
 declare module 'zova-module-basic-table' {
 
+        export interface ControllerActionColumnConfig {
+          /** @internal */
+          get scope(): ScopeModuleBasicTable;
+        }
+
         export interface ControllerActionCreate {
           /** @internal */
           get scope(): ScopeModuleBasicTable;
@@ -28,13 +34,15 @@ declare module 'zova-module-basic-table' {
 }
 /** controller: end */
 /** controller: begin */
-import { ControllerActionCreate } from '../component/actionCreate/controller.jsx';
-import { ControllerActionDeleteBulk } from '../component/actionDeleteBulk/controller.jsx';
-import { ControllerTable } from '../component/table/controller.jsx';
+import type { ControllerActionColumnConfig } from '../component/actionColumnConfig/controller.jsx';
+import type { ControllerActionCreate } from '../component/actionCreate/controller.jsx';
+import type { ControllerActionDeleteBulk } from '../component/actionDeleteBulk/controller.jsx';
+import type { ControllerTable } from '../component/table/controller.jsx';
 import 'zova';
 declare module 'zova' {
   export interface IBeanRecordLocal {
-    'basic-table.controller.actionCreate': ControllerActionCreate;
+    'basic-table.controller.actionColumnConfig': ControllerActionColumnConfig;
+'basic-table.controller.actionCreate': ControllerActionCreate;
 'basic-table.controller.actionDeleteBulk': ControllerActionDeleteBulk;
 'basic-table.controller.table': ControllerTable;
   }
@@ -42,6 +50,8 @@ declare module 'zova' {
 /** controller: end */
 
 /** components: begin */
+export * from './component/actionColumnConfig.js';
+import { ZActionColumnConfig } from './component/actionColumnConfig.js';
 export * from './component/actionCreate.js';
 import { ZActionCreate } from './component/actionCreate.js';
 export * from './component/actionDeleteBulk.js';
@@ -49,19 +59,22 @@ import { ZActionDeleteBulk } from './component/actionDeleteBulk.js';
 export * from './component/table.js';
 import { ZTable } from './component/table.js';
 export const components = {
-  'actionCreate': ZActionCreate,
+  'actionColumnConfig': ZActionColumnConfig,
+'actionCreate': ZActionCreate,
 'actionDeleteBulk': ZActionDeleteBulk,
 'table': ZTable,
 };
 import 'zova';
 declare module 'zova' {
 export interface IComponentRecord {
-  'basic-table:actionCreate': ControllerActionCreate;
+  'basic-table:actionColumnConfig': ControllerActionColumnConfig;
+'basic-table:actionCreate': ControllerActionCreate;
 'basic-table:actionDeleteBulk': ControllerActionDeleteBulk;
 'basic-table:table': ControllerTable;
 }
 export interface IZovaComponentRecord {
-  'basic-table:actionCreate': typeof ZActionCreate;
+  'basic-table:actionColumnConfig': typeof ZActionColumnConfig;
+'basic-table:actionCreate': typeof ZActionCreate;
 'basic-table:actionDeleteBulk': typeof ZActionDeleteBulk;
 'basic-table:table': typeof ZTable;
 }
@@ -84,7 +97,7 @@ declare module 'zova-module-basic-table' {
 }
 /** render: end */
 /** render: begin */
-import { RenderTable } from '../component/table/render.jsx';
+import type { RenderTable } from '../component/table/render.jsx';
 import 'zova';
 declare module 'zova' {
   export interface IBeanRecordLocal {
@@ -161,10 +174,10 @@ declare module 'zova-module-basic-table' {
 }
 /** tableCell: end */
 /** tableCell: begin */
-import { TableCellActionDelete } from '../bean/tableCell.actionDelete.jsx';
-import { TableCellActionOperationsRow } from '../bean/tableCell.actionOperationsRow.jsx';
-import { TableCellActionUpdate } from '../bean/tableCell.actionUpdate.jsx';
-import { TableCellActionView } from '../bean/tableCell.actionView.jsx';
+import type { TableCellActionDelete } from '../bean/tableCell.actionDelete.jsx';
+import type { TableCellActionOperationsRow } from '../bean/tableCell.actionOperationsRow.jsx';
+import type { TableCellActionUpdate } from '../bean/tableCell.actionUpdate.jsx';
+import type { TableCellActionView } from '../bean/tableCell.actionView.jsx';
 import 'zova';
 declare module 'zova' {
   export interface IBeanRecordGeneral {

package/zova/src/suite/cabloy-basic/modules/basic-table/src/component/actionColumnConfig/controller.tsx

@@ -0,0 +1,260 @@
+import type { IComponentOptions } from 'zova';
+import type {
+  IJsxRenderContextPage,
+  IResourceTableActionBulkPropsBase,
+  ISchemaObjectExtensionField,
+} from 'zova-module-a-openapi';
+
+import { BeanControllerBase, Use } from 'zova';
+import { Controller } from 'zova-module-a-bean';
+import { ZIcon } from 'zova-module-a-icon';
+import { ITableLayout } from 'zova-module-a-table';
+import { reconcileTableLayout } from 'zova-module-a-table';
+
+declare module 'zova-module-a-openapi' {
+  export interface IResourceTableActionBulkRecord {
+    'basic-table:actionColumnConfig'?: ControllerActionColumnConfigProps;
+  }
+}
+
+export interface ControllerActionColumnConfigProps extends IResourceTableActionBulkPropsBase {}
+
+@Controller()
+export class ControllerActionColumnConfig extends BeanControllerBase {
+  static $propsDefault = { class: 'btn join-item' };
+  static $componentOptions: IComponentOptions = { inheritAttrs: false, deepExtendDefault: true };
+
+  private _saving = false;
+  private _error: string | undefined;
+  private _reset = false;
+  private _draft: ITableLayout | undefined;
+
+  @Use({ injectionScope: 'host' })
+  $$renderContext: IJsxRenderContextPage;
+
+  get $$page() {
+    return this.$$renderContext.$$page;
+  }
+
+  get seed() {
+    return this.$$page.columnConfigSeed;
+  }
+
+  protected render() {
+    // const disabled =
+    //   this.$props.disabled === true || this.$props.dynamicDisabled === true || !this.seed;
+    const disabled = this.$props.disabled === true || this.$props.dynamicDisabled === true;
+    return (
+      <button
+        class={[this.$props.class, 'btn-square']}
+        type="button"
+        disabled={disabled}
+        aria-label={this.scope.locale.ColumnConfiguration()}
+        title={this.scope.locale.ColumnConfiguration()}
+        onClick={() => this._open()}
+      >
+        <ZIcon name="::settings" width={20}></ZIcon>
+      </button>
+    );
+  }
+
+  private _open() {
+    const seed = this.seed;
+    if (!seed) return;
+    this._error = undefined;
+    this._reset = false;
+    this._draft = this._cloneLayout(seed.layout);
+    const dialog = this.$appModal.dialog(
+      {
+        title: this.scope.locale.ColumnConfiguration(),
+        slotDefault: () => this._renderDialog(),
+        slotActions: modal => (
+          <>
+            {this._error && (
+              <span class="mr-auto text-sm text-error" role="alert">
+                {this._error}
+              </span>
+            )}
+            <button
+              class="btn btn-ghost"
+              type="button"
+              disabled={this._saving}
+              onClick={modal.close}
+            >
+              {this.scope.locale.Cancel()}
+            </button>
+            <button
+              class="btn btn-primary"
+              type="button"
+              disabled={this._saving}
+              onClick={() => this._save(dialog)}
+            >
+              {this._saving && <span class="loading loading-spinner loading-xs" />}
+              {this.scope.locale.Save()}
+            </button>
+          </>
+        ),
+      },
+      { closeOnBackdrop: false, closeOnEscape: false, maxWidth: 560, showCloseButton: true },
+    );
+  }
+
+  private _renderDialog() {
+    const draft = this._draft;
+    const properties = this.seed?.properties ?? [];
+    return (
+      <div class="max-h-[60vh] space-y-2 overflow-y-auto">
+        <div class="text-sm text-base-content/70">{this.scope.locale.Columns()}</div>
+        {draft?.columns.map((column, index) => {
+          const property = properties.find(item => item.key === column.key);
+          const previous = draft.columns[index - 1];
+          const next = draft.columns[index + 1];
+          const canMoveUp =
+            !!previous && this._sameFixedRegion(properties, column.key, previous.key);
+          const canMoveDown = !!next && this._sameFixedRegion(properties, column.key, next.key);
+          return (
+            <div
+              key={column.key}
+              class="flex items-center gap-2 rounded-box border border-base-300 p-2"
+            >
+              <input
+                class="checkbox checkbox-sm"
+                type="checkbox"
+                checked={column.visible}
+                aria-label={`${this.scope.locale.Visible()} ${property?.title ?? column.key}`}
+                onChange={(event: Event) => {
+                  this._reset = false;
+                  column.visible = (event.target as HTMLInputElement).checked;
+                }}
+              />
+              <span class="min-w-0 flex-1 truncate">{property?.title ?? column.key}</span>
+              <input
+                class="input input-bordered input-sm w-20"
+                type="number"
+                min="1"
+                max="2000"
+                value={typeof column.width === 'number' ? column.width : ''}
+                aria-label={`${this.scope.locale.Width()} ${property?.title ?? column.key}`}
+                onInput={(event: Event) => {
+                  this._reset = false;
+                  const value = (event.target as HTMLInputElement).value;
+                  column.width = value === '' ? 'auto' : Number(value);
+                }}
+              />
+              <label class="flex items-center gap-1 text-xs">
+                <input
+                  class="checkbox checkbox-sm"
+                  type="checkbox"
+                  checked={column.width === 'auto'}
+                  aria-label={`${this.scope.locale.Auto()} ${property?.title ?? column.key}`}
+                  onChange={(event: Event) => {
+                    if ((event.target as HTMLInputElement).checked) {
+                      this._reset = false;
+                      column.width = 'auto';
+                    }
+                  }}
+                />
+                {this.scope.locale.Auto()}
+              </label>
+              <button
+                class="btn btn-ghost btn-xs"
+                type="button"
+                disabled={!canMoveUp || this._saving}
+                aria-label={this.scope.locale.MoveUp()}
+                onClick={() => this._moveColumn(index, -1)}
+              >
+                ↑
+              </button>
+              <button
+                class="btn btn-ghost btn-xs"
+                type="button"
+                disabled={!canMoveDown || this._saving}
+                aria-label={this.scope.locale.MoveDown()}
+                onClick={() => this._moveColumn(index, 1)}
+              >
+                ↓
+              </button>
+            </div>
+          );
+        })}
+        <button
+          class="btn btn-outline btn-sm"
+          type="button"
+          disabled={this._saving}
+          onClick={() => this._resetDraft()}
+        >
+          {this.scope.locale.Reset() as string}
+        </button>
+      </div>
+    );
+  }
+
+  private _cloneLayout(layout: ITableLayout): ITableLayout {
+    return {
+      version: 1,
+      ...(layout.schemaFingerprint ? { schemaFingerprint: layout.schemaFingerprint } : {}),
+      columns: layout.columns.map(column => ({ ...column })),
+    };
+  }
+
+  private _sameFixedRegion(
+    properties: readonly ISchemaObjectExtensionField[],
+    leftKey: string,
+    rightKey: string,
+  ) {
+    const left = properties.find(item => item.key === leftKey)?.rest?.fixed;
+    const right = properties.find(item => item.key === rightKey)?.rest?.fixed;
+    return (left ?? 'center') === (right ?? 'center');
+  }
+
+  private _moveColumn(index: number, offset: -1 | 1) {
+    const columns = this._draft?.columns;
+    const properties = this.seed?.properties;
+    if (!columns || !properties) return;
+    const target = index + offset;
+    if (
+      target < 0 ||
+      target >= columns.length ||
+      !this._sameFixedRegion(properties, columns[index].key, columns[target].key)
+    ) {
+      return;
+    }
+    this._reset = false;
+    [columns[index], columns[target]] = [columns[target], columns[index]];
+  }
+
+  private _resetDraft() {
+    const seed = this.seed;
+    if (!seed || this._saving) return;
+    this._reset = true;
+    this._draft = reconcileTableLayout(seed.properties);
+  }
+
+  private async _save(dialog: { close: () => void }) {
+    const seed = this.seed;
+    const draft = this._draft;
+    if (!seed || !draft || this._saving) return;
+    this._saving = true;
+    this._error = undefined;
+    try {
+      if (this._reset) {
+        await this.$$page.resetColumnConfig();
+      } else {
+        await this.$$page.saveColumnConfig(this._normalizeLayout(seed.properties, draft));
+      }
+      this._reset = false;
+      dialog.close();
+    } catch (error) {
+      this._error = error instanceof Error ? error.message : String(error);
+    } finally {
+      this._saving = false;
+    }
+  }
+
+  private _normalizeLayout(
+    properties: readonly ISchemaObjectExtensionField[],
+    draft: ITableLayout,
+  ): ITableLayout {
+    return reconcileTableLayout(properties, draft);
+  }
+}

package/zova/src/suite/cabloy-basic/modules/basic-table/src/component/table/render.tsx

@@ -22,6 +22,7 @@ export class RenderTable<TData extends {} = {}> extends BeanRenderBase {
         tableScope={this.$props.tableScope}
         getColumns={this.$props.getColumns}
         getRowId={this.$props.getRowId}
+        layout={this.$props.layout}
         controllerRef={ref => {
           this.$props?.tableRef?.(ref);
         }}
@@ -35,10 +36,9 @@ export class RenderTable<TData extends {} = {}> extends BeanRenderBase {
   private _getColumnStyle(column: any): CSSProperties {
     const rest = (column.columnDef.meta as any)?.rest;
     const fixed = column.getIsPinned();
-    const width = rest?.width ? `${rest.width}px` : undefined;
+    const width = column.getSize();
     return {
-      width,
-      minWidth: width,
+      ...(typeof rest?.width === 'number' ? { width: `${width}px`, minWidth: `${width}px` } : {}),
       textAlign: rest?.align,
       position: fixed ? ('sticky' as const) : undefined,
       left: fixed === 'left' ? `${column.getStart('left')}px` : undefined,

package/zova/src/suite/cabloy-basic/modules/basic-table/src/config/locale/en-us.ts

@@ -5,4 +5,14 @@ export default {
   SelectRow: 'Select row %s',
   DeleteBulk: 'Bulk Delete',
   DeleteBulkConfirm: 'Are you sure you want to bulk delete %d selected items?',
+  ColumnConfiguration: 'Column configuration',
+  Columns: 'Columns',
+  Visible: 'Visible',
+  Width: 'Width',
+  Auto: 'Auto',
+  MoveUp: 'Move up',
+  MoveDown: 'Move down',
+  Save: 'Save',
+  Cancel: 'Cancel',
+  Reset: 'Reset',
 };