Brand Theme locked Header background and text colour — the brand stamp on every table.
Header Background
Background colour of the header row.
Header Text
Text colour in the header row.
Background (Light)
Table body background in light mode.
Background (Dark)
Table body background in dark mode.
Table Shape
Corner roundness — pointy, regular, or roundy.
pointy regular roundy
Shadow
Outer box-shadow. Empty = no shadow.
Card Border (Light)
Container border + every divider colour, light mode.
Card Border (Dark)
Container border + every divider colour, dark mode.
Theme Mode
auto = follow the consumer's global theme (.dark class on <html>). light/dark = force regardless of consumer.
auto light dark
Pagination locked Page-size selector, row counter, and page navigation.
Rows Per Page
How many rows show when the page first loads.
10 25 50 100 250
Rows-Per-Page Choices
Comma-separated list of selectable row counts.
Show Row Counter
Display "Showing X–Y of Z" on the left of the bar.
Word For "Rows"
Word used in the counter copy: rows, items, records, ...
Hide When Fewer Than
Don't show pagination bar when the table has fewer than this many rows.
10 rows 25 rows 50 rows 100 rows never hide
Row Density Row height and cell padding scale.
Spacing
How tall rows and cells are.
compact regular spacious
Zebra Stripes Alternating row or column backgrounds for readability.
Stripe Rows
Alternate row backgrounds.
Stripe Columns
Alternate column backgrounds.
Odd Row BG
Background for odd-indexed rows. Dark-mode tuning in CSS module.
Even Row BG
Background for even-indexed rows. Empty = container bg.
Dividers Borders between rows, columns, and below the header.
Row Dividers
Border between rows.
Column Dividers
Border between columns.
Header Underline
Border between header and body — brand stamp.
Sticky Header Header row stays pinned at the top while the body scrolls.
Single-toggle wildcard. Active by default; no editable fields.
Row Hover / Selection Row appearance when the cursor is over it.
Hover Background
Tint for the row under the cursor. Dark-mode tuning in CSS module.
Row Status Tints Semantic row backgrounds. Consumers declare a variant key (cancelled, quote, closed, success, warning, destructive, info, muted) per row; this catalog supplies the actual colour.
Cancelled / Voided
Strike-through, void, batal.
Draft / Quote
Pending, draft, quote.
Closed / Settled
Closed, settled, locked.
Success / Paid
Paid, lunas, terbayar.
Warning / Partial
Partial, overdue, watch-list.
Destructive / Error
Unpaid, overdue red-line, hard errors.
Info / Highlight
Currently-selected, expanded, info note.
Muted / Inactive
Inactive, archived, dimmed.
Cancelled · Hover BG
Hover bg for cancelled rows. Dark-mode tuning in CSS module.
Cancelled · Cell Text Colour
Cell text colour for cancelled rows.
Cancelled · Cell Decoration
Cell text decoration for cancelled rows (line-through, underline, none).
line-through underline none
Cancelled · Cell Weight
Cell font weight for cancelled rows.
regular medium semibold bold
Quote · Hover BG
Hover bg for quote rows.
Closed · Hover BG
Hover bg for closed rows.
Badge Variants Background + foreground colour for the Badge component, keyed by semantic variant. Consumers pass variant="success" / "warning" etc.; this catalog supplies the colours.
Neutral · Background
Default / inactive badge.
Neutral · Text
Default / inactive badge text.
Success · Background
Paid, complete, lunas.
Success · Text
Paid badge text.
Warning · Background
Partial, overdue.
Warning · Text
Partial badge text.
Destructive · Background
Unpaid, cancelled, error.
Destructive · Text
Unpaid badge text.
Info · Background
Highlighted, in-progress.
Info · Text
Info badge text.
Muted · Background
Inactive, archived.
Muted · Text
Muted badge text.
Quote · Background
Draft / quote.
Quote · Text
Quote badge text.
Quote · Border
Border colour for inline quote ribbons.
Closed · Background
Closed / settled.
Closed · Text
Closed badge text.
Accent · Background
Featured / promoted.
Accent · Text
Accent badge text.
Click-To-Sort Columns locked Click a column header to sort the table by that column. Always present — every list table is sortable.
First-Click Order
Sort order applied the first time a column is clicked.
asc desc
Multi-Column Sort
Hold Shift while clicking to sort by multiple columns.
Expandable Rows Click a row to reveal an inline detail panel below it.
Expansion Mode
Single-row keeps only one panel open. Multi-row allows several open at once.
single-row multi-row
Mass Selection Checkbox column with select-all header for bulk actions.
Selection Mode
Single-row picks one at a time. Multi-row allows several.
single-row multi-row
Select-All in Header
Show the select-all checkbox in the header row.
Total Row Aggregate row in the footer or above the header showing sums/counts.
Position
Where the total row renders: bottom (footer), top (banner), both, or none.
top bottom both none
Label
Word prefixed to the total row.
Sticky
Keep the total row pinned during body scroll.
Outer Border Border around the whole table.
Thickness
How thick the border looks.
thin regular thick extra thick
When No Data locked What the table shows when there are no rows.
Hide Frame When Empty
Hide the header row and footer when there is no data.
No-Data Message
Text shown when there is no data.
Typography locked Font family, size, weight for header + body.
Font Family (All)
Default CSS font-family for the whole table.
Custom Font URL
Optional .woff2 URL — injected as @font-face when set.
Text Cell Font
Override font-family for text cells.
Numeric Cell Font
Override font-family for numeric cells.
Header Size
Size of the column-header row.
tiny small regular medium large
Header Weight
How bold the header text is.
light regular medium semibold bold black
Body Size
Size of body row text.
tiny small regular medium large
Body Weight
How bold body text is.
light regular medium semibold bold
Header Tracking
Tightness of the spacing between letters.
tight normal wide extra wide
Date Format
How date columns render.
short long slash iso
Mobile Cutoff Below this screen width the table collapses into a card list.
Cutoff Width
Small / medium / large screen cutoff.
sm md lg
Category Badges Render the category column as colour-toned badges.
Single-toggle wildcard. Active by default; no editable fields.
Payment-Method Labels Display text for each payment-method slot.
Single-toggle wildcard. Active by default; no editable fields.
Total Row Aggregate total row — renders in the footer, above the header, or both.
Position
Where the total row renders.
top bottom both none
Total Label
Word prefixed to the total row.