<script>
const data = [
  { rank: 1, name: 'Jannik Sinner', country: 'Italy' },
  { rank: 2, name: 'Alexander Zverev', country: 'Germany' },
  { rank: 3, name: 'Carlos Alcaraz', country: 'Spain' },
  { rank: 4, name: 'Ben Shelton', country: 'USA' },
];
</script>

<Table {data} />

<script>
const data = [...];
const columns =  [{field: 'name', label: 'Name'}, {field: 'country', label: 'Country'}];
</script>

<Table columns={['rank', 'name']} {data} />
<Table {columns} {data} />

<Table {data} striped />

<Table {data} hoverable />

<script>
const data = [
  { rank: 1, name: 'Jannik Sinner', country: 'Italy', countryCode: 'it' },
  { rank: 2, name: 'Alexander Zverev', country: 'Germany', countryCode: 'de' },
  { rank: 3, name: 'Carlos Alcaraz', country: 'Spain', countryCode: 'es' },
  { rank: 4, name: 'Ben Shelton', country: 'USA', countryCode: 'us' },
];
</script>

<Table {data}>
  {#snippet children({ row })}
    <TableColumn field="rank" label="Rank" {row}>
      {#snippet children({ value })}
        <Tag type={value === 1 ? 'success' : 'primary'}>{value}</Tag>
      {/snippet}
    </TableColumn>
    <TableColumn field="name" label="Name" {row} />
    <TableColumn field="countryCode" label="Country" {row}>
      {#snippet children({ row, value })}
        <span class="inline-flex items-center gap-2">
          <img alt="" class="border-paper" src="https://flagcdn.com/w40/{value}.png" />
          {row.country}
        </span>
      {/snippet}
    </TableColumn>
  {/snippet}
</Table>

<script>
const data = [
  { rank: 1, name: 'Jannik Sinner', age: 25 },
  { rank: 2, name: 'Alexander Zverev', age: 29 },
  { rank: 3, name: 'Carlos Alcaraz', age: 23 },
  { rank: 4, name: 'Ben Shelton', age: 24 },
];
</script>

<Table {data} sort={{ field: 'age', order: 1 }} />

<Table {data} sortable />

<script>
const columns = [
  { field: 'rank', sortable: true },
  { field: 'name' },
  { field: 'age', sortable: true },
];
</script>

<Table {data} {columns} />

<Table {data}>
  {#snippet children({ row })}
    <TableColumn field="rank" sortable {row} />
    <TableColumn field="name" {row} />
    <TableColumn field="age" sortable {row} />
  {/snippet}
</Table>

<script>
import { Icon, Table } from 'spaper';
import { CircleSlash2 } from 'spaper/icons';
</script>

<Table data={[]} columns={['rank', 'name', 'country']}>
  {#snippet empty()}
    <div class="flex flex-col items-center justify-center gap-2 p-8">
      <Icon name={CircleSlash2} size={32} type="warning" />
      No players.
    </div>
  {/snippet}
</Table>