--- layout : 'default' css : 'table' title : 'Table' description : 'Tables display collections of data grouped into rows' type : 'UI Collection' --- <%- @partial('header') %>

Types

Table

A standard table

Responsive Element

Tables are designed to be responsive. Table cells will stack when a mobile viewport size is reached.

This example uses a segment to add padding and a background color.

Name Status Notes
John Approved None
Jamie Approved Requires call
Jill Denied None
Add User

States

Positive / Negative

A cell or row may let a user know whether a value is good or bad

Name Status Notes
No Name Specified Unknown None
Jimmy Approved None
Jamie Unknown Requires call
Jill Unknown None

Cells

Error

A cell or row may attention the user to an error or a negative value

Name Status Notes
No Name Specified Approved None
Jimmy Cannot pull data None
Jamie Approved Classified
Jill Approved None

Warning

A cell or row may warn a user

Name Status Notes
No Name Specified Unknown None
Jimmy Requires Action None
Jamie Unknown Hostile
Jill Unknown None

Active

A cell or row can be active or selected by a user

Name Status Notes
Jamie Approved Requires call
John Selected None
Jamie Approved Requires call
Jill Approved None

Disabled

A cell can be disabled

Name Status Notes
Jamie Approved Requires call
John Selected None
Jamie Approved Requires call
Jill Approved None

Variations

Celled

A table may be divided each row into separate cells

Name Status Notes
John Approved None
Jamie Approved Requires call
Jill Denied None
3 People 2 Approved

Basic

A table can reduce its complexity to increase readability.

Name Status Notes
John Approved None
Jamie Approved Requires call
Jill Denied None

Even Width

A table can specify its column count to divide its content evenly

Name Status Age Gender Notes
John Approved 22 Male None
Jamie Approved 32 Male Requires call
Jill Denied 22 Female None
3 People 2 Approved

Column Width

A table can specify the width of individual columns independently.

Tables use a 16 column grid. This should be the total width of all elements in a column
Name Status
John Approved
Jamie Approved
Jill Denied
3 People 2 Approved

Collapsing

By default tables take the size of their container. A collapsing takes up only as much space as its rows.

Name Status Notes
John Approved None
Jamie Approved Requires call
Jill Denied None
3 People 2 Approved

Inverted

A tables colors can be inverted

Name Status Notes
John Approved None
Jamie Approved Requires call
Jill Denied None
3 People 2 Approved
Name Status Notes
John Approved None
Jamie Approved Requires call
Jill Denied None
3 People 2 Approved

Definition

A table may be formatted specifically to provide definitions

Behavior Arguments Description
reset rating None Resets rating to default value
set rating rating (integer) Sets the current star rating to specified value

Sortable

A table may allow a user to sort contents by clicking on a table header.

Adding a classname of ascending or descending to the th will show the user the direction of sort. This example uses a modified version of the kylefox's tablesort plugin to provide the proper class names.
Name Status Notes
John No Action None
Jamie Approved Requires call
Jill Denied None
3 People 2 Approved

Padded

A table may sometimes need to be more padded for legibility

Name Status Notes
John Approved He is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again.
Jamie Approved Jamie was not interested in purchasing our product.

Compact

A table may sometimes need to be more compact to make more rows visible at a time

Name Status Notes
John Approved None
Jamie Approved Requires call
John Approved None
Jamie Approved Requires call
John Approved None
Jamie Approved Requires call
John Approved None
Jamie Approved Requires call

Size

A table can also be small or large

Name Status Notes
John Approved None
Jamie Approved Requires call
Jill Denied None
3 People 2 Approved
Name Status Notes
John Approved None
Jamie Approved Requires call
Jill Denied None
3 People 2 Approved