cabloy 5.1.168 → 5.1.170

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-resource/src/component/formFieldResourcePicker/controller.tsx

@@ -18,6 +18,7 @@ import { ZFormField, ZFormFieldPreset } from 'zova-module-a-form';
 import { $QueryEnsureLoaded } from 'zova-module-a-model';
 import { resolvePickerSelectionMax } from 'zova-module-basic-page';
 import { ZSelect, ZSelectProps } from 'zova-module-basic-select';
+import { resourcePickerPageHostKey } from 'zova-module-rest-resource';
 import { ModelResource } from 'zova-module-rest-resource';
 
 import type { TypeResourcePickerSelectionMode } from '../../lib/resourcePicker.js';
@@ -26,6 +27,7 @@ import {
   normalizeResourcePickerIds,
   resolveResourcePickerValue,
 } from '../../lib/resourcePicker.js';
+import { createResourcePickerPageHost } from '../../lib/resourcePickerPageHost.js';
 
 export type TypeResourcePickerMode = 'select' | 'routedDialog';
 
@@ -227,6 +229,9 @@ export class ControllerFormFieldResourcePicker extends BeanControllerBase {
         },
         props: options,
         session,
+        createPageHostProviders: dialog => ({
+          [resourcePickerPageHostKey]: createResourcePickerPageHost(dialog),
+        }),
       });
       const result = await handle.result;
       if (!result) return;

package/zova/src/suite/cabloy-basic/modules/basic-resource/src/lib/resourcePickerPageHost.ts

@@ -0,0 +1,64 @@
+import type {
+  IResourceBlockOptionsBase,
+  IResourceRenderBlockOptionsBlock,
+  IResourceTableSelectionPayload,
+} from 'zova-module-a-openapi';
+import type { IRoutedDialogContext } from 'zova-module-basic-app';
+import type {
+  IResourcePickerPageContext,
+  IResourcePickerPageHost,
+} from 'zova-module-rest-resource';
+
+import { deepExtend } from 'zova';
+
+export function createResourcePickerPageHost(
+  dialog: IRoutedDialogContext<
+    IResourceTableSelectionPayload,
+    IResourcePickerPageContext['options'],
+    IResourcePickerPageContext['session']
+  >,
+): IResourcePickerPageHost {
+  const options = dialog.props;
+  const session = dialog.session;
+  if (!options || !session) {
+    throw new Error('resource picker requires dialog options and session');
+  }
+  return {
+    options,
+    session,
+    resolve: selection => dialog.resolve(selection),
+    cancel: () => dialog.cancel(),
+    prepareBlocks: (blocks, pickerContext) => {
+      if (!blocks) return;
+      return blocks.map(block => {
+        if (block.render !== 'basic-page:blockPage') return block;
+        return {
+          ...block,
+          options: deepExtend({}, block.options, {
+            actionPath: pickerContext.options.actionPath,
+            queryFixed: pickerContext.options.query,
+            selectionPolicy: 'always',
+            selectionMode: pickerContext.options.selectionMode,
+            selectionMax: pickerContext.options.selectionMax,
+            selectedIds: pickerContext.session.selectedIds,
+            selectedRows: pickerContext.session.selectedRows,
+            onSelectionChange: (selection: IResourceTableSelectionPayload) => {
+              pickerContext.session.selectedIds = [...selection.ids];
+              pickerContext.session.selectedRows = selection.rows.map(row => ({ ...row }));
+            },
+            blocks: [
+              ...((
+                block.options as IResourceBlockOptionsBase & {
+                  blocks?: IResourceRenderBlockOptionsBlock[];
+                }
+              ).blocks ?? []),
+              {
+                render: 'basic-resource:blockResourcePickerActions',
+              },
+            ],
+          }),
+        };
+      });
+    },
+  };
+}

package/zova/src/suite/cabloy-basic/modules/basic-resource/test/lib/resourcePickerPageHost.test.ts

@@ -0,0 +1,94 @@
+import type { IResourceRenderBlockOptionsBlock } from 'zova-module-a-openapi';
+
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import { createResourcePickerPageHost } from '../../src/lib/resourcePickerPageHost.ts';
+
+function createDialog() {
+  const resolved: unknown[] = [];
+  let cancelled = false;
+  const dialog = {
+    id: 1,
+    props: {
+      resource: 'training-student:student',
+      selectionMode: 'multiple' as const,
+      selectionMax: 2,
+    },
+    session: {
+      selectedIds: [1],
+      selectedRows: [{ id: 1, name: 'One' }],
+    },
+    resolve(value: unknown) {
+      resolved.push(value);
+    },
+    cancel() {
+      cancelled = true;
+    },
+  };
+  return {
+    dialog,
+    resolved,
+    get cancelled() {
+      return cancelled;
+    },
+  };
+}
+
+test('Basic picker host adapts only the Basic page block and preserves picker state', () => {
+  const { dialog } = createDialog();
+  const host = createResourcePickerPageHost(dialog);
+  const unrelated: IResourceRenderBlockOptionsBlock = {
+    render: 'other:block' as never,
+    options: { class: 'other' },
+  };
+  const basicPage: IResourceRenderBlockOptionsBlock = {
+    render: 'basic-page:blockPage' as never,
+    options: {
+      blocks: [{ render: 'basic-page:blockTable' as never }],
+    } as any,
+  };
+
+  const context = {
+    options: dialog.props,
+    session: dialog.session,
+    dialog: host,
+  };
+  const blocks = host.prepareBlocks([unrelated, basicPage], context)!;
+
+  assert.equal(blocks[0], unrelated);
+  assert.deepEqual(blocks[1].options, {
+    actionPath: undefined,
+    queryFixed: undefined,
+    selectionPolicy: 'always',
+    selectionMode: 'multiple',
+    selectionMax: 2,
+    selectedIds: [1],
+    selectedRows: [{ id: 1, name: 'One' }],
+    blocks: [
+      { render: 'basic-page:blockTable' },
+      { render: 'basic-resource:blockResourcePickerActions' },
+    ],
+  });
+
+  const onSelectionChange = (blocks[1].options as any).onSelectionChange as (
+    selection: any,
+  ) => void;
+  onSelectionChange({ ids: [2], rows: [{ id: 2, name: 'Two' }], count: 1 });
+  assert.deepEqual(dialog.session, {
+    selectedIds: [2],
+    selectedRows: [{ id: 2, name: 'Two' }],
+  });
+});
+
+test('Basic picker host forwards resolve and cancel', () => {
+  const { dialog, resolved, cancelled } = createDialog();
+  const host = createResourcePickerPageHost(dialog);
+  const selection = { ids: [1], rows: [{ id: 1 }], count: 1 };
+
+  host.resolve(selection);
+  host.cancel();
+
+  assert.deepEqual(resolved, [selection]);
+  assert.equal(cancelled, true);
+});

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',
 };