Data Table

Data tables display data in a grid-like format of rows and columns. They organize data in a way that’s easy to scan, so that users can look for patterns and insights.

In this page

Objectives

Expedia UDS Data Tables

We are embarking on redesiging all tables in Classic Assist with the adoption of the design principles of Expedia's UDS.

  • Incorporate the UDS guidelines into data tables.
  • Build the data tables in Figma.
  • Create wireframes for overall study.

Anatomy

Data tables organize information across:

  • Columns
  • Columns header names
  • Rows
  • Footer
  • Pagination

Figma

This projects is the first of many to adopt the BEXG and UDS strategy. The table designs have been created in Figma,
Figma: Data Tables

Specifications

Important to follow the guidelines of UDS spacing
Spacing

This shows the overall CSS Specifications of the data table
CSS Specifications

Important to use the UDS Components - this shows the names of each component
UDS Components

Data table responsive
Responsive Data Table

CSS for the Column pulldown and the Filter pulldown:
CSS Specs for Columns
CSS Specs for Filters