Expandable Table (Custom Component)

Hi all :wave:

Just wanted to share this Custom Component. It’s an expandable table that will show additional fields for each record when a “Show Details” button is clicked.

Here’s a working demo you can play with - > https://timyoung.tadabase.io/custom-component-designs#!/expandable-table

The code for each section (HTML, CSS, JS) of the Custom Component can be found here - > https://codepen.io/tyoung560/pen/jOavqev

Please note that if you need to change the number of columns, the HTML must be edited as well. The columns are structured using the Bootstrap grid framework. This means each column must be sized as a number divisible by 12. Let’s look at the following snippet of the Custom Component as an example, paying special attention to this code <div class="col-md-3">

<div class="table-header-row row">
    <div class="col-md-3 header-cell">ID</div>
    <div class="col-md-3 header-cell">First Name</div>
    <div class="col-md-3 header-cell">Last Name</div>
    <div class="col-md-3 header-cell">Details</div>
</div>

2 columns = 12/2 = 6 = col-md-6
3 columns = 12/3 = 4 = col-md-4
4 columns = 12/4 = 3 = col-md-3
6 columns = 12/6 = 2 = col-md-2

Hope you like it!

8 Likes

I love this @tim.young! Thanks for sharing

1 Like

Hi @tim.young,

I am really sorry but I can’t make it work. It seems that I am missing something :frowning:

When I try to copy everything here:
https://codepen.io/tyoung560/pen/jOavqev

It the expandable doesn’t work.

I hope you can help me with this please.
https://timyoung.tadabase.io/custom-component-designs#!/expandable-table

I tried to click this and it seems it is not available anymore.

Can I also apply this using the Table in the Page builder and not HTML?

Thank you