Custom Columns Override

interface IColumnValue<T> {
  value: T; // The individual column value
  row: Record<string, any>; // The entire row object containing all field values
}

// Override Function Signature
type ColumnOverride<T> = (props: IColumnValue<T>) => React.ReactNode;

{
  "type": "collectionPage",
  "collectionPage": {
    "components": [
      {
        "layout": [
          {
            "type": "Table",
            "table": {
              "columns": [
                {
                  "id": "myCustomColumn" // Matches key in override object
                }
              ]
            }
          }
        ]
      }
    ]
  }
}

// components/columns/status.tsx
import type { IColumnValue } from '@wix/auto-patterns';
import { Badge } from '@wix/design-system';

export function status({ value, row }: IColumnValue<string>) {
  // Pure rendering logic - NO HOOKS here
  const skin = value === 'Active' ? 'success' : 'danger';
  return <Badge skin={skin}>{value}</Badge>;
}

// components/columns/index.tsx
import { status } from './status';
export const useColumns = () => ({ status });

// 1. Add import (keep all existing imports)
import { useColumns } from './components/columns';

// 2. Add hook call (keep all existing hook calls)
const columns = useColumns();

// 3. Add columns to PatternsWizardOverridesProvider value (keep ALL existing overrides)