createInline
A button that will insert a new row for inline row creation.
Please note - this property requires the Editor extension for DataTables.
Description
Similar to create the purpose of this button is to create a new row, but rather than using the create() method to show a modal, this button will trigger the inlineCreate() method to show the row creation inputs inline with the host table. See inlineCreate() for full details.
This button requires that the editor option must be set, which tells the button which Editor instance to operate on when activated.
Options
This button can have the following options set in its configuration object to customise its actions and display, in addition to those options which are available for all buttons (e.g. buttons.buttons.text):
editor
- Type:
DataTables.Editor - Default: Unset
The Editor instance that this button should operate on when activated.
formOptions
- Type:
object - Default: Unset
Form options to configure the behaviour of the form - see form-options for full details. The options specified here will take precedence over any configured by formOptions.inline.
The options of particular interest here are likely to be:
onBlursubmitTriggersubmitHtml.
position
- Type:
string - Default:
start - Since: 2.0.1
Position in the table that the new row should be inserted into. Can be start or end.
Examples
A single, simple button for the Editor instance myEditor to triggering inline creation of data in a table:
new DataTable('#myTable', {
buttons: [
{
extend: 'createInline',
editor: myEditor
}
]
});Show inline create row at the end of the table:
new DataTable('#myTable', {
buttons: [
{
extend: 'createInline',
editor: myEditor,
position: 'end'
}
]
});Related
The following options are directly related and may also be useful in your application development.