diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.mdx b/packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.mdx index 876a1d8139..3cbf85b3d0 100644 --- a/packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.mdx +++ b/packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.mdx @@ -1,6 +1,11 @@ import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'; -import { Callout, ComponentHeader, LinkTo } from '~styleguide/blocks'; +import { + Callout, + ComponentHeader, + ImageWrapper, + LinkTo, +} from '~styleguide/blocks'; import * as DataTableStories from './DataTable.stories'; @@ -21,32 +26,64 @@ export const parameters = { -## Design principles +## Usage -**Design principles** +Use a `DataTable` to compare large amounts of data across rows and perform bulk actions on table rows. -- Recommended for bulk analysis across Rows -- Tables best support information that needs sorting, filtering, pagination, and querying -- Prioritize data and information that’s meant to be compared up front, then surface secondary information on external surfaces +### Best practices: -**Use table affordances for best information design** +- Prioritize the data meant to be compared up front; surface secondary details on other surfaces +- Arrange columns to support scanning and comparison, and order metrics by priority +- Use cell-level interactions — tooltips, modals, anchors — to activate or expand specific data -- Design and arrange table metrics to encourage finding, scanning, and comparing information +### When NOT to use: -**Use cell-level interactions to activate specific data** +- **Non-comparable content** - for repeating items that aren't compared column-by-column, use the List component instead +- **Single-record fields** - for the attributes of one entity or an editable form, use a Form layout instead of a table -- Use Coachmarks, Tooltips, Modals, and Flyovers to augment information -- Use Anchors and Links to direct users to another surface +## Anatomy -**Be careful about information overload** + -- Determine what’s helpful to see en-masse, versus what info should be drilled down into -- Be mindful about the horizontal spacing between columns and headers -- Order metrics based on priority, and consider collapsing extraneous metrics on smaller sizes +1. **Header row** -## Usage +- One header cell per column — the column titles plus their sort and filter controls +- Sticks to the top while the table body scrolls so it stays visible (desktop; releases when columns stack at narrow widths) +- Sits on the table's surface (background-current) with a 2px bottom border, so rows don't show through as they scroll under it + +2. **ColumnConfig** + +- Defines one column — its header and all of its data cells +- type — what the column is: + - **content** (default) — a standard data column + - **header** — renders the column's cells as row-headers; sticks to the left (frozen, with a divider) when scrollable. You mark your identifying column — it isn’t automatic + - **control** — an action column; cells default to an overflow Icon Button (kebab), and its header has no sort or filter +- sortable adds a SortControl · filters adds a FilterControl · size and justify set width and alignment · fill lets it absorb extra width + +3. **ListCol** + +- A single data cell; holds the column's value — text or any element + +4. **SortControl** + +- Shown on a sortable column header; cycles ascending → descending → none + +5. **FilterControl** + +- Shown on a column header with filters set; opens a menu to filter the table by that column's values + +6. **Frozen divider** + +- The delimiter on the frozen header column; shown only when scrollable is on + +7. **Row** -Use a `DataTable` to display a table of items that contain a lot of information. The top row of the table is the header, and each row below is a list item. Rows can be customized to show a loading state, scrollability, filtering, and sorting. +- One record; with the table variant, rows alternate the background-selected surface +- Density follows the spacing prop: normal / condensed / compact ### Sample code diff --git a/packages/styleguide/src/static/organisms/datatable.png b/packages/styleguide/src/static/organisms/datatable.png new file mode 100644 index 0000000000..d0e2593865 Binary files /dev/null and b/packages/styleguide/src/static/organisms/datatable.png differ