Data Display

Data tables display sets of data across rows and columns.

In this page


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


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

Subtext Specs



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.




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

How Search should work


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.

960 px

600 px

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

600px / Columns filter