Table · LoamUI

Import

import { Table } from "@loamui/core";

Usage

Every example has a CSStab. That’s the real, complete stylesheet for the component: plain, static CSS, with nothing running in the browser.

Basic

Invoices
Invoice	Status	Amount
INV-1024	Paid	$1,240.00
INV-1025	Pending	$820.00
INV-1026	Paid	$2,010.00
INV-1027	Overdue	$640.00

Striped

Shade alternating body rows and add column borders.

Invoices
Invoice	Status	Amount
INV-1024	Paid	$1,240.00
INV-1025	Pending	$820.00
INV-1026	Paid	$2,010.00
INV-1027	Overdue	$640.00

Highlight on hover

Rows highlight under the pointer; a caption labels the table.

Recent invoices by status
Invoice	Status	Amount
INV-1024	Paid	$1,240.00
INV-1025	Pending	$820.00
INV-1026	Paid	$2,010.00
INV-1027	Overdue	$640.00

Guidance

When to use it

To compare structured records across shared attributes: rows are things, columns are facts about them, and the grid is what makes scanning a column meaningful.
When users need to run their eye down one attribute across many records: amounts, statuses, dates.

When not to

For page layout. A table announces row and column semantics to assistive tech, and non-tabular content wrapped in those semantics becomes a maze to navigate. Use CSS grid.
For records with one attribute each. That is a list; a one-column table adds table navigation overhead for nothing.
When each record is rich, heterogeneous content. A grid of Cards reads better than cells straining to hold paragraphs.

Accessibility

Renders a native <table>: row and column navigation, header association and table announcement all come from the platform, provided your markup supplies th, scope and caption.
Give every table a <caption>: it is the table's accessible name, announced when screen-reader users list or enter the table.
Mark header cells with scope (<th scope="col"> in thead, <th scope="row"> for row headers) so data cells are read with their headers as context.
The scroll wrapper keeps horizontal overflow inside the component, so zoomed-in and small-viewport users scroll the table, not the whole page.
striped and highlightOnHover are visual aids only: never encode meaning in row shading, because assistive tech does not announce it.

How it works

The markup is yours: keep it semantic

Table styles native thead/tbody/tr/th/td and re-implements nothing, so whatever semantics you write are exactly what assistive tech receives. That cuts both ways: mark header cells <th scope="col"> (or scope="row" for row headers) so each data cell is announced with its headers, and never reach for a table where the content is not actually tabular.

Wide tables scroll in place

The table ships inside a scroll wrapper with overflow-inline: auto, so an overflowing table scrolls horizontally within its own container instead of stretching the page. Whether a table should instead reflow into cards or lists on small screens is your layout call. The component keeps the table a table and makes overflow survivable.

Caption every table

A <caption> names the table in its own words: it is what screen readers announce when listing the page's tables, and what sighted users read to know whether to bother scanning. captionSide places it above or below; a heading near the table is not a substitute, because it is not programmatically attached.

Props

Prop	Type	Default	Description
`striped`	`boolean`	—	Shade alternating body rows.
`highlightOnHover`	`boolean`	—	Highlight the row under the pointer.
`withColumnBorders`	`boolean`	—	Draw vertical borders between columns.
`captionSide`	`"top" \| "bottom"`	`"top"`	Which side to place a <caption>.
`...others`	`TableHTMLAttributes`	—	All native <table> props are forwarded.