Table Styles

Provides fully-featured table styles with configurable colors, row behaviors, hover effects, sorting, expandable rows, and alignment utilities.

Name	Age	Email
John Doe	20	john@example.com
Jane Smith	25	jane.smith@example.com
Jack Ma	39	jack.ma@example.com
Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi.	44	jack.ma@example.com

Name	Age	Email
John Doe	20	john@example.com
Jane Smith	25	jane.smith@example.com
Jack Ma	39	jack.ma@example.com
Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi.	44	jack.ma@example.com

Usage

Signature:

@mixin use-table($colors: ());

Example:

// Apply all registered color variants
@include termeh.use-table();

// Apply only specific color variants
@include termeh.use-table(("primary", "error"));

Module:

This module is registered as table in the presented modules.

Dependencies

Table module uses the following Termeh global var():

Component	Type	Usage	Default
base → color	Color	Fallback base table background	white
base → section	Color	Fallback background for even rows and row hover	null
base → separator	Color	Fallback color for table separators and dividers	null
strong → weight	String	Fallback font weight for headers	bold
table → background	Color	Main table background	FALLBACK
table → foreground	Color	Default table text color	null
table → even	Color	Even row background	FALLBACK
table → hover	Color	Hover row background	FALLBACK
table → grid	Color	Grid line color	null
table → divider	Color	Section divider color	FALLBACK
table → separator	Color	Row separator color	FALLBACK
table → decorator	Color	Sort decorator color	error
table → sort-background	Color	Sorted column background	FALLBACK
table → strong-weight	String	Strong font weight for headers	FALLBACK

---

Table module uses the following Termeh color() and variant():

Color / Variant	Usage	Default
primary	Accent color for scrollbars	error
shade	Fallback color for sort backgrounds and decorators	error

Table Container

You can wrap your table inside .table-container to enable scrolling on overflow.

Modifiers

• .is-fullwidth → makes the table span 100% width
• .is-stripped → applies alternating background to even rows
• .is-hoverable → highlights rows on hover
• .is-<color> → applies a registered color as accent color

Child Elements

• <thead> → include header rows
  • <tr> → define a header row
    • <th> → define a header column
• <tbody> → include table content
  • <tr> → define a body row
    • <td> → define a body column
• <tfoot> → include table footer and summary
  • <tr> → define a footer row
    • <td> → define a footer column

Header Modifiers

• .is-center-aligned → centers text inside column
• .is-right-aligned → right-aligns text inside column
• .is-left-aligned → left-aligns text inside column
• .is-ellipsis → truncates overflowing text in column with ellipsis
• .is-filler → expands column to fill remaining space
• .is-sortable → makes a column sortable
• .is-sorted → marks a column as sorted
• .is-asc → marks sorted column as ascending
• .is-desc → marks sorted column as descending

Body And Footer Modifiers

• ROW

  • .is-even → applies alternate background to even rows
  • .extra → marks row as extra content for the previous row
  • .is-expanded → shows the next .extra row

• COLUMN

  • .is-center-aligned → centers text inside column
  • .is-right-aligned → right-aligns text inside column
  • .is-left-aligned → left-aligns text inside column
  • .is-ellipsis → truncates overflowing text in column with ellipsis
  • .is-filler → expands column to fill remaining space
  • .is-multiline → allows multi-line text inside column
  • .is-sorted → marks a column as sorted
  • .is-<color> → apply light highlight to column