DataTable inside Bootstrap 4 Collapse (Accordion)

DataTable inside Bootstrap 4 Collapse (Accordion)

bjuneaubjuneau Posts: 20Questions: 5Answers: 1

I gave this a try, but the table doesn't render correctly. I tried the PageResize plugin, but it doesn't behave as intended, and still renders funny in Chrome and FF.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
</tbody
</table>
      </div>
    </div>
  </div>
</div>

Answers

  • bjuneaubjuneau Posts: 20Questions: 5Answers: 1

    This works, but not sure if it's the best fix:

    $('#accordion').on('shown.bs.collapse', function() {
        $.each($.fn.dataTable.tables(true), function(){
            $(this).DataTable()
            .columns.adjust()
            .responsive.recalc();
        });
    });
    
  • bjuneaubjuneau Posts: 20Questions: 5Answers: 1

    I do see another issue. When you have FixedColumns activated the columns get distorted with horizontal scroll.

  • bjuneaubjuneau Posts: 20Questions: 5Answers: 1
  • bjuneaubjuneau Posts: 20Questions: 5Answers: 1

    This fixed it:

    $( "#sections-master-collapsible1" ).on("shown.bs.collapse", function() {
                $.each($.fn.dataTable.tables(true), function(){
                    $(this).DataTable().columns.adjust().draw();
                });
            });
    
  • bjuneaubjuneau Posts: 20Questions: 5Answers: 1

    Here's a working fiddle in case anyone has similar issue:

    http://jsfiddle.net/9awp17yn/1/

  • kashokkashok Posts: 1Questions: 0Answers: 0

    Bootstrap table inside a card is giving some gap while applying datatable to the bootstrap table

  • nahueldinahueldi Posts: 1Questions: 0Answers: 0

    it works, thanks!!

This discussion has been closed.