Buttons

When working with a complex DataTable it is not uncommon to wish to present options that the end user can activate to effect the table, or the data contained within the table in some manner. Displaying buttons that can be clicked, tapped or accessed with keys with one method of doing this and the Buttons extension provides exactly that ability.

The various DataTables extensions provide buttons that can be used to access the functionality of that extension, Editor for example provides add, edit and delete buttons for a table. The buttons that are available are documented here. Furthermore, custom buttons can also be created to perform actions that are specific to your use case.

Buttons can be used through the buttons configuration object with dom used to specify where the buttons should be placed:

$('#myTable').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'colvis',
        'excel',
        'print'
    ]
} );

For further information about Buttons custom events, please refer to the Buttons extension documentation. Please note that DataTables core does not itself provide any buttons and the Buttons extension must be loaded in order to be able to use the buttons from the extensions.

Library Name Summary
Buttons

collection

A button which triggers a drop down with another set of buttons

Buttons

columnsToggle

A set of Buttons to toggle the visibility of individual columns

Buttons

columnsVisibility

A set of Buttons to set the visibility of individual columns

Buttons

columnToggle

A single button that will toggle the visibility of one or more columns

Buttons

columnVisibility

A single button that controls the visibility of one or more columns

Buttons

colvis

A button collection that provides column visibility control

Buttons

colvisGroup

Show and hide multiple columns

Buttons

colvisRestore

Restore the visibility of column to their original state

Buttons

copy

Copy table data to clipboard button

Buttons

copyFlash

Click to copy table data to clipboard button (Adobe Flash - deprecated)

Buttons

copyHtml5

Copy table data to clipboard button (HTML)

Buttons

csv

Create and save a CSV file that contains the data from the table

Buttons

csvFlash

Create and save a CSV file that contains the data from the table (Adobe Flash - deprecated)

Buttons

csvHtml5

Create and save a CSV file that contains the data from the table (HTML5)

Buttons

excel

Create and save an Excel CSV file that contains the data from the table

Buttons

excelFlash

Create and save an Excel XLSX file that contains the data from the table (Adobe Flash - deprecated)

Buttons

excelHtml5

Create and save an Excel XLSX file that contains the data from the table (HTML5)

Buttons

pageLength

Button collection that will control the DataTables' page length

Buttons

pdf

Create and save a PDF file that contains the data from the table

Buttons

pdfFlash

Create and save a PDF file that contains the data from the table (Adobe Flash - deprecated)

Buttons

pdfHtml5

Create and save a PDF file that contains the data from the table (HTML5)

Buttons

print

Button show a printable view of the table's data

Editor

create

A button that will create a new row using Editor

Editor

edit

A button that will edit one or more existing rows using Editor

Editor

editSingle

A button that will edit an existing row using Editor

Editor

remove

A button that will delete one or more rows using Editor

Editor

removeSingle

A button that will delete a single row using Editor

Select

selectAll

Select all items in the table based on the current item select mode

Select

selectCells

Change the item selection mode to cell.

Select

selectColumns

Change the item selection mode to column.

Select

selected

Button that is enabled when one or more items are selected in the table

Select

selectedSingle

Button that is enabled when a single item is selected in the table

Select

selectNone

Deselect all selected items in the table.

Select

selectRows

Change the item selection mode to row.