Table header

The value of each column to provide structure for the row content

⭐️ Fix your header on scroll to continue giving context to user

Row style

Borders and contrasting background colours can be explored to differentiate

⭐️ Utilise your grayscale in the design system for consistency


Define the consistent padding of each row and theheader

Optional additions

Each visible item to be shown on this page.


The ability for a user to find a specific keyword or row of information

⭐️ Ensure all of your possible data points can be searched and defined by text input


Performing a task based on the row and information seen e.g. view, edit, delete

Filter and sort

Allow users to customise what they want to see in the table and in which order


Determine the structure on significantly smaller devices - whether the information collapses into an accordion for example

⭐️ Horizontal scrolling is an alternative to rethinking a new layout


Breakpoints in the table for digesting information in parts