Snipe-IT Asset Management Installation Documentation

Welcome to the Snipe-IT documentation hub. You'll find comprehensive guides and documentation to help you install Snipe-IT as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

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.

Updated about a year ago


Bootstrap Tables


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.