Column Definition

import type { ColumnDef } from '@sv5ui/datagrid';

const columns: ColumnDef<Person>[] = [
  // id doubles as the row property key
  { id: 'name', header: 'Name' },

  // accessor takes over when the value is not a plain property
  {
    id: 'fullName',
    header: 'Full name',
    accessor: (person) => `${person.first} ${person.last}`
  },

  // header is the accessible name, so it stays plain text even when
  // headerCell draws something else
  { id: 'salary', header: 'Annual salary', align: 'right', type: 'currency' }
];

const columns: ColumnDef<Person>[] = [
  // Fixed: never grows, never shrinks below minWidth
  { id: 'id', header: 'ID', width: 80 },

  // Flex: shares whatever the fixed columns leave over.
  // flex 2 takes twice the leftover space of flex 1.
  { id: 'name', header: 'Name', flex: 1, minWidth: 140 },
  { id: 'email', header: 'Email', flex: 2, minWidth: 200 },

  // maxWidth applies to fixed widths, including after a resize
  { id: 'team', header: 'Team', width: 140, maxWidth: 200 },

  // resizable: false freezes one column while the rest stay draggable
  { id: 'status', header: 'Status', width: 110, resizable: false }
];

// flex defaults to 1 when width is omitted, so a column with neither
// still shares the leftover space.

// align moves the header label and the cell content together
{ id: 'name', header: 'Name', align: 'left' }     // default
{ id: 'active', header: 'Active', align: 'center' }
{ id: 'salary', header: 'Salary', align: 'right' } // numbers read better right-aligned

const columns: ColumnDef<Person>[] = [
  { id: 'name', header: 'Member', width: 200, pinned: 'left' },
  { id: 'email', header: 'Email', width: 260 },
  { id: 'team', header: 'Team', width: 140 },
  { id: 'role', header: 'Role', width: 140 },
  { id: 'country', header: 'Country', width: 160 },
  { id: 'joinedAt', header: 'Joined', width: 140, type: 'date' },
  { id: 'salary', header: 'Salary', width: 140, align: 'right',
    type: 'currency', pinned: 'right' }
];

// Pinned columns stay put while the middle section scrolls. Under
// dir="rtl" the sides mirror, because the layout uses logical properties.

<script lang="ts">
  import { DataGrid, type ColumnDef, type DataGridCellContext } from '@sv5ui/datagrid';
</script>

<!-- headerCell draws the label; header stays the accessible name -->
{#snippet teamHeader()}
  <span class="flex items-center gap-1.5">
    <Icon name="lucide:users" class="size-3.5" />
    Team
  </span>
{/snippet}

<!-- cell receives node, row, value and rowIndex, and wins over type -->
{#snippet statusCell({ row }: DataGridCellContext<Person>)}
  <Badge
    label={row.status}
    size="sm"
    variant="soft"
    color={row.status === 'active' ? 'success' : row.status === 'invited' ? 'info' : 'error'}
  />
{/snippet}

<DataGrid
  data={people}
  {getRowId}
  columns={[
    { id: 'name', header: 'Name', flex: 1 },
    { id: 'team', header: 'Team', width: 140, headerCell: teamHeader },
    { id: 'status', header: 'Status', width: 140, cell: statusCell }
  ]}
/>

// Per cell: runs for every rendered cell of this column, so keep it cheap
{
  id: 'salary',
  header: 'Salary',
  type: 'currency',
  align: 'right',
  cellClass: ({ value }) => (Number(value) > 120000 ? 'font-semibold text-success' : '')
}

// Per row: passed to createDataGrid, or to DataGrid in the shorthand form
createDataGrid<Person>({
  columns,
  data,
  getRowId,
  rowClass: (node) => (node.row.status === 'suspended' ? 'opacity-60' : '')
});

// How many rows from this index share the same team. A run only starts
// where the value changes; inside one, the cell is covered and its span
// is never asked for.
function runLength(index: number): number {
  if (index > 0 && rows[index - 1].team === rows[index].team) return 1;
  let n = 1;
  while (index + n < rows.length && rows[index + n].team === rows[index].team) n++;
  return n;
}

const columns: ColumnDef<Person>[] = [
  { id: 'team', header: 'Team', width: 140, rowSpan: (ctx) => runLength(ctx.rowIndex) },
  { id: 'name', header: 'Name', flex: 1 },
  { id: 'salary', header: 'Salary', width: 130, align: 'right', type: 'currency' }
];

// colSpan(ctx) works the same way across columns, and is clamped so a
// merged cell never crosses a pin boundary.

// Unset: a cell whose text is cut off is titled on hover
{ id: 'email', header: 'Email', flex: 1 }

// true: always titled, cut off or not
{ id: 'name', header: 'Name', tooltip: true }

// A function decides the text
{ id: 'team', header: 'Team', tooltip: ({ row }) => `${row.team} team, ${row.country}` }

// false turns it off
{ id: 'avatar', header: '', tooltip: false }