Data Display

Data tables display sets of data across rows and columns.

In this page

Layout

Data Display

The indicator column has been added to the data table. The indicator (flag icon) will be a visual cue to attract the user’s attention to a booking that warrants the user’s attention.

The max-width of the table will be set at 1000 pixels. For the STAY column, we will only display a building (hotel) or home (vacation rental) icon.

Layout Revised

Subtext

With a Subtext format, we will save space by combining columns. This will provide timely context and helpful details.

Subtext Specs

Filtering

Popovers

We will employ a filtering system on the top section of the table. Let's retain the column function as it will be helpful in the tablet viewport. The Export funtion will let the user download a CSV file based on the format that they are viewing.

Search

The search should work as it does here on this page.

Breakpoints

The following show the table layout in the tablet viewports. The way to handle the display of the date in these breakpoint is by removing certain columns.

This shows the value of the COLUMN filter in the tablet viewport allowing the user to decide what columns to display.