Bootstrap Tables

In version 4.1.11-pre, we've been transitioning to using Bootstrap Table's data attributes more, to give us a little more flexibility with how our tables work. While they'll be the same most of them, there are definitely times we want to suppress the export or refresh screen, etc.

In your blade, this is how you would call the most detailed specification for a table. (This example is from the asset listing page.)

<table
    data-advanced-search="true"
    data-click-to-select="true"
    data-columns="{{ \App\Presenters\AssetPresenter::dataTableLayout() }}"
    data-cookie-id-table="assetsListingTable"
    data-pagination="true"
    data-id-table="assetsListingTable"
    data-search="true"
    data-show-columns="true"
    data-show-export="true"
    data-show-footer="true"
    data-show-refresh="true"
    data-sort-order="asc"
    data-sort-name="name"
    data-toolbar="#toolbar"
    id="assetsListingTable"
    class="table table-striped snipe-table"
    data-url="{{ route('api.assets.index',
        array('status' => e(Input::get('status')),
        'order_number'=>e(Input::get('order_number')),
        'company_id'=>e(Input::get('company_id')),
        'status_id'=>e(Input::get('status_id')))) }}"
    data-export-options='{
    "fileName": "export{{ (Input::has('status')) ? '-'.str_slug(Input::get('status')) : '' }}-assets",
    "ignoreColumn": ["actions","image","change","checkbox","checkincheckout","icon"]
    }'>
  </table>

The order these attributes appear in do not matter, but we typically try to keep them alphabetical so we can clearly see which attributes are being set.

AttributeDefaultNotes
data-advanced-searchfalseThis creates the advanced search (the one that pops up a modal form with searchable fields). This cannot be used without a backend that is expecting to handle filter parameters, and must have the data-id-table attribute set. This particular feature is very poorly documented in the Bootstrap Tables extensions documentation. :(
data-click-to-selectfalseSetting this attribute to true will allow you to click anywhere in the row to select the row checkbox(es).
data-columnsIf you choose to set this, you should pass it a JSON object with the column attributes. These are commonly found in the model's Presenter::dataTableLayout() method, but not always. (We don't always bother for very simple data displays.
data-cookie-id-tableThe CSS id selector we should use for the table's cookie.
data-pagination`falseYou must set this explicitly if you wish to use page numbers in your table. (There are only a few instances, like the dashboard recent activity, where we wouldn't want to enable pagination.)
data-id-tableRequired for the Advanced Search to show up in the toolbar.
data-searchfalseSet this to true to enable searching the table. Note that server-side tables will need to have the backend in place to search on the fields you're trying to search on.
data-show-columnsfalseSet this to true to show the column selector that allows people to show/hide columns.
data-show-exportfalseSet this to true to show the export option.
data-show-footerfalseSet this to true to show a sum at the bottom of the table.

Additionally, you'll need to specify data-footer-formatter="sumFormatter" on whichever columns you wish to have tallied.
data-show-refreshfalseSet this to true to show the refresh button on the table.
data-sort-orderascWhat order (asc vs desc) to pass the table's AJAX call on page load (before the user has selected anything for sorting). I don't know why this defaults to asc in bootstrap tables, but it does.
data-sort-nameThe fieldname you want to sort on by default.
data-toolbarThe CSS class for the custom toolbar (if any) that we want to include.
idAnother badly documented attribute here. If you want to use the sticky headers on the tables, be sure to set this.
classThis should usually be set to table table-striped snipe-table
data-urlThe {{ route() }} to the API call w need to populate the table.
data-export-optionsThis is super gross the way this is implemented, but at least we have data attributes now, so I won't complain.

This should look something like this:

data-export-options='{ "fileName": "export{{ (Input::has('status')) ? '-'.str_slug(Input::get('status')) : '' }}-assets", "ignoreColumn": ["actions","image","change","checkbox","checkincheckout","icon"] }'

The ignored columns are those that should not be included in the export, even if the user has them visible when they select the export option.