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!

7 Likes

I love this @tim.young! Thanks for sharing

1 Like