Skip to content
English
Contact us
  • There are no suggestions because the search field is empty.

Data Tables

Data tables are one of the most frequently used interface components across our software. They serve as the backbone for presenting complex information such as orders, routes, drivers, inventory, invoices, and more, in a way that is both accessible and actionable. Because dispatchers, managers, and support staff rely on these tables daily to make time-sensitive decisions, consistency in their design and implementation is critical.

When data tables behave differently across pages, users experience unnecessary friction: they must relearn interactions, search for familiar controls, and adapt to subtle variations in layout or functionality. This not only slows down workflows but also increases the risk of errors in environments where precision and speed are essential. By contrast, a consistent approach ensures that users can transfer knowledge seamlessly from one part of the system to another, reducing cognitive load and building trust in the software.

This document outlines the principles and standards for implementing data tables across our application. It emphasizes uniformity in areas such as column alignment, sorting and filtering behavior, pagination, inline editing, and accessibility. By adhering to these guidelines, we create a predictable and reliable user experience that empowers dispatchers and other stakeholders to focus on their work rather than the tool itself.

Consistency is not just a matter of aesthetics—it is a cornerstone of usability, efficiency, and scalability. Establishing a unified design language for data tables strengthens our product’s identity, improves onboarding for new users, and ensures that future enhancements can be applied system-wide without fragmentation.

Data Table Design System Guidelines

1. Lines & Borders

  • Divider and accent lines must use consistent colors.

    • Light mode: #595959 (N500)

    • Dark mode: #B9B9B9 (N100)

2. Column Headers

  • Apply consistent styling across all tables.

Light mode

  • Fill: #ECF3E8 (P50)

  • Text: #292929 (N800)

  • Stroke: #595959 (N500)

  • Default icon: #596E80 (S600)

Dark mode

  • Fill: #1D370B (P900)

  • Text: #FFFFFF (N0)

  • Stroke: #B9B9B9 (N100)

  • Default icon: #B0C2D4 (S200)

Note: Icon colors may vary depending on usage.

3. Table Headers

  • Displayed above column headers within the same container.

  • Can include:

    • Table title

    • Tabs

    • Search field

    • Icons for controls (help, info, view options)

  • Multiple headers may be combined for additional navigation and controls.

4. Table Footers

  • Pagination must be included as a fixed footer beneath the lowest row.

  • Footer remains visible during scrolling.

5. Row States

Hover State (normal rows only)

  • Light mode: #E2E2E2 (N40)

  • Dark mode: #595959 (N500)

Active State (selectable rows)

  • Rows should include a leftmost checkbox column.

  • Selection applies to entire row.

  • Light mode: #C7E5B3 (P100)

  • Dark mode: #315D13 (P700)

Disabled State

  • Disabled rows show muted text/icons.

  • No interaction allowed.

  • May include helptext while hovering if necessary.

6. Scrolling

  • Tables scroll independently, not the entire page.

  • Footer remains fixed above the fold.

  • Vertical scrolling: column headers remain fixed; scrollbar does not overlap header.

  • Horizontal scrolling: applies to headers and rows, not footer/title. Scrollbar sits above footer.

  • Columns such as checkboxes (and map pins in the VDB) should remain fixed and always visible.

7. Layout & Spacing

  • Checkboxes always appear in the leftmost column.

  • Primary page tables: allow extra space below for minimized orders.

8. Column Resizing

  • All tables must support manual column width adjustment.

  • Vertical lines required between columns.

    • Light mode: #595959 (N500)

    • Dark mode: #B9B9B9 (N100)