svelte<script lang="ts">
  import {
    type ColorStats,
    type Column,
    DataTable,
    TABLE_EXPORT_FORMATS,
  } from 'svelte-widgets/table'

  const rows = [
    { name: `Hydrogen`, symbol: `H`, number: 1, mass: 1.008, state: `gas`, year: 1766 },
    { name: `Helium`, symbol: `He`, number: 2, mass: 4.0026, state: `gas`, year: 1868 },
    { name: `Carbon`, symbol: `C`, number: 6, mass: 12.011, state: `solid`, year: null },
    { name: `Nitrogen`, symbol: `N`, number: 7, mass: 14.007, state: `gas`, year: 1772 },
    { name: `Oxygen`, symbol: `O`, number: 8, mass: 15.999, state: `gas`, year: 1774 },
    { name: `Sodium`, symbol: `Na`, number: 11, mass: 22.99, state: `solid`, year: 1807 },
    { name: `Iron`, symbol: `Fe`, number: 26, mass: 55.845, state: `solid`, year: null },
    {
      name: `Bromine`,
      symbol: `Br`,
      number: 35,
      mass: 79.904,
      state: `liquid`,
      year: 1826,
    },
    {
      name: `Silver`,
      symbol: `Ag`,
      number: 47,
      mass: 107.87,
      state: `solid`,
      year: null,
    },
    {
      name: `Mercury`,
      symbol: `Hg`,
      number: 80,
      mass: 200.59,
      state: `liquid`,
      year: null,
    },
  ]
  const columns: Column<(typeof rows)[number]>[] = [
    { id: `name`, label: `Name`, group: `Identity`, pin: `left`, disabled: true },
    { id: `symbol`, label: `Symbol`, group: `Identity`, visible: false },
    { id: `number`, label: `Z`, group: `Identity`, description: `Atomic number` },
    {
      id: `mass`,
      label: `Mass`,
      group: `Physical`,
      description: `Standard atomic weight in u`,
      better: `lower`,
      highlight_best: true,
    },
    { id: `state`, label: `State`, group: `Physical`, filter: `category` },
    { id: `year`, label: `Discovered`, group: `History`, render_as: `bar` },
  ]
  // at most 45% blue, so the page's text color stays legible on the fill in either theme;
  // a one-row domain (lo === hi) shades fully
  const column_color = (
    col: Column<(typeof rows)[number]>,
    { domain: [lo, hi] }: ColorStats,
  ) =>
    col.id === `mass`
      ? (num: number | null) => ({
          bg:
            num === null
              ? null
              : `color-mix(in srgb, cornflowerblue ${hi === lo ? 45 : (45 * (num - lo)) / (hi - lo)}%, transparent)`,
          text: null,
        })
      : undefined
</script>

<DataTable
  data={rows}
  {columns}
  {column_color}
  sort={[{ column: `number`, dir: `asc` }]}
  search
  show_filters
  show_column_toggle
  show_controls="always"
  keyboard_cells
  summary={[`mean`, `max`]}
  export_formats={TABLE_EXPORT_FORMATS}
  export_filename="elements"
/>

svelte<script lang="ts">
  import { download } from 'svelte-widgets/download'
  import {
    CellSelection,
    ColumnFilter,
    ColumnPicker,
    cell_range_select,
    filter_rows,
    table_to_json,
    table_to_text,
    type ColumnFilterValue,
    type TableColumn,
  } from 'svelte-widgets/table'
  import { untrack } from 'svelte'

  type Row = {
    name: string
    symbol: string
    number: number
    mass: number
    state: string
    year: number | null
  }
  const rows: Row[] = [
    { name: `Hydrogen`, symbol: `H`, number: 1, mass: 1.008, state: `gas`, year: 1766 },
    { name: `Helium`, symbol: `He`, number: 2, mass: 4.0026, state: `gas`, year: 1868 },
    { name: `Carbon`, symbol: `C`, number: 6, mass: 12.011, state: `solid`, year: null },
    { name: `Nitrogen`, symbol: `N`, number: 7, mass: 14.007, state: `gas`, year: 1772 },
    { name: `Oxygen`, symbol: `O`, number: 8, mass: 15.999, state: `gas`, year: 1774 },
    { name: `Sodium`, symbol: `Na`, number: 11, mass: 22.99, state: `solid`, year: 1807 },
    { name: `Iron`, symbol: `Fe`, number: 26, mass: 55.845, state: `solid`, year: null },
    {
      name: `Bromine`,
      symbol: `Br`,
      number: 35,
      mass: 79.904,
      state: `liquid`,
      year: 1826,
    },
    {
      name: `Silver`,
      symbol: `Ag`,
      number: 47,
      mass: 107.87,
      state: `solid`,
      year: null,
    },
    {
      name: `Mercury`,
      symbol: `Hg`,
      number: 80,
      mass: 200.59,
      state: `liquid`,
      year: null,
    },
  ]

  type Column = TableColumn & { id: keyof Row; numeric: boolean }
  let columns = $state<Column[]>([
    { id: `name`, label: `Name`, group: `Identity`, numeric: false, disabled: true },
    { id: `symbol`, label: `Symbol`, group: `Identity`, numeric: false },
    {
      id: `number`,
      label: `Z`,
      group: `Identity`,
      numeric: true,
      description: `Atomic number`,
    },
    {
      id: `mass`,
      label: `Mass`,
      group: `Physical`,
      numeric: true,
      description: `Standard atomic weight in u`,
    },
    {
      id: `state`,
      label: `State`,
      group: `Physical`,
      numeric: false,
      description: `Phase at room temperature`,
    },
    { id: `year`, label: `Discovered`, group: `History`, numeric: true, visible: false },
  ])
  let filters = $state<Partial<Record<keyof Row, ColumnFilterValue>>>({})
  let open_filter = $state<keyof Row | null>(null)
  let sort = $state<{ key: keyof Row; dir: 1 | -1 }>({ key: `number`, dir: 1 })

  const visible = $derived(columns.filter((col) => col.visible !== false))
  const collator = new Intl.Collator(undefined, { numeric: true })
  // missing values sink to the bottom in either direction
  const compare = (row_a: Row, row_b: Row): number => {
    const [val_a, val_b] = [row_a[sort.key], row_b[sort.key]]
    if (val_a === null || val_b === null)
      return Number(val_a === null) - Number(val_b === null)
    return sort.dir * collator.compare(String(val_a), String(val_b))
  }
  const shown = $derived(filter_rows(rows, filters).toSorted(compare))
  const cell_text = (row: Row, col: Column): string => String(row[col.id] ?? ``)

  // selection coordinates index `shown` and `visible`, so a re-sort, re-filter or column
  // toggle clears them
  const selection = new CellSelection()
  $effect(() => {
    void [shown, visible]
    untrack(selection.clear)
  })

  const toggle_sort = (key: keyof Row) =>
    (sort = { key, dir: sort.key === key && sort.dir === 1 ? -1 : 1 })
  // file extension, button label and MIME type per download format
  const formats = [
    [`csv`, `CSV`, `text/csv`],
    [`tsv`, `TSV`, `text/tab-separated-values`],
    [`json`, `JSON`, `application/json`],
    [`md`, `Markdown`, `text/markdown`],
    [`tex`, `LaTeX`, `application/x-tex`],
  ] as const
  function export_as(format: (typeof formats)[number][0], mime: string) {
    const text =
      format === `json`
        ? table_to_json(shown, visible)
        : table_to_text(
            {
              headers: visible.map((col) => col.label),
              rows: shown.map((row) => visible.map((col) => cell_text(row, col))),
              numeric: visible.map((col) => col.numeric),
            },
            format,
          )
    download(text, `elements.${format}`, mime)
  }
</script>

<div class="toolbar">
  <ColumnPicker bind:columns collapsed_groups={[`History`]} />
  {#each formats as [format, label, mime] (format)}
    <button type="button" onclick={() => export_as(format, mime)}>{label}</button>
  {/each}
  <span>{shown.length} of {rows.length} rows · {selection.size} cells selected</span>
</div>

<div style="overflow-x: auto">
  <table class="demo-table">
    <thead>
      <tr>
        {#each visible as col (col.id)}
          <th
            aria-sort={sort.key === col.id
              ? sort.dir === 1
                ? `ascending`
                : `descending`
              : `none`}
          >
            <button type="button" class="sort" onclick={() => toggle_sort(col.id)}>
              {col.label}{sort.key === col.id ? (sort.dir === 1 ? ` ↑` : ` ↓`) : ``}
            </button>
            <ColumnFilter
              column={col.label}
              values={() => rows.map((row) => row[col.id])}
              options={{ numeric: col.numeric }}
              bind:filter={filters[col.id]}
              bind:open={
                () => open_filter === col.id,
                (open) => (open_filter = open ? col.id : null)
              }
            />
          </th>
        {/each}
      </tr>
    </thead>
    <tbody
      {@attach cell_range_select(selection, {
        cell_text: (row, col) =>
          shown[row] && visible[col] ? cell_text(shown[row], visible[col]) : undefined,
      })}
    >
      {#each shown as row, row_idx (row.symbol)}
        <tr>
          {#each visible as col, col_idx (col.id)}
            <td
              data-row={row_idx}
              data-col={col_idx}
              class={{ numeric: col.numeric, selected: selection.has(row_idx, col_idx) }}
              >{row[col.id] ?? `–`}</td
            >
          {/each}
        </tr>
      {:else}
        <tr><td colspan={visible.length}>No rows match the filters</td></tr>
      {/each}
    </tbody>
  </table>
</div>

<style>
  .toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    span {
      margin-left: auto;
      opacity: 0.7;
    }
  }
  .demo-table {
    width: 100%;
    border-collapse: collapse;
    user-select: none;
    th,
    td {
      padding: 0.3em 0.6em;
      border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.12));
      text-align: left;
      white-space: nowrap;
    }
    .numeric {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .sort {
      padding: 0;
      border: 0;
      background: none;
      color: inherit;
      font: inherit;
      font-weight: 600;
      cursor: pointer;
    }
    td.selected {
      background: color-mix(in srgb, var(--accent-color, #4a9eff) 25%, transparent);
    }
  }
</style>