Merge pull request #782 from objectstack-ai/copilot/implement-column-features

Author: hotlong

ROADMAP.md

@@ -688,8 +688,8 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 - [x] `quickFilters` structure reconciliation: Auto-normalizes spec `{ field, operator, value }` format into ObjectUI `{ id, label, filters[] }` format. Both formats supported simultaneously. Dual-format type union (`QuickFilterItem = ObjectUIQuickFilterItem | SpecQuickFilterItem`) exported from `@object-ui/types`. Standalone `normalizeQuickFilter()` / `normalizeQuickFilters()` adapter functions in `@object-ui/core`. Bridge (`list-view.ts`) normalizes at spec→SchemaNode transform time. Spec shorthand operators (`eq`, `ne`, `gt`, `gte`, `lt`, `lte`) mapped to ObjectStack AST operators. Mixed-format arrays handled transparently.
 - [x] `conditionalFormatting` expression reconciliation: Supports spec `{ condition, style }` format alongside ObjectUI field/operator/value rules. `condition` is treated as alias for `expression`, `style` object merged into CSS properties.
 - [x] `exportOptions` schema reconciliation: Accepts both spec `string[]` format (e.g., `['csv', 'xlsx']`) and ObjectUI object format `{ formats, maxRecords, includeHeaders, fileNamePrefix }`.
-- [x] Column `pinned`: `pinned` property added to ListViewSchema column type. Bridge passes through to ObjectGrid which supports `frozenColumns`.
-- [x] Column `summary`: `summary` property added to ListViewSchema column type. Bridge passes through for aggregation rendering.
+- [x] Column `pinned`: `pinned` property added to ListViewSchema column type. Bridge passes through to ObjectGrid which supports `frozenColumns`. ObjectGrid reorders columns (left-pinned first, right-pinned last with sticky CSS). Zod schema updated with `pinned` field. `useColumnSummary` hook created.
+- [x] Column `summary`: `summary` property added to ListViewSchema column type. Bridge passes through for aggregation rendering. ObjectGrid renders summary footer with count/sum/avg/min/max aggregations via `useColumnSummary` hook. Zod schema updated with `summary` field.
 - [x] Column `link`: ObjectGrid renders click-to-navigate buttons on link-type columns with `navigation.handleClick`. Primary field auto-linked.
 - [x] Column `action`: ObjectGrid renders action dispatch buttons via `executeAction` on action-type columns.
 

packages/plugin-grid/src/ObjectGrid.tsx

@@ -35,6 +35,7 @@ import { Edit, Trash2, MoreVertical, ChevronRight, ChevronDown, Download, Rows2,
 import { useRowColor } from './useRowColor';
 import { useGroupedData } from './useGroupedData';
 import { GroupRow } from './GroupRow';
+import { useColumnSummary } from './useColumnSummary';
 
 export interface ObjectGridProps {
   schema: ObjectGridSchema;
@@ -352,6 +353,16 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   // --- Grouping support ---
   const { groups, isGrouped, toggleGroup } = useGroupedData(schema.grouping, data);
 
+  // --- Column summary support ---
+  const summaryColumns = React.useMemo(() => {
+    const cols = normalizeColumns(schema.columns);
+    if (cols && cols.length > 0 && typeof cols[0] === 'object') {
+      return cols as ListColumn[];
+    }
+    return undefined;
+  }, [schema.columns]);
+  const { summaries, hasSummary } = useColumnSummary(summaryColumns, data);
+
   const generateColumns = useCallback(() => {
     // Map field type to column header icon (Airtable-style)
     const getTypeIcon = (fieldType: string | null): React.ReactNode => {
@@ -474,7 +485,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                     <button
                       type="button"
                       className="text-primary font-medium underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
-                      data-testid={isPrimaryField ? 'primary-field-link' : undefined}
+                      data-testid={isPrimaryField ? 'primary-field-link' : 'link-cell'}
                       onClick={(e) => {
                         e.stopPropagation();
                         navigation.handleClick(row);
@@ -494,7 +505,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                     <button
                       type="button"
                       className="text-primary font-medium underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
-                      data-testid={isPrimaryField ? 'primary-field-link' : undefined}
+                      data-testid={isPrimaryField ? 'primary-field-link' : 'link-cell'}
                       onClick={(e) => {
                         e.stopPropagation();
                         navigation.handleClick(row);
@@ -505,15 +516,14 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                   );
                 };
               } else if (col.action) {
-                // Action column: clicking executes the registered action
+                // Action column: render as action button
                 cellRenderer = (value: any, row: any) => {
-                  const displayContent = CellRenderer
-                    ? <CellRenderer value={value} field={{ name: col.field, type: inferredType || 'text' } as any} />
-                    : (value != null && value !== '' ? String(value) : <span className="text-muted-foreground/50 text-xs italic">—</span>);
                   return (
-                    <button
-                      type="button"
-                      className="text-primary underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 text-xs"
+                      data-testid="action-cell"
                       onClick={(e) => {
                         e.stopPropagation();
                         executeAction({
@@ -522,8 +532,8 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                         });
                       }}
                     >
-                      {displayContent}
-                    </button>
+                      {formatActionLabel(col.action!)}
+                    </Button>
                   );
                 };
               } else if (CellRenderer) {
@@ -580,6 +590,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                 ...(col.resizable !== undefined && { resizable: col.resizable }),
                 ...(col.wrap !== undefined && { wrap: col.wrap }),
                 ...(cellRenderer && { cell: cellRenderer }),
+                ...(col.pinned && { pinned: col.pinned }),
               };
             });
         }
@@ -781,6 +792,30 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     },
   ] : persistedColumns;
 
+  // --- Pinned column reordering ---
+  // Reorder: pinned:'left' first, unpinned middle, pinned:'right' last
+  const pinnedLeftCols = columnsWithActions.filter((c: any) => c.pinned === 'left');
+  const pinnedRightCols = columnsWithActions.filter((c: any) => c.pinned === 'right');
+  const unpinnedCols = columnsWithActions.filter((c: any) => !c.pinned);
+  const hasPinnedColumns = pinnedLeftCols.length > 0 || pinnedRightCols.length > 0;
+  const rightPinnedClasses = 'sticky right-0 z-10 bg-background border-l border-border';
+  const orderedColumns = hasPinnedColumns
+    ? [
+        ...pinnedLeftCols,
+        ...unpinnedCols,
+        ...pinnedRightCols.map((col: any) => ({
+          ...col,
+          className: [col.className, rightPinnedClasses].filter(Boolean).join(' '),
+          cellClassName: [col.cellClassName, rightPinnedClasses].filter(Boolean).join(' '),
+        })),
+      ]
+    : columnsWithActions;
+
+  // Calculate frozenColumns: if pinned columns exist, use left-pinned count; otherwise use schema default
+  const effectiveFrozenColumns = hasPinnedColumns
+    ? pinnedLeftCols.length
+    : (schema.frozenColumns ?? 1);
+
   // Determine selection mode (support both new and legacy formats)
   let selectionMode: 'none' | 'single' | 'multiple' | boolean = false;
   if (schema.selection?.type) {
@@ -807,7 +842,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   const dataTableSchema: any = {
     type: 'data-table',
     caption: schema.label || schema.title,
-    columns: columnsWithActions,
+    columns: orderedColumns,
     data,
     pagination: paginationEnabled,
     pageSize: pageSize,
@@ -833,7 +868,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     showAddRow: !!operations?.create,
     onAddRecord: onAddRecord,
     rowClassName: schema.rowColor ? (row: any, _idx: number) => getRowClassName(row) : undefined,
-    frozenColumns: schema.frozenColumns ?? 1,
+    frozenColumns: effectiveFrozenColumns,
     onSelectionChange: onRowSelect,
     onRowClick: navigation.handleClick,
     onCellChange: onCellChange,
@@ -1197,6 +1232,24 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     );
   };
 
+  // Summary footer row
+  const summaryFooter = hasSummary ? (
+    <div className="border-t bg-muted/30 px-2 py-1.5" data-testid="column-summary-footer">
+      <div className="flex gap-4 text-xs text-muted-foreground font-medium">
+        {orderedColumns
+          .filter((col: any) => summaries.has(col.accessorKey))
+          .map((col: any) => {
+            const summary = summaries.get(col.accessorKey)!;
+            return (
+              <span key={col.accessorKey} data-testid={`summary-${col.accessorKey}`}>
+                {col.header}: {summary.label}
+              </span>
+            );
+          })}
+      </div>
+    </div>
+  ) : null;
+
   // Render grid content: grouped (multiple tables with headers) or flat (single table)
   const gridContent = isGrouped ? (
     <div className="space-y-2">
@@ -1215,7 +1268,10 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
       ))}
     </div>
   ) : (
-    <SchemaRenderer schema={dataTableSchema} />
+    <>
+      <SchemaRenderer schema={dataTableSchema} />
+      {summaryFooter}
+    </>
   );
 
   // For split mode, wrap the grid in the ResizablePanelGroup