TableLight

PreviousNext

Lightweight table shell (native table markup as children).

import { TableLight } from "@/rl-ui";

<TableLight className="w-full">
<thead>
  <tr>
    <th>Name</th>
    <th>Status</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Acme</td>
    <td>Active</td>
  </tr>
</tbody>
</TableLight>

Examples

Typical markup

Pass standard table sections as children. Live preview shows a compact stand-in; copy the code for full markup.

import { TableLight } from "@/rl-ui";

<TableLight>
<thead>
  <tr>
    <th>Project</th>
    <th>Owner</th>
    <th>Status</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Acme rollout</td>
    <td>Ada</td>
    <td>Active</td>
  </tr>
  <tr>
    <td>Northstar</td>
    <td>Alan</td>
    <td>At risk</td>
  </tr>
</tbody>
</TableLight>

With cell helpers

Compose CellLink, CellLayout, Badge, and EmptyCell inside real <td> cells.

import {
TableLight,
CellLink,
CellLayout,
Badge,
EmptyCell,
} from "@/rl-ui";

<TableLight>
<thead>
  <tr>
    <th>Name</th>
    <th>Status</th>
    <th>Notes</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>
      <CellLink href="#acme">Acme rollout</CellLink>
    </td>
    <td>
      <CellLayout gap="2">
        <Badge color="green">Active</Badge>
      </CellLayout>
    </td>
    <td>
      <EmptyCell />
    </td>
  </tr>
</tbody>
</TableLight>

Compact density

import { TableLight } from "@/rl-ui";

<TableLight className="text-xs">
<thead>
  <tr><th>Key</th><th>Value</th></tr>
</thead>
<tbody>
  <tr><td>Region</td><td>US-East</td></tr>
  <tr><td>Tier</td><td>Pro</td></tr>
</tbody>
</TableLight>

API

PropTypeDefaultDescription
classNamestring—Classes on the inner <table>.
childrenReactNode—Native thead/tbody/tr/th/td (or caption) markup.
…HTMLAttributes<table>—All native table attributes (id, aria-*, etc.).