One Bootstrap table to rule them all

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