Cell Renderers

// Set type and the matching sv5ui component renders the cell, with no
// snippet of your own.
const columns: ColumnDef<Member>[] = [
  { id: 'name', type: 'user', typeOptions: { avatar: (m) => m.avatar,
                                             description: (m) => m.email } },
  { id: 'team', type: 'badge', typeOptions: { colors: { Core: 'primary' } } },
  { id: 'salary', type: 'currency', typeOptions: { currency: 'USD' } },
  { id: 'progress', type: 'progress' },
  { id: 'rating', type: 'rating' },
  { id: 'active', type: 'boolean' },
  { id: 'joinedAt', type: 'date' }
];

// number: Intl.NumberFormat, configured through numberFormat
{ id: 'salary', header: 'Raw', type: 'number' }
{ id: 'salary', header: 'Rounded', type: 'number',
  typeOptions: { numberFormat: { maximumFractionDigits: 0 } } }

// currency: an ISO 4217 code, USD by default
{ id: 'salary', header: 'USD', type: 'currency' }
{ id: 'salary', header: 'EUR', type: 'currency',
  typeOptions: { currency: 'EUR', locale: 'de-DE' } }

// percent expects a 0 to 1 ratio unless wholePercent says otherwise
{ id: 'completion', header: 'Ratio', type: 'percent' }
{ id: 'progress', header: '0 to 100', type: 'percent',
  typeOptions: { wholePercent: true } }

// date and datetime take Intl.DateTimeFormat options
{ id: 'joinedAt', header: 'Default', type: 'date' }

{ id: 'joinedAt', header: 'Long', type: 'date',
  typeOptions: { dateFormat: { dateStyle: 'long' } } }

{ id: 'joinedAt', header: 'With time', type: 'datetime',
  typeOptions: { dateFormat: { dateStyle: 'medium', timeStyle: 'short' } } }

// Formatters are cached per configuration, because a renderer runs on
// every visible cell. Values may be a Date, a timestamp or an ISO string.

// badge: map a value to a colour so statuses read at a glance
{
  id: 'status',
  type: 'badge',
  typeOptions: {
    colors: { active: 'success', invited: 'info', suspended: 'error' },
    fallbackColor: 'surface'
  }
}

// user: a name with an avatar and a secondary line
{
  id: 'name',
  type: 'user',
  typeOptions: { avatar: (row) => row.avatar, description: (row) => row.email }
}

// boolean: two icons, overridable
{ id: 'active', type: 'boolean', align: 'center',
  typeOptions: { trueIcon: 'lucide:circle-check', falseIcon: 'lucide:circle-x' } }

// progress and rating share max
{ id: 'progress', type: 'progress' }              // max 100
{ id: 'rating', type: 'rating' }                  // max 5
{ id: 'score', type: 'rating', typeOptions: { max: 10 } }

// link: href defaults to the cell value
{ id: 'website', type: 'link' }

// or derive it from the row
{
  id: 'email',
  header: 'Email',
  type: 'link',
  typeOptions: { href: (row) => `mailto:${row.email}` }
}

{
  id: 'name',
  type: 'link',
  typeOptions: { href: (row) => `/members/${row.id}`, target: '_blank' }
}

// Only navigating schemes are allowed through: http, https, mailto, tel,
// sms and ftp, plus relative urls. javascript: and data: render as text.

// Null, undefined and empty string all render as the default empty text,
// which is an em dash. A column with no type reads the same.
{ id: 'country', header: 'Country' }
{ id: 'country', header: 'Country', type: 'text' }

// typeOptions.emptyText replaces it per column
{ id: 'country', header: 'Country', typeOptions: { emptyText: 'Unknown' } }
{ id: 'salary', header: 'Salary', type: 'currency',
  typeOptions: { currency: 'USD', emptyText: 'Not set' } }

// A blank value keeps the empty text rather than running the renderer, so
// a currency column does not print a zero it was never given.

<script lang="ts">
  // Declare type and cell together and the snippet is handed `formatted`:
  // the text the built-in renderer would have printed for this value. The
  // column keeps its own typeOptions and the snippet decorates around them,
  // rather than rebuilding formatting the grid has already done.
  //
  // It is undefined where the built-in rendering is a widget - a rating, a
  // progress bar, a boolean - since no string stands for one, and it is only
  // computed if the snippet reads it.
</script>

<!-- A cell snippet always wins over type, so a column can graduate to a
     custom renderer without changing anything else about it -->
{#snippet salaryCell({ row, formatted }: DataGridCellContext<Person>)}
  <span class="flex items-center gap-2">
    <span class="font-medium">{formatted}</span>
    {#if row.salary > 120000}
      <Badge label="senior" size="sm" color="warning" variant="soft" />
    {/if}
  </span>
{/snippet}