One Bootstrap table to rule them all

Wappler General Need Help
1

I see a lot of people asking about the bootstrap table generator because they create a lot of tables.

If you are just outputting a query to a table you can use the following html code that will make your life much simpler. This example is for a paged query.

It will use as column header the name or alias of the column in your database query.

If you add another column to the query or join a table it will automatically reflect the changes without having to add additional html or run the generator.

<div class="table-responsive">
    <table class="table align-items-center">
      <thead>
        <tr id="repeat1" is="dmx-repeat" dmx-bind:repeat="serverconnect1.data.query.data[0].keys()">
          <th scope="col">{{$value}}</th>
        </tr>
      </thead>
      <tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="serverconnect1.data.query.data" id="repeat2">
        <tr id="repeat3" is="dmx-repeat" dmx-bind:repeat="$value.values()">
          <td dmx-text="$value"></td>
        </tr>
      </tbody>
    </table>
  </div>

This just covers the basics. You can improve and iterate over this piece of code and make your life very easy :slight_smile:

9 Likes
2

A form of object oriented database driven structure with database driven content. If set-up correctly it can be a great way to work.

I did quite a large site once that almost generated it’s own back-end content management system with self generating forms and SQL statements. Everything (almost) was in the database including structure, html, formatting, SQL etc. Wow brings back memories.

1 Like
3

This is a really good example. Thanks @JonL.

It doesn’t remove the need for the generator, though, as I rarely have the column headings matching the field names and often do things like combining FirstName and LastName in a single column so I remain keen for the generators to be made available for BS5.

1 Like