Table
Sortable columns, a cursor row, zebra stripes and figures that line up.
| C | Static | 1972 |
| Go | Static | 2009 |
| Haskell | Static | 1990 |
| Lua | Dynamic | 1993 |
| Python | Dynamic | 1991 |
| Rust | Static | 2015 |
| TypeScript | Static | 2012 |
| Zig | Static | 2016 |
Features
- Sortable columns, a cursor row, zebra stripes, figures at one width; rows glide when sorted.
Use it for
- Results, inventories.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react motion lucide-react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
Usage
import { Table } from 'runets'
<Table label="Languages" rows={rows} columns={[{ id: 'language', title: 'Language' }, { id: 'year', title: 'First release', align: 'end' }]} />API
| Prop | Type | What it does |
|---|---|---|
columns | Column[] | { id, title, align, format }. |
rows | T[] | Data. |
Accessibility
- aria-sort on headers; Up and Down move the cursor.
Source
The code is in src/kit/surfaces.tsx in runets, MIT licensed.