It is possible to define your own layout for SearchPanes. This allows for a more customisable experience when including SearchPanes on your page.
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
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
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
The above initialisation will allow the panes to display 2 wide per column. There are 6 options supported - from 1 to 6 respectively.
It is also possible to display the panes vertically alongside a DataTable by manipulating the
dom property like so
This will display the Panes on the left side of the DataTable.