Skip to content

Draft: Resolve "Make the table element responsive"

Andrea Disarò requested to merge 2523-make-the-table-element-responsive into develop

What is in this MR

Adds default responsiveness to TableElement and an option to stack the fields in tablet and mobile views, requiring no horizontal scrolling in these modes.

Screenshots

This migration is not zdm compatible as it does not make responsive_layout property null by default.

How to test this MR

  • Add a new table element connected to a data source
    • Add lots of columns to test the horizontal behavior.
  • In the table element form there should be a new Responsive layout dropdown that allows you to select between Horizontal scroll and Stack fields
  • Play with the different combinations in the editor: per each dropdown value test the website in desktop, tablet and mobile modes.
  • The table show automatically update based on these properties.

Merge Request Checklist

  • changelog.md has been updated if required.
  • New/updated Premium/Enterprise features are separated correctly in the premium or enterprise folder
  • The latest Chrome and Firefox have been used to test any new frontend features
  • Documentation has been updated
  • Quality Standards are met
  • Performance: tables are still fast with 100k+ rows, 100+ field tables
  • The redoc API pages have been updated for any REST API changes
  • Our custom API docs are updated for changes to endpoints accessed via api tokens
  • The UI/UX has been updated following UI Style Guide

Closes #2523

Edited by Afonso Silva

Merge request reports