Best Practices

// ✓ Good: Memoized columns
const columns = useMemo<GridColumnDef<User>[]>(() => [
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'email', header: 'Email' },
], []);

// ✗ Bad: Recreated every render
const columns = [
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'email', header: 'Email' },
];

// ✓ Good: Memoized callback
const handleRowClick = useCallback(
  (row: User) => {
    router.push(`/users/${row.id}`);
  },
  [router]
);

// ✗ Bad: New function every render
const handleRowClick = (row: User) => {
  router.push(`/users/${row.id}`);
};

// ✓ Good: Reusable memoized component
const UserCell = memo<{ user: User }>(({ user }) => (
  <div>{user.name}</div>
));

{
  cell: ({ row }) => <UserCell user={row.original} />,
}

// ✗ Bad: Inline function
{
  cell: ({ row }) => <div>{row.original.name}</div>,
}

// ✓ Good: Virtualization enabled for 1000+ rows
<ActiveGrid
  data={largeDataset}
  enableVirtualization={true}
  {...}
/>

// ✗ Bad: No virtualization for 10,000 rows
<ActiveGrid
  data={veryLargeDataset}
  {...}
/>

// ✓ Good: Server mode for large datasets
<ActiveGrid
  mode="server"
  fetchFn={fetchData}
  data={[]} // Server mode manages data
  {...}
/>

// ✗ Bad: Client mode with 100,000 rows
<ActiveGrid
  mode="client"
  data={massiveDataset}
  {...}
/>

const columnTypes: Record<string, Partial<GridColumnDef<any>>> = {
  currency: {
    meta: {
      cellAlign: 'right',
      valueFormatter: (value) => `$${value.toFixed(2)}`,
      filterType: 'number',
    },
  },
  date: {
    meta: {
      valueFormatter: (value) => format(new Date(value), 'PP'),
      filterType: 'date',
    },
  },
  percentage: {
    meta: {
      cellAlign: 'right',
      valueFormatter: (value) => `${value}%`,
    },
  },
};

// Use in columns
const columns: GridColumnDef<Product>[] = [
  {
    accessorKey: 'price',
    header: 'Price',
    ...columnTypes.currency,
  },
  {
    accessorKey: 'discount',
    header: 'Discount',
    ...columnTypes.percentage,
  },
];

<ActiveGrid
  columnDefaults={{
    size: 150,
    minSize: 80,
    maxSize: 400,
    enableSorting: true,
    enableResizing: true,
  }}
  columns={columns}
  {...}
/>

// ✓ Good: Extracted function
const getStatusVariant = (status: string) => {
  switch (status) {
    case 'active': return 'default';
    case 'pending': return 'secondary';
    default: return 'outline';
  }
};

{
  cell: ({ getValue }) => (
    <Badge variant={getStatusVariant(getValue() as string)}>
      {getValue()}
    </Badge>
  ),
}

// ✗ Bad: Inline logic
{
  cell: ({ getValue }) => {
    const status = getValue() as string;
    const variant = 
      status === 'active' ? 'default' :
      status === 'pending' ? 'secondary' :
      'outline';
    return <Badge variant={variant}>{status}</Badge>;
  },
}

import { GridConfigProvider } from '@workspace/active-grid';

const config = {
  columnDefaults: {
    size: 150,
    enableSorting: true,
  },
  settings: {
    rowHeight: 48,
    stripedRows: true,
  },
};

function App() {
  return (
    <GridConfigProvider config={config}>
      {/* All tables use these defaults */}
      <ActiveGrid {...} />
    </GridConfigProvider>
  );
}

// ✓ Good: Stable row IDs
<ActiveGrid
  getRowId={(row) => row.id}
  {...}
/>

// ✗ Bad: Using array index (default)
<ActiveGrid {...} />

// ✓ Good: Controlled state for persistence
const [sorting, setSorting] = useState<SortingState>([]);

<ActiveGrid
  state={{ sorting }}
  onSortingChange={setSorting}
  {...}
/>

// ✗ Bad: Uncontrolled when you need access
<ActiveGrid {...} />

// ✓ Good: gridId provided
<ActiveGrid
  gridId="users-grid"
  enablePersistence={true}
  {...}
/>

// ✗ Bad: Missing gridId
<ActiveGrid
  enablePersistence={true}
  {...}
/>

// ✓ Good: Separate display from data
{
  accessorKey: 'price',
  header: 'Price',
  meta: {
    valueFormatter: (value) => `$${value.toFixed(2)}`,
  },
}

// ✗ Bad: Formatting in cell
{
  accessorKey: 'price',
  header: 'Price',
  cell: ({ getValue }) => `$${getValue().toFixed(2)}`,
}

// ✓ Good: Loading indicator
function UsersTable() {
  const { data, isLoading } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
  });
  
  if (isLoading) return <Skeleton />;
  
  return <ActiveGrid data={data} {...} />;
}

// ✗ Bad: No loading state
function UsersTable() {
  const { data } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
  });
  
  return <ActiveGrid data={data || []} {...} />;
}

// ✓ Good: Error handling
<ActiveGrid
  onDataCommit={async (payload) => {
    try {
      await api.updateUser(payload.rowId, payload.changes);
      toast.success('Updated');
    } catch (error) {
      toast.error('Update failed');
      throw error; // Revert changes
    }
  }}
  {...}
/>

// ✗ Bad: No error handling
<ActiveGrid
  onDataCommit={async (payload) => {
    await api.updateUser(payload.rowId, payload.changes);
  }}
  {...}
/>