Data tables are used to organize and display all information from a data set. While a data visualization represents part of data set, a data table lets users view details from the entire set. This helps them compare and analyze the data.
Because of the nature of the processes this is the most used component in the Hawkeye application. Such important element should be treated as such. They’re used daily multiple time to consume and enter data.
For consistency and legibility we keep all headers and data left aligned, the only exception are action buttons which are right aligned.
To initialize a data table, apply the c-table class to the table element, wrapped in a div container with the c-table__wrapper class. Content rows carry the c-table__body__row class and each <th> should have the c-table__header__item class and <td> the c-table__body__item class.
Data tables tend to be packed with various kinds of information and, if not spaced properly, can make them uncomfortable to read. We add minimum width and enough padding to make them easy to read.
When there’s the need to have a lot of information and columns the table becomes horizontally scrollable to keep the spacing of the cells.
They are occasions that a column is required to be available at all times, in those times we use the c-table--fix-col classes, adding it to the table element along side the c-table class.
The default direction of a fix column is starting from the left. Getting the last columns is possible adding the --right suffix to the fix column class, ending with something like c-table--fix-col-2--right.
Is possible to have up to 3 fix columns start by the first ones fixed at the left or the last ones fixed at the right. The available classes are:
c-table--fix-col-1c-table--fix-col-2c-table--fix-col-3c-table--fix-col-1--rightc-table--fix-col-2--rightc-table--fix-col-3--rightSome specific styles are needed to accomplish various actions in the application. Please take a closer look at the differences in the markup in the code page to get the desired table.
Useful for joining 2 or more tables in one.