---
updatedAt: 2026-04-14T18:10:58.000Z
agentTools:
  projectIndex: https://snipe-it.readme.io/llms.txt
---

# Bootstrap Tables

We normally use [Bootstrap Table's](http://bootstrap-table.wenzhixin.net.cn/documentation/) **data attributes** , 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.)

```php
<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.

<Table align={["left","left","left"]}>
  <thead>
    <tr>
      <th>
        Attribute
      </th>

      <th>
        Default
      </th>

      <th>
        Notes
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        `data-advanced-search`
      </td>

      <td>
        `false`
      </td>

      <td>
        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. :(
      </td>
    </tr>

    <tr>
      <td>
        `data-click-to-select`
      </td>

      <td>
        `false`
      </td>

      <td>
        Setting this attribute to `true` will allow you to click anywhere in the row to select the row checkbox(es).
      </td>
    </tr>

    <tr>
      <td>
        `data-columns`
      </td>

      <td>

      </td>

      <td>
        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.
      </td>
    </tr>

    <tr>
      <td>
        `data-cookie-id-table`
      </td>

      <td>

      </td>

      <td>
        The CSS id selector we should use for the table's cookie.
      </td>
    </tr>

    <tr>
      <td>
        `data-pagination`
      </td>

      <td>
        \`false
      </td>

      <td>
        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.)
      </td>
    </tr>

    <tr>
      <td>
        `data-id-table`
      </td>

      <td>

      </td>

      <td>
        Required for the Advanced Search to show up in the toolbar.
      </td>
    </tr>

    <tr>
      <td>
        `data-search`
      </td>

      <td>
        `false`
      </td>

      <td>
        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.
      </td>
    </tr>

    <tr>
      <td>
        `data-show-columns`
      </td>

      <td>
        `false`
      </td>

      <td>
        Set this to true to show the column selector that allows people to show/hide columns.
      </td>
    </tr>

    <tr>
      <td>
        `data-show-export`
      </td>

      <td>
        `false`
      </td>

      <td>
        Set this to true to show the  export option.
      </td>
    </tr>

    <tr>
      <td>
        `data-show-footer`
      </td>

      <td>
        `false`
      </td>

      <td>
        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.
      </td>
    </tr>

    <tr>
      <td>
        `data-show-refresh`
      </td>

      <td>
        `false`
      </td>

      <td>
        Set this to true to show the refresh button on the table.
      </td>
    </tr>

    <tr>
      <td>
        `data-sort-order`
      </td>

      <td>
        `asc`
      </td>

      <td>
        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.
      </td>
    </tr>

    <tr>
      <td>
        `data-sort-name`
      </td>

      <td>

      </td>

      <td>
        The fieldname you want to sort on by default.
      </td>
    </tr>

    <tr>
      <td>
        `data-toolbar`
      </td>

      <td>

      </td>

      <td>
        The CSS class for the custom toolbar (if any) that we want to include.
      </td>
    </tr>

    <tr>
      <td>
        `id`
      </td>

      <td>

      </td>

      <td>
        Another badly documented attribute here. If you want to use the sticky headers on the tables, be sure to set this.
      </td>
    </tr>

    <tr>
      <td>
        `class`
      </td>

      <td>

      </td>

      <td>
        This should usually be set to `table table-striped snipe-table`
      </td>
    </tr>

    <tr>
      <td>
        `data-url`
      </td>

      <td>

      </td>

      <td>
        The `{{ route() }}` to the API call w need to populate the table.
      </td>
    </tr>

    <tr>
      <td>
        `data-export-options`
      </td>

      <td>

      </td>

      <td>
        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.
      </td>
    </tr>
  </tbody>
</Table>