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.

Attribute	Default	Notes
`data-advanced-search`	`false`	This 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-select`	`false`	Setting this attribute to `true` will allow you to click anywhere in the row to select the row checkbox(es).
`data-columns`		If 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-table`		The CSS id selector we should use for the table's cookie.
`data-pagination`	`false	You 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-table`		Required for the Advanced Search to show up in the toolbar.
`data-search`	`false`	Set 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-columns`	`false`	Set this to true to show the column selector that allows people to show/hide columns.
`data-show-export`	`false`	Set this to true to show the export option.
`data-show-footer`	`false`	Set 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-refresh`	`false`	Set this to true to show the refresh button on the table.
`data-sort-order`	`asc`	What 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-name`		The fieldname you want to sort on by default.
`data-toolbar`		The CSS class for the custom toolbar (if any) that we want to include.
`id`		Another badly documented attribute here. If you want to use the sticky headers on the tables, be sure to set this.
`class`		This should usually be set to `table table-striped snipe-table`
`data-url`		The `{{ route() }}` to the API call w need to populate the table.
`data-export-options`		This 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.

Snipe-IT Documentation

Snipe-IT Asset Management Installation Documentation

Bootstrap Tables

Bootstrap Tables

Suggested Edits are limited on API Reference Pages