LA UI Style Guide

08. Components: tables.css

Tables are for structured data that users need to scan. Keep columns readable, actions compact, and filters visible.

Use tables for

Use tables for admin lists, imports, reports, review queues, and data-heavy pages.
Wrap all tables in .la-table-wrap to handle overflow and borders.

Base table

Always wrap in .la-table-wrap for scroll and border handling. Use .la-table-wrap-plain when the table sits inside a panel or card that already provides the border. Cell helpers control text weight, color, and number formatting.

.la-table-wrap .la-table : cell helpers

Name	Note	Count	Score	Status
Academic workflow	Submitted for review on 12 Jan	1,204	94.25	Active
Equipment checkout	Pending approval from department head	88	81.00	Pending
Import batch 47	Archived after end of term	3,571	72.10	Archived

.la-table-empty : inline empty state

Renders inside .la-table-wrap in place of the table. Use this for table-scoped empty results, such as no matching filter. For page-level empty states with an icon and action, use .la-empty from feedback.css instead.

No records found.

.la-table-wrap-plain : borderless inside a panel

Inside a panel

Name	Score
Row one	91.00
Row two	74.50

Row states

.la-row-highlight tints the row amber for items that need attention. .la-row-invalid tints the row red for error rows. Both states intensify on hover. .la-row-muted dims the row and suppresses hover for disabled or archived rows. .la-td-actions keeps the action column compact and right-aligned. .la-table-actions is the bulk-action row below the table.

.la-row-highlight .la-row-invalid .la-row-muted .la-td-actions

Name	Status	Actions
Normal row	Active
Highlighted row	Needs review
Invalid import row	Error
Archived row	Archived	View

Sortable columns

Add data-sortable to .la-table : the table expands to content width and headers stay on one line. Wrap each header's content in .la-th-inner to place the sort link and column filter button side by side. Sort links get a subtle ⇕ hint through CSS so users know the column is clickable. .la-th--sorted marks the active column in brand color and hides the hint arrow. .la-th--formula styles computed columns.

.la-table[data-sortable] .la-th-inner .la-sort-link .la-col-filter

Name ↑	Status	Department	Score^fx	Actions
Academic workflow	Active	Student Affairs	94.25
Equipment checkout	Review	Facilities	81.00

Active filters

Place .la-active-filters directly above the table. Each .la-filter-badge chip shows a column name (.la-filter-badge-col), its selected values (.la-filter-badge-vals), and a remove link (.la-filter-badge-remove).

.la-active-filters .la-filter-badge

Status Active, Pending × Owner Student Affairs × Year 2025 ×

Filter panel

The filter panel is normally position: absolute and opened by a column filter button. In production, JS toggles it. The demo keeps it static so the internals are visible. .la-filter-panel-body holds the search input, select-all, and value list. .la-filter-panel-footer holds the clear and apply actions.