SearchPanes 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

By making use of the dom property it is possible to choose where the panes will appear relative to the main DataTable. When working with the dom property SearchPanes is aliased by the P character in the dom property. The recommended layout and dom initialisation is

{
    dom: 'Pfrtip'
}

This will ensure that the Panes are placed above the DataTable. If you wanted the Panes to appear below the Table, paging and info sections then you would initialise as follows

{
    dom: 'frtipP'
}

Setting the number of Panes in a row

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

{
    searchPanes: {
        layout: `columns-2'
    },
    dom: 'Pfrtip'
}

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 manipulating the dom property like so

{
    searchPanes:{
        layout: 'columns-1'
    },
    dom: '<"dtsp-verticalContainer"<"dtsp-verticalPanes"P><"dtsp-dataTable"frtip>>'
}

This will display the Panes on the left side of the DataTable.