Components / content

Table

Hairline Data Table, Optional Index Column

01 Preview

02 Usage

Tabular data in the spec-sheet idiom: hairline rules, tracked header labels, optional index column.

<Table
  index
  columns={[
    { key: 'name', label: 'Project' },
    { key: 'year', label: 'Year', align: 'right' },
    { key: 'stack', label: 'Stack' },
  ]}
  rows={[
    { name: 'Interaction Mining', year: '2025', stack: 'TS · Rust' },
    { name: 'darsan.dev', year: '2026', stack: 'HTML' },
  ]}
/>

Align numeric columns right. Cell values accept any node.

03 Props

PropTypeDefaultNotes
columns* TableColumn[] — —
rows* Record<string, React.ReactNode>[] — Row objects keyed by column `key`.
index boolean false Prepend a zero-padded index column.

Also accepts every attribute of React.TableHTMLAttributes<HTMLTableElement> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.

04 TableColumn

PropTypeDefaultNotes
key* string — —
label* React.ReactNode — —
align 'left' | 'center' | 'right' — —

05 Import

import { Table } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';