DataTables: How to add Copy, Excel, PDF and CSV export buttons
Besides the basic features of DataTables (sorting, search, and paging), the plugin has several other advanced features that make it even more popular.
Among them is exporting the table data which provides users with the flexibility to analyze, share, and present tabular data in different formats.
In this article, we will explore how to implement the export functionality by adding the Copy, Excel, PDF, and CSV export buttons to the DataTables a pure HTML and Bootstrap page. We will also cover how to customize the buttons to your own look and feel.
Understanding Exporting
Exporting refers to the process of saving table data in a format that can be utilized outside the web application. By exporting data, you create files that can be easily shared, printed, or imported into other software applications.
DataTables provides built-in functionality to generate export files in popular formats like Excel, PDF, and CSV. Additionally, the Copy feature allows users to copy table data to the clipboard for pasting into other applications.
Adding Export Buttons to DataTables
To add the Copy, Excel, PDF, and CSV export buttons to your DataTables table, follow the steps outlined below:
Step 1: Include Required Dependencies
In addition to the basic steps for DataTables installation, you will need to include these additional dependencies in your page for the export buttons.
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
<!-- JavaScript -->
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
Step 2: Initialize DataTables with Export Buttons
Next, initialize DataTables on your HTML table with the buttons and dom options within the initialization.
<script>
$(document).ready(function() {
$('#userTable').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf', 'csv'
]
});
});
</script>
The buttons option specifies which export buttons you want to include while the dom option defines the table control elements to appear on the page and in what order. Below is what "Bfrtip" stands for.
| B | Buttons |
| f | filtering input |
| r | processing display element |
| t | The table |
| i | Table information summary |
| p | pagination control |
Alternatively, you can specify the button as below in the DataTables initialization.
<script>
$(document).ready(function() {
$('#tableID').DataTable({
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
});
});
</script>
Below is a full-page working code with a DataTable with export buttons.
<!DOCTYPE html>
<html>
<head>
<title>DataTables Export Buttons</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
<style>
section{
width: 70%;
margin: 30px auto;
}
#employees th, #employees td{
border: 1px solid #ccc;
text-align: left;
}
#employees thead {
background: #f2f2f2;
}
</style>
</head>
<body>
<section>
<table id="employees">
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abby Sharma</td>
<td>Chief Executive Officer</td>
<td>25</td>
</tr>
<tr>
<td>Farhan Qureshi</td>
<td>Chief Technology Officer</td>
<td>31</td>
</tr>
<tr>
<td>James Bond</td>
<td>Sales Manager</td>
<td>32</td>
</tr>
<tr>
<td>John Doe</td>
<td>Software Developer</td>
<td>30</td>
</tr>
<tr>
<td>Morgana Pendragon</td>
<td>Web Developer</td>
<td>27</td>
</tr>
<tr>
<td>Raju Rastogi</td>
<td>Software Tester</td>
<td>26</td>
</tr>
</tbody>
</table>
</section>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script>
$(document).ready(function() {
$('#employees').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf', 'csv'
]
});
});
</script>
</body>
</html>
Below is a fully working code for a Bootstrap page with a DataTable and export buttons.
Alternatively, you can specify the button as below in the DataTables initialization.
<!DOCTYPE html>
<html>
<head>
<title>Export Buttons in DataTables - Bootstrap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
<style>
body {
padding: 30px 10px;
}
#userTable thead th{
color: #fff;
background: #6388aa;
}
</style>
</head>
<body>
<div class="offset-md-2 col-md-8">
<table class="table table-bordered table-striped" id="userTable" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abby Sharma</td>
<td>Chief Executive Officer</td>
<td>25</td>
</tr>
<tr>
<td>Farhan Qureshi</td>
<td>Chief Technology Officer</td>
<td>31</td>
</tr>
<tr>
<td>James Bond</td>
<td>Sales Manager</td>
<td>32</td>
</tr>
<tr>
<td>John Doe</td>
<td>Software Developer</td>
<td>30</td>
</tr>
<tr>
<td>Morgana Pendragon</td>
<td>Web Developer</td>
<td>27</td>
</tr>
<tr>
<td>Raju Rastogi</td>
<td>Software Tester</td>
<td>26</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script>
$(document).ready(function() {
$('#userTable').DataTable({
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
});
});
</script>
</body>
</html>
Below is the table from the above code:
| Name | Designation | Age |
|---|---|---|
| Abby Sharma | Chief Executive Officer | 25 |
| Farhan Qureshi | Chief Technology Officer | 31 |
| James Bond | Sales Manager | 32 |
| John Doe | Software Developer | 30 |
| Morgana Pendragon | Web Developer | 27 |
| Raju Rastogi | Software Tester | 26 |
Customizing the DataTables Export Buttons
As you may notice, the default DataTables export buttons look very basic. If you would want to customize their display text and design (eg color, background, size, etc), then below is how to do it.
We will use a combination of FontAwesome icons and text on buttons and change the button size, background, and text color.
First, we include the FontAwesome library on our page in order to use its icons.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
Then we change the DataTables initialization button options to be as below:
$(document).ready(function() {
$('#employees').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'copy',
text: '<i> class="fas fa-copy"></i> Copy',
className: 'btn-export'
},
{
extend: 'csv',
text: '<i> class="fas fa-file-csv"></i> CSV',
className: 'btn-export'
},
{
extend: 'excel',
text: '<i> class="fas fa-file-excel"></i> Excel',
className: 'btn-export'
},
{
extend: 'pdf',
text:'<i> class="fas fa-file-pdf"></i> PDF',
className: 'btn-export'
}
]
});
});
In the above code, we have used the extend property to define the various export buttons, the text property to customize the display text (we added a Font Awesome icon <i> to each button), and the className property to assign a class to the buttons which will be used as a selector for our custom CSS for styling.
Below is a sample CSS code for styling the buttons using their class name "btn-export":
<style>
.btn-export {
background: green !important;
border: none !important;
color: #fff !important;
font-size: 14px !important;
padding: 2px 5px !important;
}
</style>
Failure to use "!important", the code may not work so it is necessary to have it.
Below is a table with the customized buttons using the above code:
| Name | Designation | Age |
|---|---|---|
| Abby Sharma | Chief Executive Officer | 25 |
| Farhan Qureshi | Chief Technology Officer | 31 |
| James Bond | Sales Manager | 32 |
| John Doe | Software Developer | 30 |
| Morgana Pendragon | Web Developer | 27 |
| Raju Rastogi | Software Tester | 26 |
That's it!
Now you know how to add and customize export buttons in DataTables.
