COMPONENTS / 05

A clearer picture.
Row by row.

Semantic tables with templated cells. Your data, your presentation, no unnecessary machinery.

A team at a glance

Custom cells, status badges and row actions. Labeled cards on smaller screens.

4 MEMBERS

Show loading state

Show empty state

Studio team
Member	Role	Department	Status
AM Alex Morganalex@example.com	Product designer	Design	Active
JL Jamie Leejamie@example.com	Frontend engineer	Engineering	Active
SK Sam Kimsam@example.com	Design engineer	Design	Away
RT Robin Taylorrobin@example.com	Project lead	Operations	Active

Real tables. Real semantics.

Column headers stay associated with their data. On mobile, each row becomes a labeled card with every detail and action visible.

PRESENTATION FIRST

<FsTable TItem="Person" Items="people" Columns="columns"
         Caption="Studio team" RowKey="person => person.Id">
    <Actions>
        <FsButton OnClick="OpenCreate">New member</FsButton>
    </Actions>
</FsTable>

A clearer picture.Row by row.

A team at a glance

A clearer picture.
Row by row.