Basic table
The purpose of data tables is to organize and display data efficiently. Data tables can be customized with additional functionality based on the needs of your users’ products.
The challenge was to design a basic table component. A basic design and basic functionality.
This table is basic because it is part of the open-source design system we are building in the company. The table is customizable, developers can add and remove parts from it.
Collaboration with the development team was a crucial element in the process. The meetings were daily and included design feedback and development feedback. This process allows us to work together quickly and build a quality basic table
Collaboration with the development team was a crucial element in the process. The meetings were daily and included design feedback and development feedback. This process allows us to work together quickly and build a quality basic table
A basic table emphasizes clarity, ease of navigation, and accessibility to ensure users can efficiently comprehend and interact with the data. By building a basic table, you can build a more complex one.
Use skeleton states instead of spinners if additional load time is expected.
An active search is a quick way of searching an application or data set. After each character is entered, the search runs, and results are displayed immediately. Active search is a way of filtering a dataset using keywords. The Pagination toolbar is in disabled mode, as the search is run actively and the user has not deleted the data in the search field. We recommend to hide the toolbar while the search field is active.
A detailed documentation document that explains both the design and development sides of the component is attached to the table, allowing users to better understand it.
I designed each part of the table and wrote on it in detail.
The goal was to design and develop a basic table for our open-source design system. The process included daily conversations with the development and product teams to design according to limitations and requests. In addition to the design, a detailed documentation document regarding the behavior of the component has been included.