Table — React

---
import Table from '../components/astro/Table.astro';
---

<Table
  columns={[{ key: 'name', label: 'Name', sortable: true }, { key: 'value', label: 'Value', sortable: true, type: 'number' }]}
  data={[{ name: 'Alpha', value: 10 }, { name: 'Beta', value: 20 }]}
  caption="Demo table"
  striped
/>

<!-- Table HTML with thead/tbody; optional data-sortable + script from package/vanilla docs. -->
<table class="table">
  <thead><tr><th>Name</th><th>Status</th></tr></thead>
  <tbody><tr><td>Item</td><td>Active</td></tr></tbody>
</table>

<script>
  import { Table } from '$lib/rizzo';
</script>

<Table
  columns={[
    { key: 'name', label: 'Name', sortable: true },
    { key: 'value', label: 'Value', sortable: true, type: 'number' },
  ]}
  data={[
    { name: 'Alpha', value: 10 },
    { name: 'Beta', value: 20 },
  ]}
  caption="Demo table"
  striped
/>

<script setup>
import Table from '@/components/rizzo/Table.vue';
</script>

<template>
  <Table
    :columns="[
      { key: 'name', label: 'Name', sortable: true },
      { key: 'value', label: 'Value', sortable: true, type: 'number' },
    ]"
    :data="[
      { name: 'Alpha', value: 10 },
      { name: 'Beta', value: 20 },
    ]"
    caption="Demo table"
    striped
  />
</template>

import { Table } from './components/react';

<Table
  columns={[
    { key: 'name', label: 'Name', sortable: true },
    { key: 'value', label: 'Value', sortable: true, type: 'number' },
  ]}
  data={[
    { name: 'Alpha', value: 10 },
    { name: 'Beta', value: 20 },
  ]}
  caption="Demo table"
  striped
/>