# Table

Source: https://lumeo.nativ.sh/components/table

# Table

A responsive table component for displaying tabular data.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Table />

## When to Use

-   Display structured, tabular data such as invoices, user lists, or logs.
-   Show comparison data with consistent columns and rows.
-   Present simple read-only lists. For sortable or interactive tables, consider DataTable.

Preview Code

Default

A list of recent invoices.

Invoice

Status

Method

Amount

INV001

Paid

Credit Card

$250.00

INV002

Pending

PayPal

$150.00

INV003

Unpaid

Bank Transfer

$350.00

INV004

Paid

Credit Card

$450.00

INV005

Paid

PayPal

$550.00

INV006

Pending

Bank Transfer

$200.00

INV007

Unpaid

Credit Card

$300.00

Preview Code

Simple Table

Name

Role

Department

Alice Johnson

Engineer

Engineering

Bob Smith

Designer

Product

Carol Williams

Manager

Operations

Preview Code

Table with Status Badges

Task

Assignee

Priority

Status

Design onboarding flow

Alice Johnson

High

In Progress

Fix login bug

Bob Smith

Critical

Done

Write API docs

Carol Williams

Medium

Todo

Update homepage copy

David Lee

Low

In Progress

Code review: auth module

Alice Johnson

High

Todo

Preview Code

Table with Pagination

Showing 1–3 of 7 invoices

Invoice

Status

Method

Amount

INV001

Paid

Credit Card

$250.00

INV002

Pending

PayPal

$150.00

INV003

Unpaid

Bank Transfer

$350.00

Previous Page 1 of 3 Next

## API Reference

### Table Components

Component

Element

Description

Table

<table>

Root table element wrapped in a scrollable container.

TableHeader

<thead>

Table header section containing header rows.

TableBody

<tbody>

Table body containing data rows.

TableRow

<tr>

A table row with hover highlight and border styling.

TableHead

<th>

A header cell with muted foreground text. All accept Class and AdditionalAttributes.

TableCell

<td>

A data cell with standard padding.

TableCaption

<caption>

Optional caption displayed below the table in muted text.

## Related Components

-   [DataTable](/components/data-table) — Use for interactive tables with sorting, filtering, and row selection.
-   [Pagination](/components/pagination) — Pair with Table for navigating large data sets across pages.
-   [Card](/components/card) — An alternative layout for displaying individual records in a grid.