Data Table

Scrollable table with row selection and vim-style navigation

LOCALHOST:3000

| Name       | Status  |
|------------|--------|
| John Doe   | Active |

NORMAL100%

API Reference

Prop	Type	Required	Description
columns	TableColumn[]	YES	Column definitions
data	TableRow[]	YES	Data rows
maxVisibleRows	number	-	Maximum visible rows (default: 10)
onSelect	(row, index) => void	-	Row selection callback

InstallationBASH

npx siddcn add table

UsageTSX

import { Table } from 'siddcn';

const columns = [
  { key: 'name', header: 'Name', width: 20 },
  { key: 'status', header: 'Status', width: 10 }
];

const data = [
  { name: 'John Doe', status: 'Active' },
  { name: 'Jane Smith', status: 'Pending' }
];

export default function App() {
  return <Table columns={columns} data={data} maxVisibleRows={10} />;
}