Table

Semantic <table> markup with caption and scope, styled with glass row separators.

Group: Data Display · Import path: @orionshub/lucent/table · Server-safe — renders on the server without a client bundle.

Import

import { Table } from '@orionshub/lucent'
import '@orionshub/lucent/styles.css' // once, at your app root

Examples

Semantic table

Semantic table

Show source

export function TableBasic() {
  return (
    <Table style={{ minWidth: 260 }}>
      <Table.Caption>Quarterly revenue</Table.Caption>
      <Table.Header>
        <Table.Row>
          <Table.Head>Quarter</Table.Head>
          <Table.Head>Revenue</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Head scope="row">Q1</Table.Head>
          <Table.Cell>$1.2M</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Head scope="row">Q2</Table.Head>
          <Table.Cell>$1.8M</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  )
}

Props

Table

This component forwards native element props. It exposes no additional public props, or its props are documented inline above.

TableCell

This component forwards native element props. It exposes no additional public props, or its props are documented inline above.

TableRow

This component forwards native element props. It exposes no additional public props, or its props are documented inline above.

Guidance

One-time CSS import

Import the compiled stylesheet once at your app root: import '@orionshub/lucent/styles.css'. Components ship stable class names and read design tokens from CSS custom properties — there is no style runtime. See CSS Import.

Transparency & solid mode

Every glass surface reads --lucent-glass-opacity (0.60–1.0). Dial it at runtime with setGlassOpacity(), or switch to setContrast('solid') for a fully opaque, high-contrast rendering. See Transparency & Solid Mode.

RTL

Authored with CSS logical properties — set dir="rtl" on a parent (or the document) and layout mirrors with no JS. Toggle RTL from the glass-controls panel to preview. See RTL Support.

SSR / Next.js

Server-safe — renders on the server without a client bundle. All components are safe to import in a Server Component tree; interactive ones carry their own "use client" boundary. See SSR & Next.js.