Tables
Tables display related data in a series of columns and rows to allow users to compare, analyze or edit large sets of information.
- When to Use
- Variations
- Usage
- Variations
- Additional Functionality
- Developer Notes
- Additional Functionality
Default Table
Icon | Flight No. | Departure Time | Arrival Time | Actions | |
---|---|---|---|---|---|
DL0431 | |||||
AA1321 |
When to Use
- Use tables to display large sets of primarily text-based data that are best viewed in a single display for the purposes of comparison and/or understanding relationships between different aspects of the data.
Variations
- Default Table (shown above)
- Condensed Tables
- Spreadsheet Tables
Usage
- Tables may appear inside of panels but are not required to be placed there. Placement inside of a panel is not recommended when tables span the full width of a screen. However, smaller tables and/or sets of multiple tables on a screen may be placed inside panels to create a more balanced layout.
- Actions related to the data set can appear in a toolbar in the upper right. Actions related to a single row may appear as icons or buttons in the far right column of the row. Small buttons appear in the default style table and extra small buttons appear in condensed tables. (See buttons for details.)
Variations
Default Table With Editable Fields
Table Title
Icon | Flight No. | Departure Time | Arrival Time | Actions | |
---|---|---|---|---|---|
Default Table With Editable Rows
Table Title
Flight No. | Departs | Arrives | ||
---|---|---|---|---|
|
||||
|
||||
|
||||
|
Condensed Table
A condensed table is recommended when the user requires access to large amounts of data in a single view for comparison, analysis or editing
Table Title
Icon | Flight No. | Departure Time | Arrival Time | Actions | |
---|---|---|---|---|---|
DL0431 | |||||
AA1321 |
Condensed Table With Editable Fields
Table Title
Icon | Flight No. | Departure Time | Arrival Time | Actions | |
---|---|---|---|---|---|
Spreadsheet Table
A spreadsheet table behaves more like a traditional spreadsheet and can be navigated and edited using the keyboard.
Table Title
Flight No. | Departs | Arrives | Meal Served | Actions | |
---|---|---|---|---|---|
Messaging
Table Title
Icon | Flight No. | Departure Time | Arrival Time | Actions | |
---|---|---|---|---|---|
Time Subject To Change |
Table Title
Icon | Flight No. | Departure Time | Arrival Time | Actions | |
---|---|---|---|---|---|
Time Subject To Change |
Table Title
Flight No. |
Locations
Departs
Arrives
|
Meal Served | Actions | ||
---|---|---|---|---|---|
Disabled Rows, Columns and Cells
Table Title
Flight No. | Departs | Arrives | ||
---|---|---|---|---|
|
||||
|
||||
|
||||
|
Table Title
Flight No. | Departs | Arrives | |
---|---|---|---|
Resizable Columns
Table Title
Icon | Flight No. | Departure Time | Arrival Time | Actions | |
---|---|---|---|---|---|
DL0431 | |||||
AA1321 |
Table Title
Icon | Flight No. | Departure Time | Arrival Time | Actions | |
---|---|---|---|---|---|
DL0431 | |||||
AA1321 |
Expand/Collapse Rows
Table Title
Price | Description | Details | Other | Actions | |
---|---|---|---|---|---|
$289 |
Row Title
Lorem ipsum Aliqua cupidatat cillum eu eu tempor consequat voluptate Ut nostrud tempor ut dolore mollit dolor eiusmod dolore. |
Lorem ipsum Occaecat est amet sit dolor quis consectetur veniam eu in. | Lorem ipsum Duis in ut consequat. |
Additional Functionality
Sorting Tabular Data
- If column sorting is enabled, sort the most important data by default, and display an arrow in the column header. If the user clicks on a column that is already sorted, reverse the sort order and rotate the sort icon.
- Column headings are sortable based on data type. Numbers (value: low/high), Text (alphabetical: ascending/descending), and Time (chronological: most recent/least recent).
- Non-sortable columns such as actions or contextual icons will not feature the sortable arrow on hover.
Developer Notes
Default Table
Default Table
Icon | Flight No. | Departure Time | Arrival Time | Actions | |
---|---|---|---|---|---|
DL0431 | |||||
AA1321 |
Developer Notes
A table component is constructed using the .spark-table
class. An optional table header can be added using the .spark-table__header
class. This allows for a title and navigation buttons to be placed above the table itself. These are created using the .spark-table__title
and .spark-table__nav
classes, respectively.
The table element should be wrapped in a container with the class .spark-table__scroll
. This allows for content which is too wide for a display to become scrollable. If this container is omitted, the table cells may wrap in unexpected ways.
The JavaScript component can be instantiated using new Spark.Table(el)
. This handles selecting individual rows and the “select all” functionality. If you cannot or choose not to use the JavaScript component, simply adding the .active
class to a <tr>
will give it the active styling.
Default Table With Editable Fields
Table Title
Icon | Flight No. | Departure Time | Arrival Time | Actions | |
---|---|---|---|---|---|
Developer Notes
To create a table with editable fields, use input
and select
fields inside the appropriate td
elements.
Use buttons with a class of .spark-btn--sm
when displaying buttons in a default-style table.
Default Table With Editable Rows
Table Title
Flight No. | Departs | Arrives | ||
---|---|---|---|---|
|
||||
|
||||
|
||||
|
Developer Notes
To create a table with editable rows, add the .spark-table--edit-rows
class to your table and create buttons to toggle the edit and delete actions.
A td
with the .spark-table__actions--icons
class should contain buttons with the .spark-table__edit-row
and spark-table__delete-row
classes. These buttons will initiate editing or deletion of a row. The component can be passed confirmDeleteCallback
, onRowSave
and/or onRowDelete
functions to be run when the delete button is clicked, the save button is clicked, and the row deletion has been confirmed.
Editing is confirmed or canceled by two additional buttons. They should be housed in a container with a class of .spark-table__edit-actions
. They should have classes of spark-table__edit-row-cancel
and spark-table__edit-row-save
.
Condensed Table
A condensed table is used only in high-density data displays.
Table Title
Icon | Flight No. | Departure Time | Arrival Time | Actions | |
---|---|---|---|---|---|
DL0431 | |||||
AA1321 |
Developer Notes
To create a condensed table, simply add the .spark-table--condensed
class to your element.
Condensed Table With Editable Fields
Table Title
Icon | Flight No. | Departure Time | Arrival Time | Actions | |
---|---|---|---|---|---|
Developer Notes
To create a table with editable fields, use input
and select
fields inside the appropriate td
elements.
Use .spark-btn--xs
when displaying buttons in a condensed table.
Spreadsheet Table
A spreadsheet table behaves more like a traditional spreadsheet and can be navigated and edited using the keyboard.
Table Title
Flight No. | Departs | Arrives | Meal Served | Actions | |
---|---|---|---|---|---|
Developer Notes
To create a spreadsheet table, add the .spark-table--spreadsheet
class to your element. Spreadsheet tables are inherently editable. td
elements should contain input
and select
elements that hold their values.
Messaging
Table Title
Icon | Flight No. | Departure Time | Arrival Time | Actions | |
---|---|---|---|---|---|
Time Subject To Change |
Table Title
Icon | Flight No. | Departure Time | Arrival Time | Actions | |
---|---|---|---|---|---|
Time Subject To Change |
Table Title
Flight No. |
Locations
Departs
Arrives
|
Meal Served | Actions | ||
---|---|---|---|---|---|
Developer Notes
Messaging on a table cell is accomplished by setting a data-error
, data-warning
, data-success
or data-info
attribute on a td
. This is a similar methodology to how Text Inputshandle their messaging. In addition to the attribute, a container with a class of .spark-table__message
should be inside the td
with the message content.
While the iconography is always visible, the message is only shown when the associated input element receives focus.
Disabled Rows, Columns and Cells
Table Title
Flight No. | Departs | Arrives | ||
---|---|---|---|---|
|
||||
|
||||
|
||||
|
Table Title
Flight No. | Departs | Arrives | |
---|---|---|---|
Developer Notes
Rows on a table can be disabled by adding the .spark-table__disabled-row
class to the appropriate tr
element. Fields can be disabled by adding the disabled
attribute to an input
or select
element. Columns can be disabled by adding the .spark-table__disabled-column
to the appropriate th
in the thead
element.
Resizable Columns
Table Title
Icon | Flight No. | Departure Time | Arrival Time | Actions | |
---|---|---|---|---|---|
DL0431 | |||||
AA1321 |
Table Title
Icon | Flight No. | Departure Time | Arrival Time | Actions | |
---|---|---|---|---|---|
DL0431 | |||||
AA1321 |
Developer Notes
Add a class of .spark-table--resizable
to make columns resizable on a table. Checkbox columns will not be resizable.
Expand/Collapse Rows
Table Title
Price | Description | Details | Other | Actions | |
---|---|---|---|---|---|
$289 |
Row Title
Lorem ipsum Aliqua cupidatat cillum eu eu tempor consequat voluptate Ut nostrud tempor ut dolore mollit dolor eiusmod dolore. |
Lorem ipsum Occaecat est amet sit dolor quis consectetur veniam eu in. | Lorem ipsum Duis in ut consequat. |
Developer Notes
Add a class of .spark-table-expand
to a td
to make it expandable. This will create a new instance of the Expand/Collapse component. Content to show/hide should have a class of spark-expand__content
, and the buttons to toggle expanding and collapsing should have a class of spark-expand__toggle
.
Additional Functionality
Sorting Tabular Data
- If column sorting is enabled, sort the most important data by default, and display an arrow in the column header. If the user clicks on a column that is already sorted, reverse the sort order and rotate the sort icon.
- Column headings are sortable based on data type. Numbers (value: low/high), Text (alphabetical: ascending/descending), and Time (chronological: most recent/least recent).
- Non-sortable columns such as actions or contextual icons will not feature the sortable arrow on hover.
Developer Notes
Sorting styling is enabled, but the JavaScript component does not have any built-in sorting functionality. This may change in future releases of Spark.