Table
Data table with column sorting and optional filtering
Same BEM classes and behavior as Astro, Svelte, and Vue.
Add this component
The command below includes <strong>Table</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.
Choose your package manager — click a tab to select, then copy the command.
pnpm dlx rizzo-css add Table
Live examples
React
Demo table | |
|---|
| Alpha | 10 |
| Beta | 20 |
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue 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
/>
Other frameworks: Astro · Vanilla · Svelte · Vue