Sticky Column Table

Tables & Data Lists Sticky Intermediate Nice to Try

Hands-on

Interactive Sandbox

Static partial

Try this

Open page
Interact control
Read result

Assert this

Visible elements
Text matches
Button state toggles

Tables / Sticky column

Sticky Column Table

First column sticks while horizontal scrolling.

Table title Status text

Name	Q1	Q2	Q3	Q4
Project A	$10k	$12k	$9k	$14k
Project B	$6k	$8k	$7k	$9k
Project C	$15k	$10k	$13k	$16k

Ready

Learning & behavior

User flow

Open page
Interact control
Read result

Learning objectives

Pick solid locators
Time waits
Assert state

Suggested assertions

Visible elements
Text matches
Button state toggles

Selector tips

Good

[data-test-id='sticky-column-table-primary']
[data-test-id='sticky-column-table-secondary']
[data-test-id='sticky-column-table-action']
[aria-label='Sticky Column Table']
getByRole('button', { name: 'Sticky' })

Fallback

section.sticky-column-table-container :nth-of-type(1)
.card.sticky_column_table button:nth-of-type(1)
form.sticky-column-table-form .field-group:nth-child(1)

Avoid

.mt-4.mb-2.flex.items-center > input:nth-child(1)
.css-1a2b3c4
div[class*='temp-'][class*='hover']

Notes

Some parts delay render
Icon buttons need aria-label
Layout classes may shift

Prev Sticky Header Table

Financial Table Next