Column Resizing

Tables & Data Lists Resizing 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 / Resize

Column Resizing

Adjust width via slider; cells respond instantly.

Table title Status text Column width 160px

Column A	Column B	Column C
Alpha content	Beta content	Gamma content
Delta content	Epsilon content	Zeta content

Width 160px

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='column-resizing-primary']
[data-test-id='column-resizing-secondary']
[data-test-id='column-resizing-action']
[aria-label='Column Resizing']
getByRole('button', { name: 'Resizing' })

Fallback

section.column-resizing-container :nth-of-type(1)
.card.column_resizing button:nth-of-type(1)
form.column-resizing-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 Column Reordering

Virtualized Table Next