Tables

Tables provide a structured way to display data in rows and columns. They support various content types, alignment options, and can be customized for different use cases.

Basic Usage

Use tables to display structured data with consistent column headers and row content.

Basic Table

100%

Customer

Date

Status

Amount

John Doe

Jul 29, 2024

Paid

$49.00

Jane Smith

Jul 28, 2024

Overdue

$149.00

<byte-table>
    <byte-table-header>
      <byte-table-cell>Customer</byte-table-cell>
      <byte-table-cell>Date</byte-table-cell>
      <byte-table-cell>Status</byte-table-cell>
      <byte-table-cell align="right">Amount</byte-table-cell>
    </byte-table-header>

    <byte-table-row>
      <byte-table-cell>John Doe</byte-table-cell>
      <byte-table-cell>Jul 29, 2024</byte-table-cell>
      <byte-table-cell>
        <byte-badge color="green">Paid</byte-badge>
      </byte-table-cell>
      <byte-table-cell amount>$49.00</byte-table-cell>
    </byte-table-row>

    <byte-table-row>
      <byte-table-cell>Jane Smith</byte-table-cell>
      <byte-table-cell>Jul 28, 2024</byte-table-cell>
      <byte-table-cell>
        <byte-badge color="red">Overdue</byte-badge>
      </byte-table-cell>
      <byte-table-cell amount>$149.00</byte-table-cell>
    </byte-table-row>
  </byte-table>

Rich Content

Tables can display complex content including images, badges, buttons, and other components.

Rich Content Table

100%

User

Role

Actions

John Doe

john@example.com

Admin

<byte-table>
    <byte-table-header>
      <byte-table-cell>User</byte-table-cell>
      <byte-table-cell>Role</byte-table-cell>
      <byte-table-cell align="right">Actions</byte-table-cell>
    </byte-table-header>

    <byte-table-row>
      <byte-table-cell>
        <div class="flex items-center gap-3">
          <img src="https://byteui.dev/assets/andrea-fomera-8411cac6.jpg" class="size-8 object-cover rounded-full">
          <div>
            <div class="font-medium text-zinc-900 dark:text-white">John Doe</div>
            <div class="text-zinc-500">john@example.com</div>
          </div>
        </div>
      </byte-table-cell>
      <byte-table-cell>
        <byte-badge color="blue">Admin</byte-badge>
      </byte-table-cell>
      <byte-table-cell align="right">
        <div class="flex justify-end gap-2">
          <byte-button variant="ghost" size="sm">Edit</byte-button>
          <byte-button variant="ghost" size="sm" color="red">Delete</byte-button>
        </div>
      </byte-table-cell>
    </byte-table-row>
  </byte-table>

Cell Alignment

Control the alignment of cell content using the align attribute.

Cell Alignment

100%

Left (Default)

Center

Right

Content

<byte-table>
    <byte-table-header>
      <byte-table-cell>Left (Default)</byte-table-cell>
      <byte-table-cell align="center">Center</byte-table-cell>
      <byte-table-cell align="right">Right</byte-table-cell>
    </byte-table-header>

    <byte-table-row>
      <byte-table-cell>Content</byte-table-cell>
      <byte-table-cell align="center">Content</byte-table-cell>
      <byte-table-cell align="right">Content</byte-table-cell>
    </byte-table-row>
  </byte-table>

API Reference

Table Cell Properties

Property

Type

Default

Description

align

string

'left'

'left', 'center', 'right'

amount

boolean

false

Styles cell as monetary amount

Common Patterns

Data Table

Data Table Pattern

100%

Date

Description

Amount

#1234

2024-07-29

Monthly Subscription

$29.00

<byte-table>
    <byte-table-header>
      <byte-table-cell>ID</byte-table-cell>
      <byte-table-cell>Date</byte-table-cell>
      <byte-table-cell>Description</byte-table-cell>
      <byte-table-cell align="right">Amount</byte-table-cell>
    </byte-table-header>

    <byte-table-row>
      <byte-table-cell>#1234</byte-table-cell>
      <byte-table-cell>2024-07-29</byte-table-cell>
      <byte-table-cell>Monthly Subscription</byte-table-cell>
      <byte-table-cell amount>$29.00</byte-table-cell>
    </byte-table-row>
  </byte-table>

User List

User List Pattern

100%

User

Status

Role

Actions

John Doe

Active

Admin

<byte-table>
    <byte-table-header>
      <byte-table-cell>User</byte-table-cell>
      <byte-table-cell>Status</byte-table-cell>
      <byte-table-cell>Role</byte-table-cell>
      <byte-table-cell align="right">Actions</byte-table-cell>
    </byte-table-header>

    <byte-table-row>
      <byte-table-cell>
        <div class="flex items-center gap-3">
          <byte-avatar size="sm" fallback="JD"></byte-avatar>
          <div>John Doe</div>
        </div>
      </byte-table-cell>
      <byte-table-cell>
        <byte-badge color="green">Active</byte-badge>
      </byte-table-cell>
      <byte-table-cell>Admin</byte-table-cell>
      <byte-table-cell align="right">
        <byte-button variant="ghost" size="sm" icon="pencil">Edit</byte-button>
      </byte-table-cell>
    </byte-table-row>
  </byte-table>

Best Practices

Use clear, descriptive column headers
Align numerical data to the right
Keep table content concise
Use consistent formatting within columns
Consider mobile responsiveness
Group related data in adjacent columns

Pro tip: Use the amount attribute on cells containing monetary values for consistent formatting.