Panes Vertically Stacked next to DataTable

This example shows how to display the panes to the left of the DataTable instead of above it.

Name	Position	Office	Age	Start date	Salary
Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$3,120
Garrett Winters	Director	Edinburgh	63	2011/07/25	$5,300
Ashton Cox	Technical Author	San Francisco	66	2009/01/12	$4,800
Cedric Kelly	Javascript Developer	Edinburgh	22	2012/03/29	$3,600
Jenna Elliott	Financial Controller	Edinburgh	33	2008/11/28	$5,300
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$4,525
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$4,080
Rhona Davidson	Integration Specialist	Edinburgh	55	2010/10/14	$6,730
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$5,000
Sonya Frost	Software Engineer	Edinburgh	23	2008/12/13	$3,600
Jena Gaines	System Architect	London	30	2008/12/19	$5,000
Quinn Flynn	Financial Controller	Edinburgh	22	2013/03/03	$4,200
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$5,300
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18	$4,800
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17	$2,875
Michael Silva	Senior Marketing Designer	London	66	2012/11/27	$3,750
Paul Byrd	Javascript Developer	New York	64	2010/06/09	$5,000
Gloria Little	Systems Administrator	New York	59	2009/04/10	$3,120
Bradley Greer	Software Engineer	London	41	2012/10/13	$3,120
Dai Rios	System Architect	Edinburgh	35	2012/09/26	$4,200
Jenette Caldwell	Financial Controller	New York	30	2011/09/03	$4,965
Yuri Berry	System Architect	New York	40	2009/06/25	$3,600
Caesar Vance	Technical Author	New York	21	2011/12/12	$4,965
Doris Wilder	Sales Assistant	Edinburgh	23	2010/09/20	$4,965
Angelica Ramos	System Architect	London	36	2009/10/09	$2,875
Gavin Joyce	Developer	Edinburgh	42	2010/12/22	$4,525
Jennifer Chang	Regional Director	London	28	2010/11/14	$4,080
Brenden Wagner	Software Engineer	San Francisco	18	2011/06/07	$3,750
Ebony Grimes	Software Engineer	San Francisco	48	2010/03/11	$2,875
Russell Chavez	Director	Edinburgh	20	2011/08/14	$3,600
Michelle House	Integration Specialist	Edinburgh	37	2011/06/02	$3,750
Suki Burks	Developer	London	53	2009/10/22	$2,875
Prescott Bartlett	Technical Author	London	27	2011/05/07	$6,730
Gavin Cortez	Technical Author	San Francisco	22	2008/10/26	$6,730
Martena Mccray	Integration Specialist	Edinburgh	46	2011/03/09	$4,080
Unity Butler	Senior Marketing Designer	San Francisco	47	2009/12/09	$3,750
Howard Hatfield	Financial Controller	San Francisco	51	2008/12/16	$4,080
Hope Fuentes	Financial Controller	San Francisco	41	2010/02/12	$4,200
Vivian Harrell	System Architect	San Francisco	62	2009/02/14	$4,965
Timothy Mooney	Financial Controller	London	37	2008/12/11	$4,200
Jackson Bradshaw	Director	New York	65	2008/09/26	$5,000
Miriam Weiss	Support Engineer	Edinburgh	64	2011/02/03	$4,965
Bruno Nash	Software Engineer	London	38	2011/05/03	$4,200
Odessa Jackson	Support Engineer	Edinburgh	37	2009/08/19	$3,600
Thor Walton	Developer	New York	61	2013/08/11	$3,600
Finn Camacho	Support Engineer	San Francisco	47	2009/07/07	$4,800
Elton Baldwin	Data Coordinator	Edinburgh	64	2012/04/09	$6,730
Zenaida Frank	Software Engineer	New York	63	2010/01/04	$4,800
Zorita Serrano	Software Engineer	San Francisco	56	2012/06/01	$5,300
Jennifer Acosta	Javascript Developer	Edinburgh	43	2013/02/01	$2,875
Cara Stevens	Sales Assistant	New York	46	2011/12/06	$4,800
Hermione Butler	Director	London	47	2011/03/21	$4,080
Lael Greer	Systems Administrator	London	21	2009/02/27	$3,120
Jonas Alexander	Developer	San Francisco	30	2010/07/14	$5,300
Shad Decker	Regional Director	Edinburgh	51	2008/11/13	$5,300
Michael Bruce	Javascript Developer	Edinburgh	29	2011/06/27	$4,080
Donna Snider	System Architect	New York	27	2011/01/25	$3,120

Javascript
HTML
CSS
Ajax
Server-side script
Comments

The Javascript shown below is used to initialise the table shown in this example:

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

$('div.dtsp-verticalPanes').append(table.searchPanes.container());

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

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

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

div.dtsp-verticalContainer{
	display: flex;
	flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
	align-items: flex-start;
}

div.dtsp-verticalContainer div.dtsp-verticalPanes,
div.dtsp-verticalContainer div.container{
    width: 30%;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 0;
}

div.dtsp-verticalContainer div.dtsp-verticalPanes{
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 26%;
}

div.dtsp-verticalPanes {
    margin-right: 20px;
}

div.dtsp-title {
    margin-right: 0px !important;
    margin-top: 13px !important;
}

input.dtsp-search {
    min-width: 0px !important;
    padding-left: 0px !important;
    margin: 0px !important;
}

div.dtsp-verticalContainer div.dtsp-verticalPanes div.dtsp-searchPanes{
    flex-direction: column;
    flex-basis: 0px;
}

div.dtsp-verticalContainer div.dtsp-verticalPanes div.dtsp-searchPanes div.dtsp-searchPane{
    flex-basis: 0px;
}

div.dtsp-verticalContainer div.container{
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 60%;
}

div.dtsp-panesContainer {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 1em !important;
}

div.dtsp-titleRow {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

div.dtsp-titleRow div.dtsp-title {
  margin-top: 0 !important;
  padding-top: 0;
}

html.dark div.dtsp-panesContainer {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Panes Vertically Stacked next to DataTable

Other examples

Initialisation and options

Advanced initialisation

Customisation

Integration with other DataTables extensions

Creation of custom panes

Styling

Performance

DataTables