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.

  • Strategy

    UX Strategy, UI Strategy

  • Design

    UX/UI

  • Client

    Bit

  • Industry

    Hitech

Open Project

The challenge

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.

The process

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

The features that were designed and developed

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 few examples of the basic table

A 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.

table_img_001

Skeleton

Use skeleton states instead of spinners if additional load time is expected.

table_img_003

Active search

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.

table_img_006

Table docs

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.

table_img_005

Conclusion

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.

Back

This website stores cookies on your computer. Cookie Policy