Configuration

Use the following configuration options to bind the DataTables for WireBootstrap component.

Properties

Name	Default	Description
datamap		Used to bind data to the component. See Data Binding for details.
dataTables		The native configuration pass-through for DataTables. See DataTables for an example.
filter	false	Turn on column filters. Set to true to turn this feature on for all columns. This can also be set to an array of column names to turn this on only for specific columns.
group	false	Determines whether the rows in the table are grouped by the first column
nonDataColumnsLast	false	For columns configured manually in dataTables.columns that do not contain data, this determines whether they appear at the beginning or end of the list of columns in the grid.
rightAlignNumbers	false	Determines whether numeric columns are right-aligned in the table.
totals	false	Determines whether totals are displayed at the bottom of the table. These include totals on each page as well as grand totals across all pages in a table. See Totals for details.

The example below turns on column filters for the table.

new wire.datatables().render("#table", {
    ...
    filter: true
});

DataTables

The following example uses the native DataTables configuration scrollX property to control the horizontal scrolling for a table that is too wide for the screen display.

new wire.datatables().render("#table", {
    ...
    dataTables: {
        scrollX: true
    }
});

Totals

Use the following properties on the totals property for more control over totals in a table.

Name	Default	Description
table	false	Grand totals or table level totals for all rows in the table are displayed at the bottom of the table. The default label is Total.
page	false	Sub totals or page level totals display a total of rows visible on a given page in a table. Page level totals are displayed above label level totals if they are turned on. The default label is Sub Total.

When the totals property is set to true, page and table level totals are displayed at the bottom of the table.

new wire.datatables().render("#table", {
    totals: true
});

The table and/or page property can also be set on totals for finer control over the totals.

The example below sets a custom label for table and page level totals.

new wire.datatables().render("#table", {    
    totals: {
        page: {label: "Page Total"},
        table: {label: "Grand Total"}
    }
});