Table
A set of structured data that is easy for a user to scan, examine, and compare.
Props
sortMode
GoabTableSortMode single | multi
Sort mode: "single" allows one column, "multi" allows up to 2 columns.
Defaults to
single.
striped
boolean
When true, alternates row background colors for improved readability.
testId
string
Sets a data-testid attribute for automated testing.
variant
GoabTableVariant normal | relaxed
A relaxed variant of the table with more vertical padding for the cells.
Defaults to
normal.
width
string
Width of the table. By default it will fit the enclosed content.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
Events
onMultiSort
(detail: GoabTableOnMultiSortDetail) => void
Callback fired when multi-column sorting changes.
onSort
(detail: GoabTableOnSortDetail) => void
Callback fired when a single-column sort header is clicked.
Table Sort Header Props
direction
GoabTableSortDirection asc | desc | none
Sets the sort direction indicator.
Defaults to
none.
name
string
Column name identifier for sorting.
sortOrder
GoabTableSortOrder 1 | 2
Sort order number for multi-column sort display. Used for displaying priority numbers when multiple columns are sorted.
Types
Tip
Use variant='relaxed' for tables with longer content that needs more breathing room between rows.
Screen Readers
Do
Use proper semantic HTML table structure (thead, tbody, tr, th, td) for accessibility.
