UI Framework - Table

Table Reference ↓

Sizes

@xs	Customer	Plan	Status
#4821	Ada Lovelace	Pro	Paid
#4820	Alan Turing	Enterprise	Pending

@s	Customer	Plan	Status
#4821	Ada Lovelace	Pro	Paid
#4820	Alan Turing	Enterprise	Pending

m	Customer	Plan	Status
#4821	Ada Lovelace	Pro	Paid
#4820	Alan Turing	Enterprise	Pending

@l	Customer	Plan	Status
#4821	Ada Lovelace	Pro	Paid
#4820	Alan Turing	Enterprise	Pending

@xl	Customer	Plan	Status
#4821	Ada Lovelace	Pro	Paid
#4820	Alan Turing	Enterprise	Pending

Striped

A	B	C	D
Row 1 A	Row 1 B	Row 1 C	Row 1 D
Row 2 A	Row 2 B	Row 2 C	Row 2 D
Row 3 A	Row 3 B	Row 3 C	Row 3 D
Row 4 A	Row 4 B	Row 4 C	Row 4 D

Hover

A	B	C	D
Row 1 A	Row 1 B	Row 1 C	Row 1 D
Row 2 A	Row 2 B	Row 2 C	Row 2 D
Row 3 A	Row 3 B	Row 3 C	Row 3 D
Row 4 A	Row 4 B	Row 4 C	Row 4 D

Divider

A	B	C	D
Row 1 A	Row 1 B	Row 1 C	Row 1 D
Row 2 A	Row 2 B	Row 2 C	Row 2 D
Row 3 A	Row 3 B	Row 3 C	Row 3 D
Row 4 A	Row 4 B	Row 4 C	Row 4 D

Divider + Striped

A	B	C	D
Row 1 A	Row 1 B	Row 1 C	Row 1 D
Row 2 A	Row 2 B	Row 2 C	Row 2 D
Row 3 A	Row 3 B	Row 3 C	Row 3 D
Row 4 A	Row 4 B	Row 4 C	Row 4 D

Scrollable wide table

Col 1	Col 2	Col 3	Col 4	Col 5	Col 6	Col 7	Col 8	Col 9
A1	A2	A3	A4	A5	A6	A7	A8	A9
B1	B2	B3	B4	B5	B6	B7	B8	B9
C1	C2	C3	C4	C5	C6	C7	C8	C9

Reference

Base

Class	Values
`.ui-table`	base class (required on <table>)
`.ui-table-striped`	alternating row background
`.ui-table-hover`	hover highlight on <tr>
`.ui-table-divider`	horizontal row dividers
`.ui-table-responsive`	scroll wrapper for wide tables

Modifiers

Class	Values
`.ui-table@*`	xs, s, m, l, xl

Options

Class	Values