Data Tables
Data tables present raw data sets and lend meaning to the data, while maintaining that the data is readable, scannable, and easily comparable.
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
Table of Contents
Edit this section, Opens in new windowOverview
Data tables display information in a way that’s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards, blocks or panels.
When to use
- To organize and display data.
- If your user must navigate to a specific piece of data to complete a task.
- Displaying all of a user’s resources.
When not to use
- When a more complex display of the data or interactions are required.
- As a replacement for a spreadsheet application.
Principles
Header row
Use meaningful text to label the table data and provide clarity to the content below.
Sortable
All columns should by default be sortable
Number of columns
For large sets of data, it is preferable to use rows instead of columns in order to guide the eye across the page. It is quicker and easier to scan down a single row rather than scan across multiple columns of related data.
Batch actions
Batch actions are functions that may be performed on multiple items within a table. Use a menu to present batch actions to the user. The menu appears when the user clicks on the icon.
Inline actions
Inline actions are functions that may be performed on a specific table item. Each row is accompanied by a menu or a button that contains actions related specifically to that table row.
Expandable rows
Expandable rows show minimal information at a high-level and a more detailed view nested within that row.
Striped table
Use striped table when you have text on more than one row, or large datasets.
Hover on row
Not needed for small tables, preferably on larger tables (datasets, wider) and denser tables.
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
Variations
Type | Purpose |
---|---|
Default | The default data table comes with a base style with only the title, header, and table elements. rows. |
With selection | Batch actions are functions that may be performed on multiple items within a table. This type of table enables the user to select individual rows and apply an action. A batch action toolbar appears when table rows are selected. |
With expansion | The expandable data table is useful for presenting large amounts of data in a small space. Rows are collapsed and can be expanded to reveal extra information. |
Usage
Sizing
The data table is available in two different row sizes: default and condensed.
Name | Age | Position |
---|---|---|
John | 38 | Hitman |
John | 38 | Hitman |
John | 38 | Hitman |
John | 38 | Hitman |
Name | Age | Position |
---|---|---|
John | 38 | Hitman |
John | 38 | Hitman |
John | 38 | Hitman |
John | 38 | Hitman |
Placement
Data tables should be placed in a page's main content area and given plenty of space to display data without truncation. Avoid placing data tables inside modals or smaller containers where the information can feel cramped or needs truncation.
The data table can be placed on the grid following the four different grid modes outlined in the layout section. Although, the data table can share horizontal space with other components and content, consider giving your data table the most width on the page to help your user view dense data.
These four examples show the data table on the default, wide, fluid and across grid modes.
Default
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
Sed accumsan dapibus ligula et maximus. Integer vel suscipit nisl. Nulla facilisis cursus nisi, sed pretium justo tincidunt eget. In pharetra augue tellus, sed pellentesque diam malesuada vitae. Aenean at diam quis nunc maximus elementum sit amet at quam. Vivamus tincidunt et ex eget mollis. Suspendisse rhoncus ultricies dolor, nec finibus dui pellentesque ut. Vestibulum luctus ut lectus et hendrerit. Morbi lobortis justo at sem sagittis, in euismod metus pellentesque. In in efficitur justo. Pellentesque fringilla odio posuere tempus ullamcorper.
Wide
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
Sed accumsan dapibus ligula et maximus. Integer vel suscipit nisl. Nulla facilisis cursus nisi, sed pretium justo tincidunt eget. In pharetra augue tellus, sed pellentesque diam malesuada vitae. Aenean at diam quis nunc maximus elementum sit amet at quam. Vivamus tincidunt et ex eget mollis. Suspendisse rhoncus ultricies dolor, nec finibus dui pellentesque ut. Vestibulum luctus ut lectus et hendrerit. Morbi lobortis justo at sem sagittis, in euismod metus pellentesque. In in efficitur justo. Pellentesque fringilla odio posuere tempus ullamcorper.
Fluid
Name | Age | Position |
---|---|---|
John Wicker | 38 | Hitman |
John Wicker | 38 | Hitman |
John Wicker | 38 | Hitman |
John Wicker | 38 | Hitman |
Sed accumsan dapibus ligula et maximus. Integer vel suscipit nisl. Nulla facilisis cursus nisi, sed pretium justo tincidunt eget. In pharetra augue tellus, sed pellentesque diam malesuada vitae. Aenean at diam quis nunc maximus elementum sit amet at quam. Vivamus tincidunt et ex eget mollis. Suspendisse rhoncus ultricies dolor, nec finibus dui pellentesque ut. Vestibulum luctus ut lectus et hendrerit. Morbi lobortis justo at sem sagittis, in euismod metus pellentesque. In in efficitur justo. Pellentesque fringilla odio posuere tempus ullamcorper.
Across
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
Sed accumsan dapibus ligula et maximus. Integer vel suscipit nisl. Nulla facilisis cursus nisi, sed pretium justo tincidunt eget. In pharetra augue tellus, sed pellentesque diam malesuada vitae. Aenean at diam quis nunc maximus elementum sit amet at quam. Vivamus tincidunt et ex eget mollis. Suspendisse rhoncus ultricies dolor, nec finibus dui pellentesque ut. Vestibulum luctus ut lectus et hendrerit. Morbi lobortis justo at sem sagittis, in euismod metus pellentesque. In in efficitur justo. Pellentesque fringilla odio posuere tempus ullamcorper.
Alignment
Registravimo data | Paslauga | Įstaigos pavadinimas | Sveikatos išlaidų grupė | Statusas | Paslaugos kaina, EUR |
---|---|---|---|---|---|
By default, the table cell is vertically aligned to top | 38 | Hitman | London | 01.01.1971 | 833.000 € |
Default text alignment is always to the left | 38 | Hitman | London | 01.01.1971 | 4.123 € |
Numbers should always be aligned to the right | 38 | Hitman | London | 01.01.1971 | 833.000 € |
- By default, the table cell is vertically aligned to top
- Default text alignment is always to the left
- Numbers should always be aligned to the right, but there can be exceptions
Behaviours
Interactions
Pointer
A row can be selected:
Name | Age | Position | Office | Salary | |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 833 000 | |
John Wicker | 38 | Hitman | London | 833 000 | |
Expandable | 38 | Hitman | London | 833 000 | |
John Wicker | 38 | Hitman | London | 83 312 000 |
The color used for the outline is BL 1, BLUE. The color used for the fill is BL 1, BLUE 5%
- Selected row
- Checkbox
Hover
Row hover state:
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
Focus and focus-within
Focused row, or focus within row state:
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
- The color used for the focus ring is CB 3, LIGHT BLUE
Sorting
Columns can be sorted in ascending or descending order. Sorting controls are located in the column headers and indicated with an arrow icon on hover and when a column has been sorted.
A sorted data table has three states: unsorted (no arrows), ascending (arrow up) or descending (arrow down). The icon indicates the current sorted state and is only shown if sorting is activated. Only the column being sorted should display an icon, and unsorted icons are only visible on hover.
Name | Age |
---|---|
C | 38 |
B | 38 |
A | 38 |
Name | Age | Birthdate |
---|---|---|
C | 38 | 1983-11-10 |
B | 38 | 1983-11-10 |
A | 38 | 1983-11-10 |
- On hover
- Descending sort
- Ascending sort
- The color used for the hovered arrow is BR 1, BROWN
- The color used for the hovered arrow is LB 1, LIGHT BROWN
- The color used for the hovered arrow is LB 1, LIGHT BROWN
Name | Age | Birthdate |
---|---|---|
C | 38 | 1983-11-10 |
B | 38 | 1983-11-10 |
A | 38 | 1983-11-10 |
Name | Age | Birthdate |
---|---|---|
C | 38 | 1983-11-10 |
B | 39 | 1983-11-10 |
A | 58 | 1983-11-10 |
Name | Age | Birthdate |
---|---|---|
C | 58 | 1983-11-10 |
B | 39 | 1983-11-10 |
A | 28 | 1983-11-10 |
Pagination
When there is a lot of content to display, using pagination will help us to add navigation links to reveal more content on the page.
Primarily, put pagination on the bottom of the table. If the table does not fit on the screen, use pagination above the table aswell.
See the pagination component for more information.
Disabled buttons is shown when the data set is at the end, or beginning of the data set.
Expandable
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
Donec auctor arcu vel diam facilisis, ultricies efficitur libero condimentum. Proin volutpat ac justo ac efficitur. Aenean tempor mauris vel odio gravida, ut mattis leo laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer hendrerit congue odio in vulputate. In commodo risus a quam interdum, ac dapibus justo laoreet. Nullam eget nibh at velit ornare sodales. Aliquam aliquam, nibh non tempor tristique, libero ante ullamcorper nunc, in tempor lectus risus non lacus. Praesent non pulvinar risus, nec viverra turpis. | |||||
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
Donec auctor arcu vel diam facilisis, ultricies efficitur libero condimentum. Proin volutpat ac justo ac efficitur. Aenean tempor mauris vel odio gravida, ut mattis leo laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer hendrerit congue odio in vulputate. In commodo risus a quam interdum, ac dapibus justo laoreet. Nullam eget nibh at velit ornare sodales. Aliquam aliquam, nibh non tempor tristique, libero ante ullamcorper nunc, in tempor lectus risus non lacus. Praesent non pulvinar risus, nec viverra turpis. | |||||
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
Donec auctor arcu vel diam facilisis, ultricies efficitur libero condimentum. Proin volutpat ac justo ac efficitur. Aenean tempor mauris vel odio gravida, ut mattis leo laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer hendrerit congue odio in vulputate. In commodo risus a quam interdum, ac dapibus justo laoreet. Nullam eget nibh at velit ornare sodales. Aliquam aliquam, nibh non tempor tristique, libero ante ullamcorper nunc, in tempor lectus risus non lacus. Praesent non pulvinar risus, nec viverra turpis. | |||||
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
Donec auctor arcu vel diam facilisis, ultricies efficitur libero condimentum. Proin volutpat ac justo ac efficitur. Aenean tempor mauris vel odio gravida, ut mattis leo laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer hendrerit congue odio in vulputate. In commodo risus a quam interdum, ac dapibus justo laoreet. Nullam eget nibh at velit ornare sodales. Aliquam aliquam, nibh non tempor tristique, libero ante ullamcorper nunc, in tempor lectus risus non lacus. Praesent non pulvinar risus, nec viverra turpis. | |||||
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
Donec auctor arcu vel diam facilisis, ultricies efficitur libero condimentum. Proin volutpat ac justo ac efficitur. Aenean tempor mauris vel odio gravida, ut mattis leo laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer hendrerit congue odio in vulputate. In commodo risus a quam interdum, ac dapibus justo laoreet. Nullam eget nibh at velit ornare sodales. Aliquam aliquam, nibh non tempor tristique, libero ante ullamcorper nunc, in tempor lectus risus non lacus. Praesent non pulvinar risus, nec viverra turpis. |
The color for the expanded bar is BR 1, BROWN 50% WHITE. The fill for the expanded row is BE 4, LIGHTER BEIGE
- Expanded row
- Expanded content
Global actions
If needed, global actions can be added to the table. Basically it is buttons with relevant actions to the whole table, like export or download. Actions for selected rows can also utilize this, i.e. in a form.
Name | Age | Position | Office | Salary | Availability |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 833 000 | |
John Wicker | 38 | Hitman | London | 833 000 | |
Expandable | 38 | Hitman | London | 833 000 | |
John Wicker | 38 | Hitman | London | 83312 000 |
- Table global actions
Name | Age | Position | Office | Salary | Availability | ||
---|---|---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 833 000 | |||
John Wicker | 38 | Hitman | London | 833 000 | |||
Expandable | 38 | Hitman | London | 833 000 | |||
John Wicker | 38 | Hitman | London | 83312 000 |
- Table global actions
Toolbar
The toolbar contains search and filters.
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
- Search
- Filters
Bulk actions
Batch actions are functions that may be performed on multiple items within a table. Once the user selects at least one row from the table, the batch action bar appears at the top of the table, presenting the user with actions they can take. To exit or escape “batch action mode”, the user can cancel out or deselect the items.
Name | Age | Position | Office | Salary | Availability | ||
---|---|---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 833 000 | |||
John Wicker | 38 | Hitman | London | 833 000 | |||
Expandable | 38 | Hitman | London | 833 000 | |||
John Wicker | 38 | Hitman | London | 83312 000 |
The color used for the fill is BL 1, BLUE. The color used for the text is BE 5, LIGHTEST BEIGE. The hover state fill for the actions is BL 1 DARK, DARK BLUE
- Table bulk actions
- Hovered action
- Action
- Indicator on how many items are to be used in the action
Inline actions
Försäkring | Betalningssätt | Action |
---|---|---|
Villaförsäkring, LYXVILLAN PÅ SOLSIDAN | Helårsvis | |
Hemförsäkring, Testgatan 1 | Helårsvis | |
Olycksfallsförsäkring, TESTTVÅ, MYPAGES | Helårsvis |
- Text control
Name | Age | Position | Office | Start date | Salary | |
---|---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 | |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 | |
Expandable | 38 | Hitman | London | 01.01.1971 | 833 000 | |
John Wicker | 38 | Hitman | London | 01.01.1971 | 83312 000 |
- Icon control
Name | Age | Position | Office | Start date | Salary | |
---|---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 | |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 | |
Expandable | 38 | Hitman | London | 01.01.1971 | 833 000 | |
John Wicker | 38 | Hitman | London | 01.01.1971 | 83312 000 |
- Menu control
Modifiers
Embedded
Tables can be embedded in different content, like cards, panels and modals.
Striped
A table can have alternating striped rows, to differentiate rows.
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
- The color used for the alternating background is LB 1, LIGHT BROWN 10%
Highlight row
A row can be highlighted. This is useful if you want to highlight a row/several rows for reference.
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
The color used for the outline is BL 1, BLUE. The color used for the fill is BL 1, BLUE 5%
- Selected row
Unread row
A row can be marked as unread:
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
- The color used for the unread bar is BL 1, BLUE
Interactive row
A row can be interactive:
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
- The color used for the focus ring is CB 3, LIGHT BLUE
Hoverable
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
- The color used for hover is LB 1, LIGHT BROWN 20%
Filled headers
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
- The color as background is BE 1, DARK BEIGE
- The column header text color is BR 1, BROWN
Name | John Wicker | John Wicker | John Wicker | John Wicker | John Wicker | John Wicker |
---|---|---|---|---|---|---|
Age | 38 | 38 | 38 | 38 | 38 | 38 |
Position | Hitman | Hitman | Hitman | Hitman | Hitman | Hitman |
Office | London | London | London | London | London | London |
Start date | 01.01.1971 | 01.01.1971 | 01.01.1971 | 01.01.1971 | 01.01.1971 | 01.01.1971 |
Salary | 833 000 | 833 000 | 833 000 | 833 000 | 83312 000 | 833 000 |
- The color as background is BE 1, DARK BEIGE
Sticky
A table can have sticky headers. This might make the table a bit responsive in some cases:
Name | Age | Position | Office | Start date | Salary | Office | Start date | Salary | Name | Age |
---|---|---|---|---|---|---|---|---|---|---|
John Wicker | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | John Wicker | 38 | Hitman | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 32 | Hitman | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 32 | Hitman | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
123 123 123 |
When using sticky headers, the table headers always get a dark background.
Name | John Wicker | John Wicker | John Wicker | John Wicker | John Wicker | John Wicker | John Wicker | John Wicker | John Wicker | John Wicker | John Wicker | John Wicker |
---|---|---|---|---|---|---|---|---|---|---|---|---|
Age | 38 | 38 | 38 | 38 | 38 | 38 | 38 | 38 | 38 | 38 | 38 | 38 |
Position | Hitman | Hitman | Hitman | Hitman | Hitman | Hitman | Hitman | Hitman | Hitman | Hitman | Hitman | Hitman |
Office | London | London | London | London | London | London | London | London | London | London | London | London |
Start date | 01.01.1971 | 01.01.1971 | 01.01.1971 | 01.01.1971 | 01.01.1971 | 01.01.1971 | 01.01.1971 | 01.01.1971 | 01.01.1971 | 01.01.1971 | 01.01.1971 | 01.01.1971 |
Salary | 833 000 | 833 000 | 833 000 | 833 000 | 83312 000 | 833 000 | 833 000 | 833 000 | 833 000 | 833 000 | 83312 000 | 833 000 |
When using sticky headers, the table headers always get a dark background.
Status
Different statuses can be applied to table elements:
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
A status could be: Error, Warning or OK
- The color used is CG 3, LIGHT GREEN
- The color used is CY 3, LIGHT YELLOW
- The color used is CR 3, LIGHT RED
If you want to add statuses to every row, use the Status Indicator:
Name | Age | Position | Office | Salary | Availability |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 833 000 | |
John Wicker | 38 | Hitman | London | 833 000 | |
Expandable | 38 | Hitman | London | 833 000 | |
John Wicker | 38 | Hitman | London | 83312 000 | |
Wicked Witch | 62 | Beheader | Moscow | 622 430 | |
Black Widow | 34 | Undercover Agent | Copenhagen | 1 351 400 | |
Deadpool | ?? | Pain in the ass | ?? | Free | |
Spawn | 43 | Demon | New York | Free |
A cell can have different statuses:
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
A status could be: Error, Warning or OK
- On hover
- Descending sort
- Ascending sort
Table container
A table is to be placed inside a table container, when applicable. It is essentially a wrapper with no extra styling.
However, you can use this wrapper to emphasize a table, by using it as a box.
Table title
Additional description if needed
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
Responsive
If you want to display the table in a narrower vieport, i.e. mobile or table, you need to add some more sugaring to the component. Here are 4 examples on how you can present the table to the user.
Use which ever method that suits the table best.
Mobile table version 1
Name | Age | Position | Office | Start date | Salary | Office | Start date | Salary | Name | Age |
---|---|---|---|---|---|---|---|---|---|---|
John Wicker | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | John Wicker | 38 | Hitman | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 32 | Hitman | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 32 | Hitman | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
123 123 123 |
This table is displayed as separate cards with a table inside, headings to the left, content to the right, in mobile view
Mobile table version 1
This table is displayed as separate cards with a table inside, headings to the left, content to the right, in mobile view
Name | Age | Position | Office | Start date | Salary | Office | Start date | Salary | Name | Age |
---|---|---|---|---|---|---|---|---|---|---|
John Wicker | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | John Wicker | 38 | Hitman | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 32 | Hitman | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 32 | Hitman | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
123 123 123 |
Mobile table version 2
Name | Age | Position | Office | Start date | Salary | Office | Start date | Salary | Name | Age |
---|---|---|---|---|---|---|---|---|---|---|
John Wicker | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | John Wicker | 38 | Hitman | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 32 | Hitman | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 32 | Hitman | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
123 123 123 |
This table is displayed as a scrollable table in mobile view
Mobile table version 2
The table is hidden and export methods are shown in mobile view. If the usage is to modify, download, if it is to preview, open in new tab
Name | Age | Position | Office | Start date | Salary | Office | Start date | Salary | Name | Age |
---|---|---|---|---|---|---|---|---|---|---|
John Wicker | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | John Wicker | 38 | Hitman | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 32 | Hitman | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 32 | Hitman | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
123 123 123 |
The table is too large for this view. Please download or open in new tab.
Download as PDFMobile table version 3
Name | Age | Position | Office | Start date | Salary | Office | Start date | Salary | Name | Age |
---|---|---|---|---|---|---|---|---|---|---|
John Wicker | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | John Wicker | 38 | Hitman | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 32 | Hitman | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 32 | Hitman | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
123 123 123 |
The table is too large for this view. Please download or open in new tab.
Download as PDFThe table is hidden and export methods are shown in mobile view. If the usage is to modify, download, if it is to preview, open in new tab
Mobile table version 3
This table is displayed as a scrollable table in mobile view
Name | Age | Position | Office | Start date | Salary | Office | Start date | Salary | Name | Age |
---|---|---|---|---|---|---|---|---|---|---|
John Wicker | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | John Wicker | 38 | Hitman | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 32 | Hitman | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 32 | Hitman | 01.01.1971 | 833 000 | John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
123 123 123 |
Mobile table version 4
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
The preselected rows are hidden in mobile view. This method should either be done manually with css, i.e. setting the cells(columns) to be hidden, or by JavaScript
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
Mobile table version 5
Type | Purpose |
---|---|
Default | The default data table comes with a base style with only the title, header, and table elements. rows. |
With selection | Batch actions are functions that may be performed on multiple items within a table. This type of table enables the user to select individual rows and apply an action. A batch action toolbar appears when table rows are selected. |
With expansion | The expandable data table is useful for presenting large amounts of data in a small space. Rows are collapsed and can be expanded to reveal extra information. |
This table is displayed like a definition list with key-value pairs.
Mobile table version 5
This table is displayed like a definition list with key-value pairs.
Type | Purpose |
---|---|
Default | The default data table comes with a base style with only the title, header, and table elements. rows. |
With selection | Batch actions are functions that may be performed on multiple items within a table. This type of table enables the user to select individual rows and apply an action. A batch action toolbar appears when table rows are selected. |
With expansion | The expandable data table is useful for presenting large amounts of data in a small space. Rows are collapsed and can be expanded to reveal extra information. |
Anatomy
Table title
Additional description if needed
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
123 123 123 |
- Table title
- Description if needed
- Toolbar
- Column header
- Table row
- Table Footer
- Pagination
- Table global actions
Specs
Name | Age | Position | Office | Start date | Salary |
---|---|---|---|---|---|
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |
John Wicker | 38 | Hitman | London | 01.01.1971 | 833 000 |