Tables

The tables component allows us to display inside the conversation UI much information in a more readable and structured way.

Example

Here’s an example of table inside the conversational UI chat with full size parameter.

Why to use?

The main reason of using the tables is when we design the conversation flows in integration with backend software. For example, when users want to see the list of the customers, or employees, or any other master and transactional data from the enterprise software.

There is no other way how to display for example list of one hundred customers and show at least seven fields, including the customer name, address, email, phone, balance and other information.

Guidance

Table heading and description

Everytime we display tables to the users we need to add the table name and description. It is not mandatory, but it will be easier for user to navigate and understand the data. Some times in description we are using the date and time on when the table was generated, because we consume the data from the backend, it is important to provide that information to the users.

Add table heading and description.

Size of the table

Use small format when you have up to three columns.

If you have between 3 and 5 columns, you can use large format.

And finally if you have more than 5 columns, you can use XL format.

Table style

For the tables with a small volume of lines and columns, you can use a standard layout. It has bigger padding for each line of the table.

For large tables with many lines and columns, we have added the minimal layout, and we made the line items padding less to include more lines on the screen.

Add filters and sorting

When we provide the users' opportunity to use tables, we also need to give them the standard functionality of working with tables, like sorting or filtering table data. If you do not have many items in the table, it is unnecessary, but if users need to work with many items, this functionality is required.

Provide the option to filter values and sort them.

Add total values

We found that some backend software does not send the total values together with the table data. In that case, you can add the line on the bottom that will calculate the total values for needed columns.

Export table

There are also additional features available for the tables, like export table data into CSV format. Users working with tables want to have the option to download the data into Excel and work with it. In addition to that, we plan to have options to send them via emails and print or save in pdf format.When you design the conversation flow and tables, you can talk to the personas and ask them if they would require such options and then include them if requested.

Export table data from the chat.

How to use

You can find more information about using this component here.

Next sections to read

Forms with table

Add items data by using the form component.

Tables with a detailed view

Display even more columns by using a detailed view component.