Editing

Enable row editing for the table.

The editing component is the first step to providing a simple but effective row editing interface.

Notes

  • This component requires you to create your own method for editing a rows data, it simply exposes methods and events to make interacting with FooTable simpler.
  • See the Getting started - Examples section for examples of this component.

 Options

The below lists all the options for the editing component, these are available in addition to the core options.

General options

 

enabled boolean

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
		}
	});
});
 

pageToNew boolean

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
		}
	});
});
 

position string

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"
		}
	});
});
 

alwaysShow boolean

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
		}
	});
});
 

allowAdd boolean

Whether or not the add button is displayed.

true

By default the add button is displayed.

To supply this option through data attributes you must specify the attribute on the table element.

<table data-editing-allow-add="true">
	...
</table>

The below shows how to supply the value directly through the options.

jQuery(function($){
	$('.table').footable({
		"editing": {
			"allowAdd": true
		}
	});
});
 

allowEdit boolean

Whether or not the edit button is displayed.

true

By default the edit button is displayed.

To supply this option through data attributes you must specify the attribute on the table element.

<table data-editing-allow-edit="true">
	...
</table>

The below shows how to supply the value directly through the options.

jQuery(function($){
	$('.table').footable({
		"editing": {
			"allowEdit": true
		}
	});
});
 

allowDelete boolean

Whether or not the delete button is displayed.

true

By default the delete button is displayed.

To supply this option through data attributes you must specify the attribute on the table element.

<table data-editing-allow-delete="true">
	...
</table>

The below shows how to supply the value directly through the options.

jQuery(function($){
	$('.table').footable({
		"editing": {
			"allowDelete": true
		}
	});
});
 

allowView boolean

Whether or not the view button is displayed.

false

By default the view button is not displayed.

To supply this option through data attributes you must specify the attribute on the table element.

<table data-editing-allow-view="true">
	...
</table>

The below shows how to supply the value directly through the options.

jQuery(function($){
	$('.table').footable({
		"editing": {
			"allowView": true
		}
	});
});
 

showText string

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'
		}
	});
});
 

hideText string

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"
		}
	});
});
 

addText string

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"
		}
	});
});
 

editText string

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>'
		}
	});
});
 

deleteText string

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>'
		}
	});
});
 

column object

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
			}
		}
	});
});