ThryndThrynd Docs
GitHub

Tables

Responsive data tables with hover states, sorting, and mobile-friendly layouts.

Basic Table

Use the table class for basic table styling with borders and hover effects.

Basic Table

NameEmailRole
John Doejohn@example.comAdmin
Jane Smithjane@example.comUser
Bob Johnsonbob@example.comUser

Table Variants

Bordered Table

Add table-bordered for borders on all cells.

Bordered Table

ProductPriceStock
Widget A$29.99150
Widget B$39.9975

Striped Table

Add table-striped for alternating row colors.

Striped Table

IDNameStatus
001Project AlphaActive
002Project BetaCompleted
003Project GammaActive

Table with Components

Combine tables with other Thrynd components for rich data displays.

Table with Avatars and Badges

UserStatusRoleActions
JD
John Doe
ActiveAdmin
JS
Jane Smith
PendingUser

Responsive Tables

Wrap tables in table-responsive for horizontal scrolling on small screens.

Responsive Wrapper

Column 1Column 2Column 3Column 4Column 5
Data 1Data 2Data 3Data 4Data 5

Table Sizes

Small Table

Compact Table

NameValue
Setting 1Enabled
Setting 2Disabled

Accessibility

Best Practices:
  • Use <thead>, <tbody>, and <th> elements
  • Add scope attribute to header cells
  • Use <caption> to describe table content
  • Ensure sufficient color contrast for all text
  • Make sortable columns keyboard accessible
  • Use aria-label for icon-only action buttons
← ModalsNext: Avatars →