The editing component is the first step to providing a simple but effective row editing interface.
The below lists all the options for the editing component, these are available in addition to the core options.
Whether or not the component is enabled.
false
By default this component is disabled, no UI or features of this component will be available.
To supply this option through data attributes you must specify the attribute on the table element.
<table data-editing="true">
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"editing": {
"enabled": true
}
});
});Whether or not to automatically page to a new row when it is added to the table.
true
By default the plugin will automatically navigate to a new row's page so it is visible to the user.
To supply this option through data attributes you must specify the attribute on the table element.
<table data-editing-page-to-new="true">
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"editing": {
"pageToNew": true
}
});
});The position of the editing column in the table as well as the alignment of the buttons.
"right"
The only other supported value for this option is "left"
To supply this option through data attributes you must specify the attribute on the table element.
<table data-editing-position="right">
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"editing": {
"position": "right"
}
});
});Whether or not the editing column and add row button are always visible.
false
By default the editing column and add button are hidden requiring the user to click an edit button to make them visible.
To supply this option through data attributes you must specify the attribute on the table element.
<table data-editing-always-show="true">
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"editing": {
"alwaysShow": true
}
});
});The text that appears in the show button. This can contain HTML.
'<span class="fooicon fooicon-pencil" aria-hidden="true"></span> Edit rows'
The default button will look like this:
To supply this option through data attributes you must specify the attribute on the table element.
<table data-editing-show-text='<span class="fooicon fooicon-pencil" aria-hidden="true"></span> Edit rows'>
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"editing": {
"showText": '<span class="fooicon fooicon-pencil" aria-hidden="true"></span> Edit rows'
}
});
});The text that appears in the hide button. This can contain HTML.
"Cancel"
The default button will look like this:
To supply this option through data attributes you must specify the attribute on the table element.
<table data-editing-hide-text="Cancel">
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"editing": {
"hideText": "Cancel"
}
});
});The text that appears in the add button. This can contain HTML.
"New row"
The default button will look like this:
To supply this option through data attributes you must specify the attribute on the table element.
<table data-editing-add-text="New row">
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"editing": {
"addText": "New row"
}
});
});The text that appears in the edit button. This can contain HTML.
'<span class="fooicon fooicon-pencil" aria-hidden="true"></span>'
The default button will look like this:
To supply this option through data attributes you must specify the attribute on the table element.
<table data-editing-edit-text='<span class="fooicon fooicon-pencil" aria-hidden="true"></span>'>
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"editing": {
"editText": '<span class="fooicon fooicon-pencil" aria-hidden="true"></span>'
}
});
});The text that appears in the delete button. This can contain HTML.
'<span class="fooicon fooicon-trash" aria-hidden="true"></span>'
The default button will look like this:
To supply this option through data attributes you must specify the attribute on the table element.
<table data-editing-delete-text='<span class="fooicon fooicon-trash" aria-hidden="true"></span>'>
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"editing": {
"deleteText": '<span class="fooicon fooicon-trash" aria-hidden="true"></span>'
}
});
});The options for the editing column.
{
"classes": "footable-editing",
"name": "editing",
"title": "",
"filterable": false,
"sortable": false
}
By default the editing column has no title, is not filterable or sortable, and all cells have the class footable-editing appended to them.
This object can contain any of the available column options from the plugin and it's components.
To supply this option through data attributes you must follow valid JSON syntax including quoted property names.
<table data-editing-column='{"classes":"footable-editing","name":"editing","title":"","filterable":false,"sortable":false}'>
...
</table>The below shows how to supply the value directly through the options.
jQuery(function($){
$('.table').footable({
"editing": {
"column": {
"classes": "footable-editing",
"name": "editing",
"title": "",
"filterable": false,
"sortable": false
}
}
});
});