Merge pull request #487 from objectstack-ai/copilot/optimize-list-view-formatting

hotlong · web-flow · commit a8392ef058ac · 2026-02-13T14:14:45.000+08:00
diff --git a/packages/components/src/renderers/complex/data-table.tsx b/packages/components/src/renderers/complex/data-table.tsx
@@ -601,7 +601,15 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                 return (
                   <TableHead
                     key={col.accessorKey}
-                    className={`${col.className || ''} ${sortable && col.sortable !== false ? 'cursor-pointer select-none' : ''} ${isDragging ? 'opacity-50' : ''} ${isDragOver ? 'border-l-2 border-primary' : ''} relative group bg-background`}
+                    className={cn(
+                      col.className,
+                      sortable && col.sortable !== false && 'cursor-pointer select-none',
+                      isDragging && 'opacity-50',
+                      isDragOver && 'border-l-2 border-primary',
+                      col.align === 'right' && 'text-right',
+                      col.align === 'center' && 'text-center',
+                      'relative group bg-background'
+                    )}
                     style={{ 
                       width: columnWidth,
                       minWidth: columnWidth 
@@ -613,7 +621,10 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                     onDragEnd={handleColumnDragEnd}
                     onClick={() => sortable && col.sortable !== false && handleSort(col.accessorKey)}
                   >
-                    <div className="flex items-center justify-between">
+                    <div className={cn(
+                      "flex items-center",
+                      col.align === 'right' ? 'justify-end' : 'justify-between'
+                    )}>
                       <div className="flex items-center gap-1">
                         {reorderableColumns && (
                           <GripVertical className="h-4 w-4 opacity-0 group-hover:opacity-50 cursor-grab active:cursor-grabbing flex-shrink-0" />
@@ -701,6 +712,8 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                             key={colIndex} 
                             className={cn(
                               col.cellClassName,
+                              col.align === 'right' && 'text-right',
+                              col.align === 'center' && 'text-center',
                               isEditable && !isEditing && "cursor-text hover:bg-muted/50",
                               hasPendingChange && "font-semibold text-amber-700 dark:text-amber-400"
                             )}
diff --git a/packages/fields/src/index.tsx b/packages/fields/src/index.tsx
@@ -76,9 +76,12 @@ export function formatCurrency(value: number, currency: string = 'USD'): string
 
 /**
  * Format percent value
+ * Handles both decimal (0.8 = 80%) and whole number (80 = 80%) inputs.
  */
-export function formatPercent(value: number, precision: number = 2): string {
-  return `${(value * 100).toFixed(precision)}%`;
+export function formatPercent(value: number, precision: number = 0): string {
+  // If value is between -1 and 1 (exclusive), treat as decimal (e.g. 0.8 → 80%)
+  const displayValue = (value > -1 && value < 1) ? value * 100 : value;
+  return `${displayValue.toFixed(precision)}%`;
 }
 
 /**
@@ -125,11 +128,13 @@ export function TextCellRenderer({ value }: CellRendererProps): React.ReactEleme
  * Number field cell renderer
  */
 export function NumberCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
-  if (value == null) return <span>-</span>;
+  if (value == null) return <span className="text-muted-foreground">-</span>;
   
   const numField = field as any;
   const precision = numField.precision ?? 0;
-  const formatted = typeof value === 'number' ? value.toFixed(precision) : value;
+  const formatted = typeof value === 'number'
+    ? new Intl.NumberFormat('en-US', { minimumFractionDigits: precision, maximumFractionDigits: precision }).format(value)
+    : value;
   
   return <span className="tabular-nums">{formatted}</span>;
 }
@@ -138,26 +143,46 @@ export function NumberCellRenderer({ value, field }: CellRendererProps): React.R
  * Currency field cell renderer
  */
 export function CurrencyCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
-  if (value == null) return <span>-</span>;
+  if (value == null) return <span className="text-muted-foreground">-</span>;
   
   const currencyField = field as any;
   const currency = currencyField.currency || 'USD';
   const formatted = formatCurrency(Number(value), currency);
   
-  return <span className="tabular-nums font-medium">{formatted}</span>;
+  return <span className="tabular-nums font-medium whitespace-nowrap">{formatted}</span>;
 }
 
 /**
- * Percent field cell renderer
+ * Percent field cell renderer with mini progress bar
  */
 export function PercentCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
-  if (value == null) return <span>-</span>;
+  if (value == null) return <span className="text-muted-foreground">-</span>;
   
   const percentField = field as any;
-  const precision = percentField.precision ?? 2;
-  const formatted = formatPercent(Number(value), precision);
+  const precision = percentField.precision ?? 0;
+  const numValue = Number(value);
+  const formatted = formatPercent(numValue, precision);
+  // Normalize to 0-100 range for progress bar
+  const barValue = (numValue > -1 && numValue < 1) ? numValue * 100 : numValue;
+  const clampedBar = Math.max(0, Math.min(100, barValue));
   
-  return <span className="tabular-nums">{formatted}</span>;
+  return (
+    <div className="flex items-center gap-2">
+      <div
+        className="h-1.5 w-16 rounded-full bg-muted overflow-hidden flex-shrink-0"
+        role="progressbar"
+        aria-valuenow={clampedBar}
+        aria-valuemin={0}
+        aria-valuemax={100}
+      >
+        <div
+          className="h-full rounded-full bg-primary transition-all"
+          style={{ width: `${clampedBar}%` }}
+        />
+      </div>
+      <span className="tabular-nums whitespace-nowrap">{formatted}</span>
+    </div>
+  );
 }
 
 /**
diff --git a/packages/plugin-grid/src/ObjectGrid.stories.tsx b/packages/plugin-grid/src/ObjectGrid.stories.tsx
@@ -79,6 +79,43 @@ export const WithRowActions: Story = {
   } as any,
 };
 
+/**
+ * CRM Deals Pipeline — demonstrates professional data formatting:
+ * - Currency with thousand separators (Amount column, right-aligned)
+ * - Percentage with progress bar (Probability column, right-aligned)
+ * - Formatted dates (Close Date column)
+ * - Colored badges for stage/status (Stage column)
+ * - Bold clickable name as primary link (Name column)
+ * - Empty value placeholder (Account column)
+ */
+export const CRMDeals: Story = {
+  name: 'CRM Deals Pipeline',
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'Deal',
+    columns: [
+      { field: 'name', label: 'Name', link: true, sortable: true },
+      { field: 'account', label: 'Account' },
+      { field: 'stage', label: 'Stage', type: 'select', sortable: true },
+      { field: 'amount', label: 'Amount', type: 'currency', sortable: true },
+      { field: 'probability', label: 'Probability', type: 'percent', sortable: true },
+      { field: 'close_date', label: 'Close Date', type: 'date', sortable: true },
+    ],
+    data: [
+      { _id: '1', name: 'ObjectStack Enterprise License', account: '', stage: 'Closed Won', amount: 150000, probability: 100, close_date: '2024-01-15T00:00:00.000Z' },
+      { _id: '2', name: 'Cloud Migration Project', account: 'Acme Corp', stage: 'Negotiation', amount: 85000, probability: 60, close_date: '2024-03-20T00:00:00.000Z' },
+      { _id: '3', name: 'Annual Support Renewal', account: '', stage: 'Proposal', amount: 42000, probability: 80, close_date: '2024-02-28T00:00:00.000Z' },
+      { _id: '4', name: 'Custom Integration Development', account: 'TechFlow Inc', stage: 'Qualification', amount: 230000, probability: 30, close_date: '2024-06-15T00:00:00.000Z' },
+      { _id: '5', name: 'Data Analytics Platform', account: '', stage: 'Closed Lost', amount: 95000, probability: 0, close_date: '2024-01-10T00:00:00.000Z' },
+      { _id: '6', name: 'Security Audit Contract', account: 'SecureNet', stage: 'Closed Won', amount: 67500, probability: 100, close_date: '2024-02-01T00:00:00.000Z' },
+      { _id: '7', name: 'Mobile App Development', account: '', stage: 'Discovery', amount: 180000, probability: 15, close_date: '2024-08-30T00:00:00.000Z' },
+    ],
+    pagination: false,
+    className: 'w-full',
+  } as any,
+};
+
 export const EditableGrid: Story = {
   render: renderStory,
   args: {
diff --git a/packages/plugin-grid/src/ObjectGrid.tsx b/packages/plugin-grid/src/ObjectGrid.tsx
@@ -327,11 +327,11 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                 cellRenderer = (value: any, row: any) => {
                   const displayContent = CellRenderer
                     ? <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
-                    : String(value ?? '');
+                    : (value != null && value !== '' ? String(value) : <span className="text-muted-foreground">-</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"
+                      className="text-primary font-medium underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
                       onClick={(e) => {
                         e.stopPropagation();
                         navigation.handleClick(row);
@@ -346,11 +346,11 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                 cellRenderer = (value: any, row: any) => {
                   const displayContent = CellRenderer
                     ? <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
-                    : String(value ?? '');
+                    : (value != null && value !== '' ? String(value) : <span className="text-muted-foreground">-</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"
+                      className="text-primary font-medium underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
                       onClick={(e) => {
                         e.stopPropagation();
                         navigation.handleClick(row);
@@ -365,7 +365,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                 cellRenderer = (value: any, row: any) => {
                   const displayContent = CellRenderer
                     ? <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
-                    : String(value ?? '');
+                    : (value != null && value !== '' ? String(value) : <span className="text-muted-foreground">-</span>);
                   return (
                     <button
                       type="button"
@@ -387,13 +387,24 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
                 cellRenderer = (value: any) => (
                   <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
                 );
+              } else {
+                // Default renderer with empty value handling
+                cellRenderer = (value: any) => (
+                  value != null && value !== ''
+                    ? <span>{String(value)}</span>
+                    : <span className="text-muted-foreground">-</span>
+                );
               }
 
+              // Auto-infer alignment from field type if not explicitly set
+              const numericTypes = ['number', 'currency', 'percent'];
+              const inferredAlign = col.align || (col.type && numericTypes.includes(col.type) ? 'right' as const : undefined);
+
               return {
                 header,
                 accessorKey: col.field,
                 ...(col.width && { width: col.width }),
-                ...(col.align && { align: col.align }),
+                ...(inferredAlign && { align: inferredAlign }),
                 sortable: col.sortable !== false,
                 ...(col.resizable !== undefined && { resizable: col.resizable }),
                 ...(col.wrap !== undefined && { wrap: col.wrap }),
@@ -439,9 +450,11 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
       if (field.permissions && field.permissions.read === false) return;
 
       const CellRenderer = getCellRenderer(field.type);
+      const numericTypes = ['number', 'currency', 'percent'];
       generatedColumns.push({
         header: field.label || fieldName,
         accessorKey: fieldName,
+        ...(numericTypes.includes(field.type) && { align: 'right' }),
         cell: (value: any) => <CellRenderer value={value} field={field} />,
         sortable: field.sortable !== false,
       });
