Merge pull request #1103 from objectstack-ai/copilot/fix-columns-normalization

Author: hotlong

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- **ObjectDataTable: columns now support `string[]` shorthand** (`@object-ui/plugin-dashboard`): `ObjectDataTable` now normalizes `columns` entries so that both `string[]` (e.g. `['name', 'close_date']`) and `object[]` formats are accepted. String entries are automatically converted to `{ header, accessorKey }` objects with title-cased headers derived from snake_case and camelCase field names. Previously, passing a `string[]` caused the downstream `data-table` renderer to crash when accessing `col.accessorKey` on a plain string. Mixed arrays (some strings, some objects) are also handled correctly. Includes 8 new unit tests.
+
 ### Fixed
 
 - **i18n loadLanguage Not Compatible with Spec REST API Response Format** (`apps/console`): Fixed `loadLanguage` in `apps/console/src/main.tsx` to correctly unwrap the `@objectstack/spec` REST API envelope `{ data: { locale, translations } }`. Previously, the function returned the raw JSON response, which meant `useObjectLabel` and `useObjectTranslation` hooks received a wrapped object instead of the flat translation map, causing business object and field labels (e.g., CRM contact/account) to fall back to English. The fix extracts `data.translations` when the spec envelope is detected, while preserving backward compatibility with mock/dev environments that return flat translation objects. Includes 6 unit tests covering spec envelope unwrapping, flat fallback, HTTP errors, network failures, and edge cases.

packages/plugin-dashboard/src/ObjectDataTable.tsx

@@ -29,6 +29,39 @@ export interface ObjectDataTableProps {
   className?: string;
 }
 
+/** A column definition after normalization, with header and accessor key. */
+interface NormalizedColumn {
+  header: string;
+  accessorKey: string;
+  [key: string]: any;
+}
+
+/**
+ * Normalize columns to support both string[] shorthand and object[] formats.
+ *
+ * - `string[]` entries are converted to `{ header, accessorKey }` objects,
+ *   handling both snake_case and camelCase for header generation.
+ * - Object entries are returned as-is.
+ */
+export function normalizeColumns(columns: (string | Record<string, any>)[]): NormalizedColumn[] {
+  return columns.map((col) => {
+    if (typeof col === 'string') {
+      return {
+        header: col
+          // snake_case → spaces
+          .replace(/_/g, ' ')
+          // camelCase → spaces before uppercase letters
+          .replace(/([A-Z])/g, ' $1')
+          .trim()
+          // Title Case each word
+          .replace(/\b\w/g, (c: string) => c.toUpperCase()),
+        accessorKey: col,
+      };
+    }
+    return col;
+  });
+}
+
 /**
  * ObjectDataTable — Async-aware wrapper for data-table.
  *
@@ -101,7 +134,9 @@ export const ObjectDataTable: React.FC<ObjectDataTableProps> = ({ schema, dataSo
 
   // Auto-derive columns from data keys when none are provided
   const derivedColumns = useMemo(() => {
-    if (schema.columns && schema.columns.length > 0) return schema.columns;
+    if (schema.columns && schema.columns.length > 0) {
+      return normalizeColumns(schema.columns);
+    }
     if (finalData.length === 0) return [];
     // Exclude internal/private fields (prefixed with '_') from auto-derived columns
     const keys = Object.keys(finalData[0]).filter(k => !k.startsWith('_'));

packages/plugin-dashboard/src/__tests__/ObjectDataTable.test.tsx

@@ -9,7 +9,7 @@
 import { describe, it, expect, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
-import { ObjectDataTable } from '../ObjectDataTable';
+import { ObjectDataTable, normalizeColumns } from '../ObjectDataTable';
 import { SchemaRendererProvider } from '@object-ui/react';
 
 describe('ObjectDataTable', () => {
@@ -119,4 +119,93 @@ describe('ObjectDataTable', () => {
 
     expect(dataSource.find).not.toHaveBeenCalled();
   });
+
+  it('should normalize string[] columns without crashing', () => {
+    const schema = {
+      ...baseSchema,
+      columns: ['name', 'amount', 'close_date'],
+      data: [
+        { name: 'Deal A', amount: 1000, close_date: '2025-01-01' },
+        { name: 'Deal B', amount: 2000, close_date: '2025-06-01' },
+      ],
+    };
+
+    // Should not crash when columns are strings
+    const { container } = render(
+      <SchemaRendererProvider>
+        <ObjectDataTable schema={schema} />
+      </SchemaRendererProvider>,
+    );
+
+    expect(container).toBeDefined();
+  });
+
+  it('should pass through object[] columns unchanged', () => {
+    const schema = {
+      ...baseSchema,
+      columns: [
+        { header: 'Name', accessorKey: 'name' },
+        { header: 'Amount', accessorKey: 'amount' },
+      ],
+      data: [
+        { name: 'Deal A', amount: 1000 },
+      ],
+    };
+
+    const { container } = render(
+      <SchemaRendererProvider>
+        <ObjectDataTable schema={schema} />
+      </SchemaRendererProvider>,
+    );
+
+    expect(container).toBeDefined();
+  });
+});
+
+describe('normalizeColumns', () => {
+  it('should convert snake_case string to title-cased header', () => {
+    const result = normalizeColumns(['close_date']);
+    expect(result).toEqual([{ header: 'Close Date', accessorKey: 'close_date' }]);
+  });
+
+  it('should convert camelCase string to title-cased header', () => {
+    const result = normalizeColumns(['firstName']);
+    expect(result).toEqual([{ header: 'First Name', accessorKey: 'firstName' }]);
+  });
+
+  it('should convert simple string to capitalized header', () => {
+    const result = normalizeColumns(['name']);
+    expect(result).toEqual([{ header: 'Name', accessorKey: 'name' }]);
+  });
+
+  it('should handle multiple string columns', () => {
+    const result = normalizeColumns(['name', 'total_amount', 'createdAt']);
+    expect(result).toEqual([
+      { header: 'Name', accessorKey: 'name' },
+      { header: 'Total Amount', accessorKey: 'total_amount' },
+      { header: 'Created At', accessorKey: 'createdAt' },
+    ]);
+  });
+
+  it('should pass through object columns unchanged', () => {
+    const cols = [
+      { header: 'Custom Name', accessorKey: 'name' },
+      { header: 'Amount ($)', accessorKey: 'amount' },
+    ];
+    const result = normalizeColumns(cols);
+    expect(result).toEqual(cols);
+  });
+
+  it('should handle mixed string and object columns', () => {
+    const result = normalizeColumns([
+      'name',
+      { header: 'Custom Amount', accessorKey: 'amount' },
+      'close_date',
+    ]);
+    expect(result).toEqual([
+      { header: 'Name', accessorKey: 'name' },
+      { header: 'Custom Amount', accessorKey: 'amount' },
+      { header: 'Close Date', accessorKey: 'close_date' },
+    ]);
+  });
 });