Data tables display sets of data across rows and columns.
In this page
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.
With a Subtext format, we will save space by combining columns. This will provide timely context and helpful details.
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.Columns Export
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