Table Anatomy

Smart Table starts with one Playwright locator: the table root. Selectors in the config are resolved from that root, then cells are resolved from each matched row.

This page focuses on the core selector model.

ConfigHover a selector

const root = page.locator('#employees');
const table = useTable(root, {

});

Table RootHeaders are found from the table root.

Smart Table runs the header selector inside the root locator and stores each header's column index.

Name	Role	Office	Status
Airi Satou	Accountant	Tokyo	Active
Brielle Williamson	Integration Specialist	New York	Active
Cedric Kelly	Developer	Edinburgh	Review

What To Notice

• headerSelector is scoped to the table root and defines the column map.
• rowSelector is also scoped to the table root and defines searchable records.
• cellSelector is scoped to each row, not the table root.

Once those pieces are mapped, test code can stay focused on intent:

const row = table.getRow({ Name: 'Airi Satou' });
await expect(row.getCell('Office')).toHaveText('Tokyo');

For messy headers, see Header Mapping. For paginated tables, see Pagination Strategies.