Built-in buttons

The Buttons framework is useful if you wish to define custom buttons, or use those included in another extension such as Editor, but its utility is greatly enhanced by the button types that are included as part of the library.

Buttons has a wide range of button types built in to the library (the full list can be seen here), and they can broadly be broken down into the following groups:

• File export
• Print
• Column visibility
• Table control

File export

When displaying data in a DataTable, it can often be useful to your end users for them to have the ability to obtain the data from the DataTable, extracting it into a file for them to use locally.

There are four buttons types available for data export to a file:

• copyHtml5 - Displays a dialogue asking the user to use their browser's copy command (HTML5 does not have a copy to clipboard API)
• csvHtml5 - Create and save an CSV file
• excelHtml5 - Create and save an Excel XLSX file - this requires JSZip. Note - this will not work in Safari.
• pdfHtml5 - Create and save a PDF document - this requires PDFMake and a suitable font file.

Print

Another common way to extract data from a table is to print it. The print button type provides this ability by opening a new window in the user's browser, drawing a table with a copy of the data from the original table.

It then, by default, will automatically trigger the browser's print function allowing the end user to print the table. The window will be closed once the print is complete, or has been cancelled.

Column visibility

While the buttons described above focus on extracting data from the table, the column visibility buttons instead control the display of the table. They provide buttons that can be used to toggle the visibility of individual columns, groups of columns or explicitly set the visibility of columns.

The most commonly used of the available buttons is the colvis type. This displays a collection button with a list of all of the columns in the table (this can be customised) with the ability of the end user to toggle the visibility of the columns with a simple click.

Table control

Buttons also has the following button types built in, which can be used to control the table:

• colOrder - Provide column ordering control in a dropdown
• columnOrder - Column ordering control for a specific column
• pageLength - Control the table's page length

As noted above, please refer to the reference documentation for the full list of button types available.