Create a row inline.
Please note - this property requires the Editor extension for DataTables.
The full Editor reference documentation is available to registered users of Editor - the information shown below is a summary only. If you already have an Editor license please sign-in, alternatively an Editor license can be purchased on this site, or sign up for the free trial.
As well as being able to edit existing data directly in a table through the
inline() method, Editor can also allow an end user to create a new row as if it was part of the original table. This is done by calling
inlineCreate() which will insert a new row at the top or bottom of the table's current view, with the fields and columns automatically derived from how the DataTable and Editor form are configured.
If a redraw of the host table is performed while the the new row is still shown (e.g. due to a regular
ajax.reload) the row will be reinserted. However, clicking outside of the new row (for example on the table's paging control) will cause the form to blur. This might cause a submit, or for the form to be closed without saving, based on the
form-options used. Care should be taken to ensure that your users will be presented with an interface paradigm they are already familiar with to ensure no accidental data loss occurs.
Please note there are a number of limitations to creating new rows this way:
- It doesn't suit a scrolling table (
scrollY) very well since the new row is either at the top or bottom of the table and might be out of the scroll view,
- Data can only be added for the columns which are visible,
- Large input elements such as a
datatabledo not work well with inline editing as they can cause the table's layout to change,
- This method will only work with a DataTable - i.e. it will not work with standalone editing.
For these cases it is suggested you use modal row creation (