SpTable

import { useState } from 'react';
import { uiSortRows } from '@silverpoint/core/ui';
import { SpTable } from '@silverpoint/react/ui/table';

const columns = [
  { key: 'team', title: 'Team', sortable: true },
  { key: 'region', title: 'Region' },
  { key: 'load', title: 'Load %', align: 'end', sortable: true },
  { key: 'incidents', title: 'Incidents', align: 'end', sortable: true },
] as const;

export function Teams({ teams }: { teams: Record<string, unknown>[] }) {
  const [sortKey, setSortKey] = useState('load');
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
  const sort = (key: string) => {
    setSortOrder(key === sortKey && sortOrder === 'asc' ? 'desc' : 'asc');
    setSortKey(key);
  };
  return (
    <SpTable
      caption="On-call teams"
      columns={columns}
      data={uiSortRows(teams, sortKey, sortOrder)} // the table draws rows as given
      rowKey="team"
      sortKey={sortKey}
      sortOrder={sortOrder}
      onSort={sort}
      striped
    />
  );
}

<script setup lang="ts">
import { computed, ref } from 'vue';
import { uiSortRows } from '@silverpoint/core/ui';
import { SpTable } from '@silverpoint/vue/ui/table';

const props = defineProps<{ teams: Record<string, unknown>[] }>();
const columns = [
  { key: 'team', title: 'Team', sortable: true },
  { key: 'region', title: 'Region' },
  { key: 'load', title: 'Load %', align: 'end', sortable: true },
  { key: 'incidents', title: 'Incidents', align: 'end', sortable: true },
] as const;
const sortKey = ref('load');
const sortOrder = ref<'asc' | 'desc'>('desc');
const rows = computed(() => uiSortRows(props.teams, sortKey.value, sortOrder.value));
function sort(key: string) {
  sortOrder.value = key === sortKey.value && sortOrder.value === 'asc' ? 'desc' : 'asc';
  sortKey.value = key;
}
</script>

<template>
  <SpTable caption="On-call teams" :columns="columns" :data="rows" row-key="team"
    :sort-key="sortKey" :sort-order="sortOrder" striped @sort="sort" />
</template>

import { Component, computed, input, signal } from '@angular/core';
import { uiSortRows } from '@silverpoint/core/ui';
import { SpTable } from '@silverpoint/angular/ui/table';

@Component({
  selector: 'app-teams',
  imports: [SpTable],
  template: `
    <sp-table caption="On-call teams" [columns]="columns" [data]="rows()" rowKey="team"
      [sortKey]="sortKey()" [sortOrder]="sortOrder()" [striped]="true" (sort)="sort($event)" />
  `,
})
export class Teams {
  readonly teams = input.required<Record<string, unknown>[]>();
  protected readonly columns = [
    { key: 'team', title: 'Team', sortable: true },
    { key: 'region', title: 'Region' },
    { key: 'load', title: 'Load %', align: 'end', sortable: true },
    { key: 'incidents', title: 'Incidents', align: 'end', sortable: true },
  ] as const;
  protected readonly sortKey = signal('load');
  protected readonly sortOrder = signal<'asc' | 'desc'>('desc');
  protected readonly rows = computed(() => uiSortRows(this.teams(), this.sortKey(), this.sortOrder()));

  protected sort(key: string) {
    this.sortOrder.set(key === this.sortKey() && this.sortOrder() === 'asc' ? 'desc' : 'asc');
    this.sortKey.set(key);
  }
}

class State(rx.State):
    rows: list[dict] = TEAMS
    sort_key: str = "load"
    sort_order: str = "desc"

    @rx.event
    def sort(self, key: str):
        same = key == self.sort_key and self.sort_order == "asc"
        self.sort_key, self.sort_order = key, "desc" if same else "asc"
        self.rows = sort_rows(TEAMS, self.sort_key, self.sort_order)


sp_table(
    [
        {"key": "team", "title": "Team", "sortable": True},
        {"key": "region", "title": "Region"},
        {"key": "load", "title": "Load %", "align": "end", "sortable": True},
        {"key": "incidents", "title": "Incidents", "align": "end", "sortable": True},
    ],
    State.rows,
    caption="On-call teams",
    sort_key=State.sort_key,
    sort_order=State.sort_order,
    on_sort=State.sort,  # receives the column key
    striped=True,
)