Table UI component for Figma — 960 variants

Table UI – Cells and Structure

Use table patterns to organize data-heavy views, comparisons and operational lists. Keep the relevant state and next action clear so the component is easy to scan. Align labels and visual priority with the screen around it.

Table Cells

Make columns and row labels easy to scan, distinguish sorting and selection, and add pagination when the data set requires it. Keep labels concise and use spacing or icon cues to reinforce the message without relying on color alone.

Semantic Structure

In Figma, compare the component variants in a real product screen. Check spacing, contrast and labels across relevant states, then adapt the pattern to the team's design system. Document the selected variant and relevant states so the pattern stays consistent across screens.

Display Modes

Variants include: Compact table, Zebra striped table, Scrollable table, and Responsive mobile-friendly table blocks.

Integration and Styling

Each table part is available as a reusable component in Figma and via Tailwind utility classes. You can combine cells with tags, buttons, badges, or chips to enrich interaction without losing structure.