Understanding Responsiveness in Mobile Friendly Data Table

Hi

We are using this table component to display some data and we’d like to only show the mobile variant of the data table on desktop as well. The documentation here says that

  • Group Inner desktop table header - This group contains the table column headers that are shown on desktop. This group is shown when the page width is greater than 750 pixels.
  • Group Inner mobile table header - This group contains the table column headers that are shown on mobile. This group is shown when the page width is less than 750 pixels.

And similar for the table contents. However I can’t find the corresponding responsiveness conditions in the conditionals…

How do I edit these so I can delete the conditional on mobile header variant and then I assume just deleting the desktop variant groups or having them be always invisible would work…

Thanks

Hi @Green ,

The conditionals are hiding rules on the elements in Bubble’s responsive editor (so we can collapse the width):

We’ll include this information in our block documentation.

To always show the mobile variant, you should remove the hiding rule on Group Inner mobile table header. To always hide the desktop variant, you should add a hiding rule to Group Inner desktop table header that says “Hide when parent width is greater than 1” so it is always invisible.

1 Like