Tables with detailed view

Tables with detailed view allow you to display the tables with many columns. The idea is to display the table and add the slide-over UI component to display detailed data for each line.


Example

Here’s an example of a table with a detailed view for each line.

Hala Detailed view

Why to use?

When you need to display the table with 10 or 20 columns, you will find that the table will not look good with such many columns. You can define which columns should be displayed in the table and which columns should be in a detailed view. For example, you can display 7 columns in the table, and the rest will be displayed in detailed view when the user will click on a table item.


Guidance

Design the detailed view


General guideline on working with the tables can be found here.


Talk to users and define which columns should be displayed in the table and which columns should be displayed in a detailed view. Hide unnecessary columns. When you make the API calls to the backend for a further table displaying, you can receive 50 columns. Still, not all of them are needed for users, so it is important to hide the columns and keep the table with a detailed view as simple as possible. Try to avoid scroll in the sidebar.


Add the options to see the details
Hala Detailed view


Details of the table line after the user click on it
Hala Detailed view

How to use

You can find more information about using this component here.


Next sections to read

Subscribe to our newsletter

The latest news, articles and resources, sent to your inbox weekly.

© 2020 HALA Digital OU. All rights reserved.