Responsive master-detail demo


Demonstrated features

  • master-detail
  • responsive table
  • default styling

Required skills

  • novice/expert

Required license

  • premium

Click a department to sync the employees table.

Deptno (key)DnameLoc
Deptno (key)DnameLoc

Empno (key)EnameJobMgrHiredateSalCommDeptno
Empno (key)EnameJobMgrHiredateSalCommDeptno

Responsive master-detail tables

A master-detail page presents the relationships between two data tables. One data table acts as the master table and another as the detail table. When the user clicks on a row of the master table, the detail table is automatically updated to reflect the relationship.

Enable responsive master-detail feature

Advanced options used to enable master-detail feature on the master table:

	"initComplete": "function( settings, json ) { wpda_init_master_detail( settings, json, 28, 'emp', 'deptno', 'deptno' ) }",
	"drawCallback": "function( settings ) { wpda_nav_master_detail( settings, 28, 'emp' ) }",
	"select": {
		"style": "single",
		"selector": "tr"
	"pageLength": 2

Relevant links


Submit a Comment

Your email address will not be published. Required fields are marked *