Vanilla Breeze

Table Static Examples

CSS-only table features including sticky headers, columns, density variants, and row states.

Sticky Header

The header row stays fixed while scrolling vertically. Uses data-sticky="header".

Name Email Department
Alice Chen [email protected] Engineering
Bob Martinez [email protected] Marketing
Carol Johnson [email protected] Sales
David Kim [email protected] Engineering
Emma Wilson [email protected] Design
Frank Brown [email protected] Support
Grace Lee [email protected] Engineering
Henry Davis [email protected] Finance
Ivy Thomas [email protected] Marketing
Jack White [email protected] Sales
Karen Moore [email protected] Engineering
Leo Garcia [email protected] Design

Sticky Column

The first column stays fixed while scrolling horizontally. Uses data-sticky="column".

ID Name Email Department Location
EMP-001 Alice Chen [email protected] Engineering San Francisco
EMP-002 Bob Martinez [email protected] Marketing New York
EMP-003 Carol Johnson [email protected] Sales Chicago
EMP-004 David Kim [email protected] Engineering Seattle
EMP-005 Emma Wilson [email protected] Design Austin

Sticky Header and Column

Both the header row and first column stay fixed. The corner cell remains visible at all scroll positions. Uses data-sticky="both".

ID Name Email Department Location Start Date
EMP-001 Alice Chen [email protected] Engineering San Francisco 2021-03-15
EMP-002 Bob Martinez [email protected] Marketing New York 2020-07-22
EMP-003 Carol Johnson [email protected] Sales Chicago 2019-11-01
EMP-004 David Kim [email protected] Engineering Seattle 2022-01-10
EMP-005 Emma Wilson [email protected] Design Austin 2021-09-05
EMP-006 Frank Brown [email protected] Support Denver 2020-04-18
EMP-007 Grace Lee [email protected] Engineering Boston 2023-02-28
EMP-008 Henry Davis [email protected] Finance Miami 2018-06-12

Sticky 2 Columns

The first two columns stay fixed while scrolling horizontally. Uses data-sticky-column="2".

ID Name Email Department Location Manager Status
EMP-001 Alice Chen [email protected] Engineering San Francisco Sarah Parker Active
EMP-002 Bob Martinez [email protected] Marketing New York Mike Thompson Active
EMP-003 Carol Johnson [email protected] Sales Chicago Lisa Anderson Active
EMP-004 David Kim [email protected] Engineering Seattle Sarah Parker On Leave

Density Variants

Adjust table padding for different use cases with data-density.

Compact

Name Role
Alice Chen Engineer
Bob Martinez Designer
Carol Johnson Manager

Comfortable

Name Role
Alice Chen Engineer
Bob Martinez Designer
Carol Johnson Manager

Row States

Visual states for table rows including selected, disabled, and highlighted.

Name Email Status
Alice Chen [email protected] Normal row
Bob Martinez [email protected] Selected row (data-selected)
Carol Johnson [email protected] Normal row
David Kim [email protected] Highlighted row (data-highlight)
Emma Wilson [email protected] Normal row
Frank Brown [email protected] Disabled row (data-disabled)
↑