responsive.details.type
Set the child row display control type.
Please note - this property requires the Responsive extension for DataTables.
Description
Responsive has two built in methods of managing how the child row display control is shown to the end user:
inline
- where the first column in the table has additional padding added to it and the:before
pseudo element is used to display the button.column
- where a whole column is dedicated to the show / hide control.none
- Don't show the show / hide icons - typically used when the user's ability to show / hide rows is removed (responsive.details.target
).
The inline
style is useful if you already have a table that you quickly want to add Responsive to without changing its structure, while the column
type can be useful if you don't want the first column's layout to be modified by the padding required to make space for the inline display.
Please note that as with all other configuration options for Responsive, this option is an extension to the default set of DataTables options. This property should be set in the DataTables initialisation object.
Type
string
- Description:
The child row display type to use. This can be one of:
inline
- Use the first column to display the control elementcolumn
- Use a whole column to display the control element. Note that if used as a column type and thetarget
option is set to be a column index, the class assigned to that column in the DataTable should bedtr-control
to allow the CSS to display a visual show / hide control to the end user.none
- Don't show the show / hide icons
Default
- Value:
inline
Example
Use the column
control type:
new DataTable('#myTable', {
responsive: {
details: {
type: 'column'
}
},
columnDefs: [
{
className: 'dtr-control',
orderable: false,
targets: 0
}
],
order: [1, 'asc']
});