Skip to content

Commit

Permalink
docs(website): add Table component documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
shelbyj1 authored Dec 6, 2024
1 parent 8070721 commit 5f88f87
Showing 1 changed file with 8 additions and 4 deletions.
12 changes: 8 additions & 4 deletions website/docs/components/table.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -25,32 +25,36 @@ Use a table to organize and display long lists of data or content, or to help us
- Numbers - right align
- Checkboxes or radio buttons - center align
- Columns should be in a logical order from left to right based on the content. The farthest left content column should meaningfully label the row. If bulk actions can be taken, a checkbox should be the first item in the column. If there are no bulk actions, the most important identifying information should be in the first column. For example, in a student set the first column should be the student’s name.

:::note Why
- Placing the most important or identifying information in the leftmost columns allows users to quickly scan and understand the table or take an action quickly.
Placing the most important or identifying information in the leftmost columns allows users to quickly scan and understand the table or take an action quickly.
:::

- Tables must have at least 2 columns.
- Accessibility Reccomendation: If a table has only one or two columns, it might be more appropriate to use a list or another format to present the data
- Column titles in the header row should be as short as possible, allowing wrapping to two lines if necessary, while table content should ideally fit on one line but can wrap to multiple lines when needed.
:::note Why
- Short titles help to minimize visual clutter, making it easier for users to find and understand the information they need. Wrapping content ensures that important information is not truncated, which can be critical for understanding the data presented.
Short titles help to minimize visual clutter, making it easier for users to find and understand the information they need. Wrapping content ensures that important information is not truncated, which can be critical for understanding the data presented.
:::

- Column titles should accurately label the data within the column, and include units of measurement in the column title if possible.

:::note Why
- Including the unit of measurement inside each data cell (e.g., 95%) complicates exporting and importing data into another system, and may require users to manually remove all the percentage signs from each cell.
Including the unit of measurement inside each data cell (e.g., 95%) complicates exporting and importing data into another system, and may require users to manually remove all the percentage signs from each cell.
:::

- All content within a column is the same level of hierarchy as all other content within that column. A table shouldn’t be used to communicate hierarchy.
- If a table has no content, it should display an empty state or not display the table at all.


### Search & Filter

-Search and filters can be used in conjunction with tables to help users find information
- If columns are sortable, the sort symbols are always visible.
- Introducing more functionality within a table will create more complexity and can lead to users having difficulty interpreting.

:::note Why
-Splitting complex tables into simpler, focused tables enhances clarity and usability, allowing users to understand each sub-topic more effectively.
Splitting complex tables into simpler, focused tables enhances clarity and usability, allowing users to understand each sub-topic more effectively.
:::

:::danger Don't
Expand Down

0 comments on commit 5f88f87

Please sign in to comment.