🏆 Nominate Checklist Design as Product and Design Tool of the Year now!

🖲

Tables

Component

Features

Each visible item to be shown on this page.

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

Spacing

Define the consistent padding of each row and theheader

Optional additions

Each visible item to be shown on this page.

Search

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

Actions

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

Responsiveness

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

Pagination

Breakpoints in the table for digesting information in parts