🖲

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

States

The way a component can change based on interaction.

Hover

Mouse pointer is on top of a table row

Selected

Table row has been selected via checkbox

States

Not always necessary, but they can have their perks!

Default

Button has not been interacted with and is visible

Button

Hover

Mouse pointer is on top of button's container

Button

Active

Button has been clicked on by user

Button

Focused

Button has been selected to receive input

Button

Disabled

Button is unable to be pressed.

Button

Visited

Button has previously been pressed, is typically