Ample Design System | Data Tables

Data tables are used to organize and display all information from a data set. While a data visualization represents part of data set, a data table lets users view details from the entire set. This helps users compare and analyze the data.

Best practices

• Show values across multiple categories and measures.

• Allow for filtering and ordering when the comparison is not a priority.

• Help users visualize and scan many values from an entire data set.

• Help users find other values in the data hierarchy through the use of links.

• Minimize clutter by only including values that support the data’s purpose.

• Wrap instead of truncating content. This is because if row titles start with

In the same word, they’ll all appear the same when truncated.

• Not to be used for an actionable list of items that link to details pages. For

this functionality.

Alignment

Column content types are built into the component props so the following alignment rules are followed:

• Numerical = Right aligned

• Textual data = Left aligned

• Align headers with their related data

• Don’t center align

Ample - The SaaS design system

Ample is a design system created by Amplifyn, to help build consistent interfaces that are user-friendly. It bundles design tokens, design patterns, front-end code, and guidelines as a foundation that is not overly complicated. Ample provides just the right building blocks to craft a better user experience in SaaS products quickly.

Want to know more? https://www.amplifyn.com