Data table
Display sets of data across rows and columns.
Features
- CSS only, based on
gridlayout. - The columns are automatically configured. They can be adjusted to fit the content.
- One column is for key (e.g. name), and is called the
key column. Other columns are for values (e.g. date) or related data (e.g. link). - The key column takes up remaining space. Other columns can only be as wide as their content.
- The first column is the key column by default. Another column can be set as the key column instead. Example
- Javascript for progressive enhancement. Note
- This component can be extended with more functionality via add-on: Bulk actions
Implementation
- Include the compiled javascript file in the Html:
<script src="/javascript/data-table.min.js"></script>
Examples
View source for Html code.
Default data table
Full width.
Headings
For column descriptions. Can contain links and indications for sorting.
Header
The header spans all columns.
Header with links
Right aligned links, single and grouped links, with icons.
Pagination
Influenced by Material Design.
1-3 of 16
Text size and color
Columns can be displayed in smaller sizes and/or lighter color (for lesser important properties).
Text alignment
Numbers are usually aligned right.
Context menu
For action links.
Collapse
On small screens:
- Columns collapse to full width rows.
- Headings are hidden.
- Headings are replaced with a menu in the header for sorting (via Javascript).
- If the data table doesn't have a header, the sorting menu for small screens will be placed above the data table.
- All elements are left aligned.
- Context menues are positioned in upper right corner.
- A text label can be added to a cell via the
data-collapseattribute.
Collapse without header
Data list
For simpler and shorter content, such as time tables or price lists. Not full width. All columns can only be as wide as their content. A data list can have the same options (headings, header etc) as for other data tables.
Change key column
Column number 1 (the first column) is the key column by default. Another column can be set as the key column instead. (Column 3)
Key column minimum width
Set a different minimum width to the key column. By default it is the same as the minimum width of its content.
Header
Key column overflow
The key column can manage strings that are wider than the column (e.g. long words, urls or user input) in different ways:
- Overflow (default)
- Clip with ellipsis (
…) - Break and wrap to a new line
Only overflowing strings will be affected. All text will wrap normally on breaking spaces (e.g. space or hyphen).
The width of the data tables below have been limited to show the effect.
Add-ons
This component can be extended with more functionality via add-on: Bulk actions
Javascript
The javascript file adds progressive enhancement for the component. Supports multiple components, so the script is only needed once on each page.
The component works without javascript, but the javascript adds the some additional functionality and style:
Data tables
- Add inline style (explicit number of columns) on data table to create a robust design and prevent layout problems (e.g. if the header overflows).
Context menues (<details>)
- Only one menu in the data table can be opened at the same time.
- Menues are opened on hover (besides click).
- Generates a menu for sorting in the header for small screens (on collapsible data tables with header and headings).