Table

import { Table } from "@sugarcoat/ui-nxt";

<Table>
<Table.Header>
  <Table.Row>
    <Table.HeaderCell>Name</Table.HeaderCell>
  </Table.Row>
</Table.Header>
<Table.Body>
  <Table.Row>
    <Table.Cell>Value</Table.Cell>
  </Table.Row>
</Table.Body>
</Table>

Basic Usage#

A simple table with headers and data rows.

Anatomy#

The Table component uses a compound component pattern:

<Table>
  <Table.Header>      {/* thead element */}
    <Table.Row>       {/* tr element */}
      <Table.HeaderCell />  {/* th element */}
    </Table.Row>
  </Table.Header>
  <Table.Body>        {/* tbody element */}
    <Table.Row>
      <Table.Cell />  {/* td element */}
    </Table.Row>
  </Table.Body>
  <Table.Footer />    {/* tfoot element */}
</Table>

Aliases: Table.Thead, Table.Tbody, Table.Tfoot, Table.Tr, Table.Th, Table.Td

Sizes#

Tables come in three sizes: sm, md (default), and lg.

Striped Rows#

Add alternating row colors for better readability.

Hover Effect#

Add hover highlighting to rows.

Compact Mode#

Use compact mode for denser data display.

Text Alignment#

Control text alignment with left, center, or right.

With Footer#

Tables can include a footer section for totals or summaries.

Combined Features#

Use multiple features together for rich table displays.

Using Aliases#

The Table component provides shorter aliases for convenience.

Props#

Table (Root)#

Table.HeaderCell (Th)#

Table.Cell (Td)#