<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-add-api" order="1">

<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />

<title>Add rows</title>
<js><![CDATA[

$(document).ready(function() {
	var t = $('#example').DataTable();
	var counter = 1;

	$('#addRow').on( 'click', function () {
		t.row.add( [
			counter +'.1',
			counter +'.2',
			counter +'.3',
			counter +'.4',
			counter +'.5'
		] ).draw( false );

		counter++;
	} );

	// Automatically add a first row of data
	$('#addRow').click();
} );

]]></js>

<info><![CDATA[

New rows can be added to a DataTable using the `dt-api row.add()` API method. Simply call the API function with the data for the new row (be it an array or object). Multiple rows can be added using the `dt-api rows.add()` method (note the plural). Data can likewise be updated with the `dt-api row().data()` and `dt-api row().remove()` methods.

Note that in order to see the new row in the table you must call the `dt-api draw()` method, which is easily done through the chaining that the DataTables API employs.

This example shows a single row being added each time the button below is clicked upon.

The [Editor extension](https://editor.datatables.net/) adds full table editing controls to a DataTable, including creating, editing and deleting rows.

]]></info>

<demo-html>
	<button id="addRow">Add new row</button>
</demo-html>

</dt-example>
