Layout

It is possible to define your own layout for SearchPanes. This allows for a more customisable experience when including SearchPanes on your page.

Setting the location of the panes

As noted in the usage documentation, how SearchPanes is assigned in layout will define where it appears:

new DataTable('#myTable', {
    layout: {
        top: 'searchPanes'
    }
});

Will show the panes above the default page length and search input. You can make use of the layout grid to control where you would like the items to appear.

Buttons

SearchPanes integrates with the Buttons extension for DataTables by providing a searchPanes button, which can be added to your table's buttons list:

new DataTable('#example', {
    layout: {
        topStart: {
            buttons: ['searchPanes']
        }
    }
});

Row count

As default, SearchPanes will display the panes three wide per row on a full desktop display, there is a responsive element built in to adjust this based upon the width of the screen. Should you want to override this default it is possible to define how many panes appear on each row within the SearchPanes container, as shown below

new DataTable('#example', {
    layout: {
        topStart: {
            searchPanes: {
                layout: `columns-2'
            }
        }
    }
});

The above initialisation will allow the panes to display 2 wide per column. There are 6 options supported - from 1 to 6 respectively.

Displaying Panes Vertically

It is also possible to display the panes vertically alongside a DataTable by inserting the SearchPane container element into its own container. For example:

let table = new DataTable('#example', {
    searchPanes: {
        layout: 'columns-1'
    },
    pageLength: 25
});

document
    .querySelector('div.dtsp-verticalPanes')
    .appendChild(table.searchPanes.container().get(0));

This code can be seen running in this example.