<aside> ☝

Note: These guidelines exist to enable thoughtful and consistent design decisions. The patterns illustrated do not exist in our Figma library and certain requirements may not be fully propagated across the experience.

</aside>

Foundation

• Always define the use case: Designers should clearly articulate what the table will show and what users will do with it before implementing.
• Human-readable identifier should always be first column: Start with the most recognizable information (name, title, etc.) for quick identification.
• Display actions at the end of the row: Keep interaction points consistent and separate from data.

Content & Structure

• Right-align numeric data: All quantities, currencies, percentages should be right-aligned for easy scanning and comparison.
• Left-align text and non-numeric identifiers: Text content should be consistently left-aligned for readability.
• Group related columns together: Don't separate logically connected information (e.g., address, city, zip).
• Use appropriate data types: Ensure columns display data in the correct format (dates, numbers, text).
• Show empty states meaningfully: Use "—", "N/A", or other appropriate indicators instead of blank cells.
• Truncate long content: Use ellipsis for text that exceeds column width with hover to show full content.

Navigation

• Consider fixing the header row: When tables have many rows requiring vertical scrolling, keeping column headers visible helps users maintain context.
• Consider fixing the first column: For tables with many columns requiring horizontal scrolling, fixing the identifier column helps users maintain context about what each row represents.
• Consider fixing the actions column: When horizontal scrolling is necessary in interactive tables, keeping the actions column visible alongside the identifier column ensures users always have access to row operations without needing to scroll back and forth.
• Consider screen size constraints: For narrower screens, prioritize fixing the identifier column over the actions column if both would leave insufficient space for data.
• Make horizontal scrolling discoverable: Show partial rightmost column to indicate more content.
• Implement keyboard navigation: Support arrow keys, tab navigation, and keyboard shortcuts.
• Provide pagination controls: For large datasets, include clear page navigation with customizable page size.