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-layout-sticky="header".

Name Email Department
Alice Chen alice.chen@company.com Engineering
Bob Martinez bob.martinez@company.com Marketing
Carol Johnson carol.johnson@company.com Sales
David Kim david.kim@company.com Engineering
Emma Wilson emma.wilson@company.com Design
Frank Brown frank.brown@company.com Support
Grace Lee grace.lee@company.com Engineering
Henry Davis henry.davis@company.com Finance
Ivy Thomas ivy.thomas@company.com Marketing
Jack White jack.white@company.com Sales
Karen Moore karen.moore@company.com Engineering
Leo Garcia leo.garcia@company.com Design

Sticky Column

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

ID Name Email Department Location
EMP-001 Alice Chen alice.chen@company.com Engineering San Francisco
EMP-002 Bob Martinez bob.martinez@company.com Marketing New York
EMP-003 Carol Johnson carol.johnson@company.com Sales Chicago
EMP-004 David Kim david.kim@company.com Engineering Seattle
EMP-005 Emma Wilson emma.wilson@company.com 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-layout-sticky="both".

ID Name Email Department Location Start Date
EMP-001 Alice Chen alice.chen@company.com Engineering San Francisco 2021-03-15
EMP-002 Bob Martinez bob.martinez@company.com Marketing New York 2020-07-22
EMP-003 Carol Johnson carol.johnson@company.com Sales Chicago 2019-11-01
EMP-004 David Kim david.kim@company.com Engineering Seattle 2022-01-10
EMP-005 Emma Wilson emma.wilson@company.com Design Austin 2021-09-05
EMP-006 Frank Brown frank.brown@company.com Support Denver 2020-04-18
EMP-007 Grace Lee grace.lee@company.com Engineering Boston 2023-02-28
EMP-008 Henry Davis henry.davis@company.com 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 alice.chen@company.com Engineering San Francisco Sarah Parker Active
EMP-002 Bob Martinez bob.martinez@company.com Marketing New York Mike Thompson Active
EMP-003 Carol Johnson carol.johnson@company.com Sales Chicago Lisa Anderson Active
EMP-004 David Kim david.kim@company.com 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 alice.chen@company.com Normal row
Bob Martinez bob.martinez@company.com Selected row (data-selected)
Carol Johnson carol.johnson@company.com Normal row
David Kim david.kim@company.com Highlighted row (data-highlight)
Emma Wilson emma.wilson@company.com Normal row
Frank Brown frank.brown@company.com Disabled row (data-disabled)