Data tables

Data tables display sets of raw data. They usually appear in desktop enterprise products. Data tables may be embedded on a surface, such as a card. They can include:

1. A corresponding visualization.
2. The ability to query and manipulate data.

Data tables on cards may display navigation and data manipulation tools at the top and bottom.

Supported interactions

1. Row hover (desktop)
2. Row selection
3. Column sorting
4. Column hover (desktop)
5. Long header titles
6. Text editing
7. Menus

Structure

A data table contains a header row at the top that lists column names, followed by rows for data. Checkboxes should accompany each row if the user needs to select or manipulate data.

Data tables may include:

1. Three or more columns of data
2. A corresponding visualization
3. The ability for users to query and manipulate data

Specs

for specs click Here

Interaction

Row hover (Desktop) :

Display a background in a table row if a user hovers over any part of that row.If there are separate hover states on individual table cells, display both the hover state of the cell and row at the same time.

Hover background

Grey 200 (#EEEEEE)

Row selection

When a row is selected, display a background color on the row.

Selected row background

Grey 100 (#F5F5F5)

Checkbox :

Use secondary app color

Sorted column

If column sorting is enabled, sort the most important data by default and display a sorted state in the column header.If the user clicks on a column that is already sorted, reverse the sort order and rotate the sort icon.

Specs

for specs see Sorted column section. ClickHere

Column name hover (Desktop)

If there is a need to provide definitions to column headers, display a tooltip on hover. If sorting is enabled, display a light sort icon upon hover, which indicates that the column is sortable.

Sort icon

1. 16dp container
2. 38% black

Long header titles

Sometimes, column names don’t fit in a container with the recommended 56dp of padding in between columns. There are two options to handle this:

1. Display the full column name and enable horizontal scrolling in the table container.
2. Shorten the column name and display it in full on hover.

Inline text editing

Tables may require basic text editing (e.g. for editing existing text content, or adding comments).Include editable fields within a table and denote them using placeholder text. You can use a simple edit dialog with just a text field, or display a full dialog component on click.

Placeholder text

1. 13sp Roboto Regular
2. 38% black
3. No divider line on text field

Small edit dialog

1. Align edges of dialog with nearest divider lines, or table edges
2. 24dp of left and right padding
3. Include a single text field, applying the app theme where applicable.
4. User confirms text by pressing Enter.

Large edit dialog

1. Align edges of dialog with nearest divider lines, or table edges.
2. Follow the dialog guidelines, applying the app theme where applicable.
3. User confirms text by clicking the Save button.

Inline edit icon

1. 18dp container
2. 54% black

Inline menus

Instead of editing text, users may need to select from a predefined list of options. In this scenario, embed a menu component directly in the table.

Inline menu :

1. 13sp Roboto Regular
2. 87% black
3. Follow spacing and sizing guidelines for menus

Tables within cards

Tables may be embedded within a card, with table navigation and data manipulation tools displayed at the top and bottom.

Specs:

for specs see Tables Within Cards section.clickHere.

Alternative headers

Some table cards may require headers with actions instead of titles. In this case you may either:

1. Display persistent actions
2. Display a contextual header that activates when items are selected.

Action buttons

1. Use borderless buttons.
2. Enable upon item selection.

Colored header

1. Use 50-value of secondary app color for background fill.
2. Display the number of items selected
3. Display available contextual icons upon item selection.

Specs

For Specs click here.