Data Table (List View)

A data table, also known as a table, is a graphical user interface element that displays information in a tabular format, with rows and columns of data. Data tables are commonly used to present large amounts of data in a structured and organized way, such as in a database or spreadsheet.

Data tables typically consist of a header row that provides labels for each column, and a body section that contains the data rows. The data can be sorted, searched, or filtered to make it easier for the user to find the information they are looking for.

Basic Table Format

Table Size Normal and Compact

The column header row .bx—data-table should always match the row size of the table. Tall row heights are only recommended if your data is expected to have 2 lines of content in a single row.

Table With Checkboxes

Table Raws Selected

Batch actions are functions that may be performed on multiple items within a table. This variant of table enables the user to select individual rows and apply an action. A batch action toolbar appears when table rows are selected.

Table Scroll Position

Table Column Sort Hover position

Table Column Sort Sorted

Table Information

Table Columns Ethics

Displaying too many columns on the UI can become very difficult and It is clutter on the UI. Try avoiding the extra columns, and always exclude the columns which has less significance and not necessary to display on the UI. 6 is the ideal number for columns to display. If there is extreme necessity, we can increase the count up to 8 columns. Beyond 8 it is big NO-NO.

When there are less than 6 columns, arrange them properly to manage the space, and their respective importance. Informative data should start from left columns. Actions, statuses and other secondary information should start from right columns

Expanded Row

When there is lot of information that can be put in a row, use row expansion to accommodate additional/detailed data related that particular row. Show expansion indicators, as they help users understand the expandable rows.