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

Edit this section

Overview

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.

Edit this section

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

Edit this section

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.

Edit this section

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

Fluid

Name	Age	Position
John Wicker	38	Hitman
John Wicker	38	Hitman
John Wicker	38	Hitman
John Wicker	38	Hitman

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

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 €

Principles

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

Edit this section

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

Selected row

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

Focused/focused within row

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

Sort controls

On hover
Descending sort
Ascending sort

Style

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

Not sorted

Name	Age	Birthdate
C	38	1983-11-10
B	39	1983-11-10
A	58	1983-11-10

Ascending

Name	Age	Birthdate
C	58	1983-11-10
B	39	1983-11-10
A	28	1983-11-10

Descending

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.

Default pagination

Minimal pagination

Default pagination with disabled arrows

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.

Expandable table

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	Available
John Wicker	38	Hitman	London	833 000	Available
Expandable	38	Hitman	London	833 000	Available
John Wicker	38	Hitman	London	83312 000	Available

Global actions

Table global actions

Name	Age	Position	Office	Salary	Availability
John Wicker	38	Hitman	London	833 000	Available
John Wicker	38	Hitman	London	833 000	Available
Expandable	38	Hitman	London	833 000	Available
John Wicker	38	Hitman	London	83312 000	Available

Global actions with form

Table global actions

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

Toolbar

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.

Performing actions on 3 items

Name	Age	Position	Office	Salary	Availability
John Wicker	38	Hitman	London	833 000	Available
John Wicker	38	Hitman	London	833 000	Available
Expandable	38	Hitman	London	833 000	Available
John Wicker	38	Hitman	London	83312 000	Available

Bulk actions

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

Inline actions with text controls

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

Inline actions with icon controls

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

Inline actions with multiple actions

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

Striped rows

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

Highlighted row

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

Unread

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

Interactive rows

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

Hoverable table rows

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

Filled horizontal headers

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

Filled vertical headers

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

Sticky headers

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

Sticky headers

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

Row statuses

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	Available
John Wicker	38	Hitman	London	833 000	Available
Expandable	38	Hitman	London	833 000	Retired
John Wicker	38	Hitman	London	83312 000	Available
Wicked Witch	62	Beheader	Moscow	622 430	Away
Black Widow	34	Undercover Agent	Copenhagen	1 351 400	Dead
Deadpool	??	Pain in the ass	??	Free	Available
Spawn	43	Demon	New York	Free	Away

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

Cell statuses

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

Edit this section

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

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

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 PDF

Mobile 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 PDF

Mobile table version 3

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

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

Mobile table version 4

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.

Mobile table version 5

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.

Edit this section

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

Anatomy

Table title
Description if needed
Toolbar
Column header
Table row
Table Footer
Pagination
Table global actions

Edit this section

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

Edit this section

Data Tables

Table of Contents

Overview

Principles

Variations

Usage

Sizing

Placement

Default

Wide

Fluid

Across

Alignment

Behaviours

Interactions

Pointer

Hover

Focus and focus-within

Sorting

Pagination

Expandable

Global actions

Toolbar

Bulk actions

Inline actions

Modifiers

Embedded

Striped

Highlight row

Unread row

Interactive row

Hoverable

Filled headers

Sticky

Status

Table container

Table title

Responsive

Mobile table version 1

Mobile table version 1

Mobile table version 2

Mobile table version 2

Mobile table version 3

Mobile table version 3

Mobile table version 4

Mobile table version 5

Mobile table version 5

Anatomy

Table title

Specs