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 |
---|---|---|
|
| 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 |
|
| Setting this attribute to |
| 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 | |
| The CSS id selector we should use for the table's cookie. | |
| `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.) |
| Required for the Advanced Search to show up in the toolbar. | |
|
| Set this to |
|
| Set this to true to show the column selector that allows people to show/hide columns. |
|
| Set this to true to show the export option. |
|
| Set this to true to show a sum at the bottom of the table. Additionally, you'll need to specify |
|
| Set this to true to show the refresh button on the table. |
|
| 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. |
| The fieldname you want to sort on by default. | |
| The CSS class for the custom toolbar (if any) that we want to include. | |
| Another badly documented attribute here. If you want to use the sticky headers on the tables, be sure to set this. | |
| This should usually be set to | |
| The | |
| 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:
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. |
Updated about 3 years ago