Responsive Element
Tables are designed to be responsive. Table cells will stack when a mobile viewport size is reached.
--- layout : 'default' css : 'table' title : 'Table' description : 'Tables display collections of data grouped into rows' type : 'UI Collection' --- <%- @partial('header') %>
A standard table
Name | Status | Notes |
---|---|---|
John | Approved | None |
Jamie | Approved | Requires call |
Jill | Denied | None |
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 |
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 |
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 |
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 |
A cell can be disabled
Name | Status | Notes |
---|---|---|
Jamie | Approved | Requires call |
John | Selected | None |
Jamie | Approved | Requires call |
Jill | Approved | None |
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 |
A table can reduce its complexity to increase readability.
Name | Status | Notes |
---|---|---|
John | Approved | None |
Jamie | Approved | Requires call |
Jill | Denied | None |
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 |
A table can specify the width of individual columns independently.
Name | Status |
---|---|
John | Approved |
Jamie | Approved |
Jill | Denied | 3 People | 2 Approved |
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 |
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 |
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 |
A table may allow a user to sort contents by clicking on a table header.
Name | Status | Notes |
---|---|---|
John | No Action | None |
Jamie | Approved | Requires call |
Jill | Denied | None | 3 People | 2 Approved |
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. |
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 |
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 |