Skip to main content

Hide Data Table when there is no Data

Intro​

Good web design hides empty tables, making the interface clean and easy to navigate. This focuses attention on important content, making the experience user-friendly and visually appealing. This not only improves accessibility but also leaves a positive impression overall.

In this video tutorial you will learn how to hide data when there is no data.

1. Drop a Component​

Go to Components and choose any component such as, say, Data Table. When you drag-and-drop it then open its Settings from the right circular icon and choose - where to get the data from, collection fields and filter.

Here choose the option Hide When Empty. This will hide the data table when it has no data to display.

DrapCode Builder Export Import Collection Item

2. Preview the Changes​

Click Preview and you will see the data in the collection.

DrapCode Builder Export Import Collection Item

3. Delete the Data​

Now you delete the delete form the collection to later test this functionality.

DrapCode Builder Export Import Collection Item

4. Preview the Changes​

Now when the collection data has been deleted, refresh the Preview page and you won't the data table as it is hidden now.

DrapCode Builder Export Import Collection Item

Conclusion​

One benefit of hiding empty tables in good web design is that it enhances the user's ability to navigate the interface smoothly, ensuring they can easily find and engage with relevant content without distractions or unnecessary clutter.