<c-data-table>

<template>
  <div>
    <!-- Drag the handle in the wrapper's bottom-right corner: with `autohide`,
         columns that stop fitting move into the expansion row (rightmost
         first). The pinned column never hides. Without `autohide` the table
         would scroll horizontally instead. -->
    <div class="resizable">
      <c-data-table :columns.prop="columns" :data.prop="data" autohide />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { CDataTableColumn } from '@cscfi/csc-ui';

const columns: CDataTableColumn[] = [
  { header: 'Project', key: 'name', pinned: 'left' },
  { header: 'Owner', key: 'owner' },
  { header: 'Facility', key: 'facility' },
  { header: 'Quota', key: 'quota' },
  { header: 'Created', key: 'created' },
];

const data = [
  {
    created: '2026-01-14',
    facility: 'Puhti',
    name: 'Aurora',
    owner: 'aino.virtanen@example.fi',
    quota: '20 TB',
  },
  {
    created: '2026-02-02',
    facility: 'Mahti',
    name: 'Borealis',
    owner: 'eero.korhonen@example.fi',
    quota: '5 TB',
  },
  {
    created: '2026-02-19',
    facility: 'LUMI',
    name: 'Cirrus',
    owner: 'sofia.laine@example.fi',
    quota: '80 TB',
  },
];
</script>

<style scoped>
.resizable {
  max-width: 100%;
  min-width: 320px;
  overflow: auto;
  resize: horizontal;
  width: 560px;
}
</style>

<template>
  <div>
    <c-data-table
      :columns.prop="columns"
      :data.prop="data"
      :sort.prop="sort"
      page-size="5"
      @change:sort="onSort"
    />

    <p>Sorted by: {{ sort.column }} ({{ sort.direction }})</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import type { CDataTableColumn, CDataTableSort } from '@cscfi/csc-ui';

const columns: CDataTableColumn[] = [
  { header: 'Project', key: 'name', sortable: true },
  { align: 'end', header: 'Members', key: 'members', sortable: true },
  { header: 'Facility', key: 'facility' },
  { header: 'Created', key: 'created', sortable: true },
];

const data = [
  { created: '2026-01-14', facility: 'Puhti', members: 12, name: 'Aurora' },
  { created: '2026-02-02', facility: 'Mahti', members: 3, name: 'Borealis' },
  { created: '2026-02-19', facility: 'LUMI', members: 41, name: 'Cirrus' },
  { created: '2026-03-05', facility: 'Allas', members: 7, name: 'Drift' },
  { created: '2026-03-28', facility: 'Puhti', members: 18, name: 'Ember' },
  { created: '2026-04-11', facility: 'LUMI', members: 2, name: 'Fjord' },
  { created: '2026-05-01', facility: 'Mahti', members: 25, name: 'Glacier' },
  { created: '2026-05-23', facility: 'Allas', members: 9, name: 'Halo' },
];

const sort = ref<CDataTableSort>({ column: 'name', direction: 'asc' });

const onSort = (event: Event) => {
  sort.value = (event as CustomEvent<CDataTableSort>).detail;
};
</script>

<template>
  <div>
    <c-data-table :columns.prop="columns" :data.prop="data" />

    <p>{{ message }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { type CDataTableColumn, h } from '@cscfi/csc-ui';

const message = ref('Open a project with the button in the last column');

const data = [
  { name: 'Aurora', status: 'active', usage: 0.72 },
  { name: 'Borealis', status: 'closed', usage: 0.13 },
  { name: 'Cirrus', status: 'pending', usage: 0.44 },
];

// Cell renderers are plain functions returning VNodes built with the `h`
// re-exported from @cscfi/csc-ui — no direct vue dependency needed.
const columns: CDataTableColumn[] = [
  { header: 'Project', key: 'name' },
  {
    cell: ({ value }) =>
      h('c-tag', { active: value === 'active' }, String(value)),
    header: 'Status',
    key: 'status',
  },
  {
    cell: ({ value }) =>
      h('c-progress-bar', {
        style: 'width: 160px',
        value: Math.round((value as number) * 100),
      }),
    header: 'Usage',
    key: 'usage',
  },
  {
    align: 'end',
    cell: ({ row }) =>
      h(
        'c-button',
        {
          onClick: () => {
            message.value = `Opening project ${row.name}…`;
          },
          size: 'small',
          text: true,
        },
        'Open',
      ),
    header: '',
    key: 'actions',
  },
];
</script>

<template>
  <div>
    <!-- The description column has expansion: 'always' — it never renders as
         a table column, its cells live in the expansion row. The custom
         expandedContent renders after them. -->
    <c-data-table
      :columns.prop="columns"
      :data.prop="data"
      :expanded-content.prop="expandedContent"
      :get-row-id.prop="getRowId"
      single-expansion
      @change:expanded="onExpanded"
    />

    <p>Expanded: {{ expanded.length ? expanded.join(', ') : '—' }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import {
  type CDataTableColumn,
  type CDataTableExpandedContext,
  type CDataTableRow,
  h,
} from '@cscfi/csc-ui';

const columns: CDataTableColumn[] = [
  { header: 'Service', key: 'name' },
  { header: 'Category', key: 'category' },
  { expansion: 'always', header: 'Description', key: 'description' },
];

const data = [
  {
    category: 'Computing',
    description:
      'Supercomputer for medium-scale simulations and data analysis.',
    id: 'puhti',
    name: 'Puhti',
  },
  {
    category: 'Computing',
    description: 'Supercomputer for massively parallel workloads.',
    id: 'mahti',
    name: 'Mahti',
  },
  {
    category: 'Storage',
    description: 'Object storage for research data, accessible everywhere.',
    id: 'allas',
    name: 'Allas',
  },
];

const getRowId = (row: CDataTableRow) => row.id as string;

const expandedContent = ({ row }: CDataTableExpandedContext) =>
  h(
    'c-link',
    {
      href: `https://docs.csc.fi/computing/systems-${row.id}/`,
      underline: true,
      style: 'padding-inline: 6px',
    },
    `Read more about ${row.name}`,
  );

const expanded = ref<string[]>([]);

const onExpanded = (event: Event) => {
  expanded.value = (event as CustomEvent<string[]>).detail;
};
</script>

<template>
  <div>
    <!-- With `external`, the table renders `data` verbatim and only emits
         state changes; sorting and paging here go through a simulated server
         request. `item-count` tells the pager the true total. -->
    <c-data-table
      :columns.prop="columns"
      :data.prop="page"
      :item-count="TOTAL"
      :loading="loading"
      :page="query.page"
      :sort.prop="query.sort"
      external
      page-size="5"
      @change:page="onPage"
      @change:page-size="onPageSize"
      @change:sort="onSort"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

import type {
  CDataTableColumn,
  CDataTableRow,
  CDataTableSort,
} from '@cscfi/csc-ui';

const columns: CDataTableColumn[] = [
  { header: 'Job', key: 'name', sortable: true },
  { align: 'end', header: 'Runtime (h)', key: 'runtime', sortable: true },
  { header: 'State', key: 'state' },
];

// ---- a pretend server ------------------------------------------------
const TOTAL = 57;

const allRows = Array.from({ length: TOTAL }, (_, i) => ({
  name: `job-${String(i + 1).padStart(3, '0')}`,
  runtime: ((i * 13) % 96) + 1,
  state: i % 4 ? 'completed' : 'running',
}));

const fetchPage = (q: {
  page: number;
  pageSize: number;
  sort: CDataTableSort | null;
}): Promise<CDataTableRow[]> =>
  new Promise((resolve) => {
    const sorted = [...allRows].sort((a, b) => {
      if (!q.sort) return 0;

      const { column, direction } = q.sort;

      const va = a[column as keyof typeof a];

      const vb = b[column as keyof typeof b];

      return (va < vb ? -1 : va > vb ? 1 : 0) * (direction === 'asc' ? 1 : -1);
    });

    const start = (q.page - 1) * q.pageSize;

    setTimeout(() => resolve(sorted.slice(start, start + q.pageSize)), 600);
  });
// -----------------------------------------------------------------------

const query = ref({
  page: 1,
  pageSize: 5,
  sort: { column: 'name', direction: 'asc' } as CDataTableSort | null,
});

const page = ref<CDataTableRow[]>([]);

const loading = ref(false);

const load = async () => {
  loading.value = true;
  page.value = await fetchPage(query.value);
  loading.value = false;
};

const onSort = (event: Event) => {
  query.value.sort = (event as CustomEvent<CDataTableSort>).detail;
  query.value.page = 1;
  load();
};

const onPage = (event: Event) => {
  query.value.page = (event as CustomEvent<number>).detail;
  load();
};

const onPageSize = (event: Event) => {
  query.value.pageSize = (event as CustomEvent<number>).detail;
  load();
};

onMounted(load);
</script>

<template>
  <div>
    <!-- With client-side data and pagination, selecting a full page offers a
         two-step "select all N rows" banner. -->
    <c-data-table
      :columns.prop="columns"
      :data.prop="data"
      :get-row-id.prop="getRowId"
      :selected.prop="selected"
      page-size="4"
      selection="multiple"
      @change:selected="onSelection"
    />

    <p>Selected ids: {{ selected.length ? selected.join(', ') : '—' }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import type { CDataTableColumn, CDataTableRow } from '@cscfi/csc-ui';

const columns: CDataTableColumn[] = [
  { header: 'Dataset', key: 'name' },
  { align: 'end', header: 'Size (GB)', key: 'size' },
];

const data = Array.from({ length: 11 }, (_, i) => ({
  id: `ds-${i + 1}`,
  name: `Dataset ${i + 1}`,
  size: ((i * 37) % 90) + 4,
}));

// A stable row id keeps the selection correct across sorting and paging.
const getRowId = (row: CDataTableRow) => row.id as string;

const selected = ref<string[]>(['ds-2']);

const onSelection = (event: Event) => {
  selected.value = (
    event as CustomEvent<{ ids: string[]; rows: CDataTableRow[] }>
  ).detail.ids;
};
</script>