Standard
Table
A standard table
| Name | Status | Notes |
|---|---|---|
| John | Approved | None |
| Jamie | Approved | Requires call |
| Jill | Denied | None |
States
Positive / Negative
A cell 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 alert 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:
| 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
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 |
Grid
A table may have a grid to help differentiate cells
| Name | Status | Notes |
|---|---|---|
| John | Approved | None |
| Jamie | Approved | Requires call |
| Jill | Denied | None | 3 People | 2 Approved |
Sortable
A table may allow a user to sort contents by clicking on a table header.
Adding a classname of ascending or descending, 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 |