Components - Data tables(Interaction)

출처 : http://www.google.com/design/spec/components/data-tables.html

Basic data table

Column headers

• 12sp Roboto Medium
• 54% black

Table content

• 13sp Roboto Regular
• 87% black

Text alignment

• Right-align numeric columns
• Left-align text columns

Interaction

Row hover (Desktop)

Display a background fill when the user hovers over any part of a row. If there are separate hover states on individual (e.g. editable) cells, display both the hover state of the cell and row at the same time.

Hover background

• Grey 200 (#EEEEEE)

Hovering over a row

Row selection

When a row is selected, use a background fill on the row.

Selected row background

• Grey 100 (#F5F5F5)

Checkbox

• Use secondary app color

A selected table row

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.

Sorted column name

• 12sp Roboto Medium
• 87% black

Sort icon

• 16dp container
• 87% black

Table with an ascending sorted column

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.

Tooltip

• Follow the guidelines for Tooltips

Sort icon

• 16dp container
• 26% black

Hovering over a column name

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.

Long column names truncated with an ellipse

Hovering over a truncated column name

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

• 13sp Roboto Regular
• 26% black
• No divider line on text field

Small edit dialog

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

A simple, one-field edit dialog

Large edit dialog

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

A complex, flexible edit dialog

Inline edit icon

• 18dp container
• 54% black

(Optional) Icon-based edit affordance. Include icons at the edge of the cell on the opposite side of the content.

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

• 13sp Roboto Regular
• 87% black
• Follow spacing and sizing guidelines for menus

A table with inline menus

An expanded inline menu