Checklist Design
📃 Pages🧱 Elements🌊 Flows💡 Topics🖌️ Brand
👋 Check-Ins
Checklist Design
🏠 Home📃 Pages🧱 Elements🌊 Flows💡 Topics🖌️ Brand🛎 Check-Ins
📏

Table

Element

Checklist

0 out of 8

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

Search

The ability to find a specific keyword or row

⭐️ 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

Inspiration
Articles
Design better data tables
UX Collective
Better UI design: proper use of tables
JotForm
Modern enterprise UI design - tables
Pulsar
Related
pages
View all
Orange arrow indicating card for pages content is a link

👋

Sign up

☎️

Contact us

🗞️

Blog post

🏢

Careers

🤝

Team

Other
elements
View all
Green arrow indicating card for element content is a link

🖲️

Button

🃏

Card

🌠

Icon

⌨️

Text field

⏳

Loading

Checklist Design
Created by George Hatzis
PagesElementsFlows
TopicsBrandApp
Check-InsAboutPrivacy
This website was made with Webflow (affiliate link).