{value.map((val, idx) => {
const option = options.find(opt => opt.value === val);
- const label = option?.label || val;
+ const label = option?.label || humanizeLabel(String(val));
const colorClasses = getBadgeColorClasses(option?.color, val);
return (
@@ -397,7 +417,7 @@ export function SelectCellRenderer({ value, field }: CellRendererProps): React.R
// Handle single value
const option = options.find(opt => opt.value === value);
- const label = option?.label || value;
+ const label = option?.label || humanizeLabel(String(value));
const colorClasses = getBadgeColorClasses(option?.color, value);
return (
diff --git a/packages/plugin-grid/src/ObjectGrid.tsx b/packages/plugin-grid/src/ObjectGrid.tsx
index 1cdfab49b..3033513ab 100644
--- a/packages/plugin-grid/src/ObjectGrid.tsx
+++ b/packages/plugin-grid/src/ObjectGrid.tsx
@@ -24,7 +24,7 @@
import React, { useEffect, useState, useCallback, useMemo } from 'react';
import type { ObjectGridSchema, DataSource, ListColumn, ViewData } from '@object-ui/types';
import { SchemaRenderer, useDataScope, useNavigationOverlay, useAction } from '@object-ui/react';
-import { getCellRenderer, formatCurrency, formatCompactCurrency, formatDate, formatPercent } from '@object-ui/fields';
+import { getCellRenderer, formatCurrency, formatCompactCurrency, formatDate, formatPercent, humanizeLabel } from '@object-ui/fields';
import {
Badge, Button, NavigationOverlay,
Popover, PopoverContent, PopoverTrigger,
@@ -508,9 +508,29 @@ export const ObjectGrid: React.FC
= ({
if (cols.length > 0 && typeof cols[0] === 'object' && cols[0] !== null) {
const firstCol = cols[0] as any;
- // Already in data-table format - use as-is
+ // Already in data-table format - apply type inference for columns without custom cell renderers
if ('accessorKey' in firstCol) {
- return cols;
+ return (cols as any[]).map((col) => {
+ if (col.cell) return col; // already has custom renderer
+
+ const syntheticCol: ListColumn = { field: col.accessorKey, label: col.header, type: col.type };
+ const inferredType = inferColumnType(syntheticCol);
+ if (!inferredType) return col;
+
+ const CellRenderer = getCellRenderer(inferredType);
+ const fieldMeta: Record = { name: col.accessorKey, type: inferredType };
+
+ if (inferredType === 'select') {
+ const uniqueValues = Array.from(new Set(data.map(row => row[col.accessorKey]).filter(Boolean)));
+ fieldMeta.options = uniqueValues.map((v: any) => ({ value: v, label: humanizeLabel(String(v)) }));
+ }
+
+ return {
+ ...col,
+ headerIcon: getTypeIcon(inferredType),
+ cell: (value: any) => ,
+ };
+ });
}
// ListColumn format - convert to data-table format with full feature support
@@ -532,7 +552,7 @@ export const ObjectGrid: React.FC = ({
if (inferredType === 'select' && !(col as any).options) {
// Auto-generate options from unique data values for inferred select fields
const uniqueValues = Array.from(new Set(data.map(row => row[col.field]).filter(Boolean)));
- fieldMeta.options = uniqueValues.map(v => ({ value: v, label: String(v) }));
+ fieldMeta.options = uniqueValues.map(v => ({ value: v, label: humanizeLabel(String(v)) }));
}
if ((col as any).options) {
fieldMeta.options = (col as any).options;
diff --git a/packages/plugin-grid/src/__tests__/accessorKey-inference.test.tsx b/packages/plugin-grid/src/__tests__/accessorKey-inference.test.tsx
new file mode 100644
index 000000000..4c4f63076
--- /dev/null
+++ b/packages/plugin-grid/src/__tests__/accessorKey-inference.test.tsx
@@ -0,0 +1,132 @@
+/**
+ * AccessorKey Inference Tests
+ *
+ * Tests that accessorKey-format columns receive type inference
+ * via inferColumnType() + getCellRenderer(), matching the behavior
+ * of ListColumn (field) format columns.
+ */
+import { describe, it, expect } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+import { ObjectGrid } from '../ObjectGrid';
+import { registerAllFields } from '@object-ui/fields';
+import { ActionProvider } from '@object-ui/react';
+
+registerAllFields();
+
+// --- Mock Data with various types ---
+const mockData = [
+ {
+ _id: '1',
+ name: 'Project Alpha',
+ status: 'in_progress',
+ priority: 'high',
+ progress: 75,
+ start_date: '2024-02-01T00:00:00.000Z',
+ },
+ {
+ _id: '2',
+ name: 'Project Beta',
+ status: 'completed',
+ priority: 'low',
+ progress: 100,
+ start_date: '2024-03-15T00:00:00.000Z',
+ },
+];
+
+// Helper: Render ObjectGrid with accessorKey-format columns
+function renderAccessorGrid(columns: any[], data?: any[]) {
+ const schema: any = {
+ type: 'object-grid' as const,
+ objectName: 'test_object',
+ columns,
+ data: { provider: 'value', items: data || mockData },
+ };
+
+ return render(
+
+
+
+ );
+}
+
+// =========================================================================
+// 1. accessorKey columns get type inference
+// =========================================================================
+describe('accessorKey-format: type inference', () => {
+ it('should infer select type for status field and render badges', async () => {
+ renderAccessorGrid([
+ { header: 'Name', accessorKey: 'name' },
+ { header: 'Status', accessorKey: 'status' },
+ ]);
+
+ await waitFor(() => {
+ expect(screen.getByText('Name')).toBeInTheDocument();
+ });
+
+ // Status should be inferred as select and render humanized badges
+ expect(screen.getByText('In Progress')).toBeInTheDocument();
+ expect(screen.getByText('Completed')).toBeInTheDocument();
+ });
+
+ it('should infer date type for date fields', async () => {
+ renderAccessorGrid([
+ { header: 'Name', accessorKey: 'name' },
+ { header: 'Start Date', accessorKey: 'start_date' },
+ ]);
+
+ await waitFor(() => {
+ expect(screen.getByText('Name')).toBeInTheDocument();
+ });
+
+ // Date fields should NOT show raw ISO strings
+ expect(screen.queryByText('2024-02-01T00:00:00.000Z')).not.toBeInTheDocument();
+ });
+
+ it('should infer percent type for progress field and render progress bar', async () => {
+ renderAccessorGrid([
+ { header: 'Name', accessorKey: 'name' },
+ { header: 'Progress', accessorKey: 'progress' },
+ ]);
+
+ await waitFor(() => {
+ expect(screen.getByText('Name')).toBeInTheDocument();
+ });
+
+ // Progress should render as percentage with progress bar
+ expect(screen.getByText('75%')).toBeInTheDocument();
+ const bars = screen.getAllByRole('progressbar');
+ expect(bars.length).toBeGreaterThan(0);
+ });
+
+ it('should NOT override columns that already have a cell renderer', async () => {
+ const customRenderer = (value: any) => {value}-custom;
+ renderAccessorGrid([
+ { header: 'Name', accessorKey: 'name' },
+ { header: 'Status', accessorKey: 'status', cell: customRenderer },
+ ]);
+
+ await waitFor(() => {
+ expect(screen.getByText('Name')).toBeInTheDocument();
+ });
+
+ // Custom renderer should be preserved
+ expect(screen.getByText('in_progress-custom')).toBeInTheDocument();
+ });
+
+ it('should pass through columns with explicit type', async () => {
+ renderAccessorGrid([
+ { header: 'Name', accessorKey: 'name' },
+ { header: 'Priority', accessorKey: 'priority', type: 'select' },
+ ]);
+
+ await waitFor(() => {
+ expect(screen.getByText('Name')).toBeInTheDocument();
+ });
+
+ // Priority with explicit select type should render as humanized badge
+ expect(screen.getByText('High')).toBeInTheDocument();
+ expect(screen.getByText('Low')).toBeInTheDocument();
+ });
+});