Use a data table to display information in an organized fashion. It makes reading the information easier by breaking it down and treating it identically. The structure of the HTML table allows displaying items as rows, and to separate data into columns. Each column has a caption. It is also possible to add other elements to the table in order to improve the options for processing the data, to optimize the display or to add functionalities.
You may sort by clicking on the caption of the column. If the data is numerical, the default the sorting order is 0 to XXX; if the data is alphabetical, the default sorting order will be A to Z. It could be reversed with another click. A small chevron will appear on the caption of the sorted column. Being able to sort data in a table improves the element’s usability.
In cases where the volume of data is too large for the display area, a limited number of data may be defined per page. In these cases, the table will be split across many pages and users will navigate using a pagination element (see Pagination for more information).
Items in a table may be rendered selectable. Multi-selection may be authorized in the context of an action on a group of items, for example. To do this, each item in the table must have a checkbox at the beginning of the row. An item may be unselected by clicking on it one more time.
Actions may be applied to the row of a table or a group of rows. Grouped actions are typically located at the top of the table. For specific actions on an item, use inline actions, which are represented by an icon at the end of a row (a trash can to delete the row, for example). If the possible actions are too numerous, a generic action icon can propose all of the available actions in a menu expand.
A filter panel may be used at the top of the page or laterally to filter the results of a table when the latter are too lengthy (see Panel Filters for more information).
- The table must always have a caption that clearly indicates the content displayed.
- If necessary, a short description may be added under the table’s caption.
- The column captions must be clear and concise. Try the shortest and clearest label.
- The information must be rewritten in the most relevant format (avoid writing a date out in letters, for example)
- Follow the accepted standards for displaying numbers (decimals, display in K€, etc.)
- When the content is too long to be shown, it may be shortened using “…” marks. Always allow all of a cell’s contents to be shown via a mouseover, for example, with a tooltip.
- Columns must always be placed in order of importance.
- Cell content must always be left-aligned, except when a right alignment improves the understanding of the data (for example, numerical data).
Tables are usually inserted into a card.
Data table can be included on cards. Card table groups several components, for example, a data table with a pagination and a title.