Tables - UI Elements

Tables have the purpose of displaying data. Tables organize and present data in an easier-to-comprehend manner.  Tables also have the purpose of resuming the information and making it faster to read.

A table lets users see details from the whole data set and also helps them analyze the data and compare it.

‍

‍

• Basic table

• Data table – This type of table is encountered when handling large amounts of data and it comes in a rigid structure. It consists of a close mapping of the components of the table.

• Dense table – this type of table can be recognized as it doesn’t have any filters.

• Sorting and selecting – This type of table has checkboxes and rows that can be clicked over which gives the user the possibility of customizing the toolbar.

• Customization

• Custom pagination actions – this type of table allows the user to custom actions within the table.

• Sticky header – this type of table has fixed headers and columns that can be scrolled through.

• Collapsible table  – This type of table has expendable rows that contain more information.

• Column grouping  –  this type of table uses the header to group multiple columns together.

• Spanning table

• Virtualized table

‍

• Represent the values all over the classifications.
• Add filters that can help the user compare data more easily.
• Include links that can give the user a better understanding of the exposed data.
• Include only information that is meaningful to the user and the understanding of the data.
• Align the content in a way that is deductible to the users. Right-aligned for numerical data and left-aligned for textual data
• Don’t include calculations within the summary rows.
• Be informative and descriptive, concise and precise.
• Give the user the ability to access the table when necessary.

‍

• When important data is too detailed and needs to be organized more precisely, tables have the ability to contain important data that allows users to analyze and compare it more quickly.
• Tables can also be used to represent different trends and are a great tool when organizing finance or numerical data.
• Tables can also be used to present programs, meetings, agendas, timetables, locations, and more.

‍

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find tables and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!

‍