Datatables Copy Button Bug Demo

by shellj

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-3.7.0/dt-2.2.2/b-3.2.2/b-html5-3.2.2/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/jq-3.7.0/dt-2.2.2/b-3.2.2/b-html5-3.2.2/datatables.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Table</title>    
</head>
<body>
<button id='show'>Show Modal</button>
<dialog>
<button id='close'>Close Modal</button><span class='red'>Click Copy first, then click this.</span>
    <h1>Sample Data Table</h1>
    <table id='myTable'>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>John Doe</td>
                <td>30</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jane Smith</td>
                <td>25</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Michael Johnson</td>
                <td>35</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>1</td>
                <td>John Doe</td>
                <td>30</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jane Smith</td>
                <td>25</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Michael Johnson</td>
                <td>35</td>
                <td>[email protected]</td>
            </tr>
            <tr>
                <td>1</td>
                <td>John Doe</td>
                <td>30</td>
               ...

CSS

.red {
  color: red;
}

JavaScript

let table = new DataTable('#myTable', {
	paging: true,  
  scrollY: '',
  info: false,                
  language: { 
  	search: "Search",
  	searchPlaceholder: 'Search',
  },
  layout: {
        topStart: {
            buttons: [
                'copy', 'excel', 'pdf'
            ],
            
        },
        topEnd: {}
    },
});

let openButton = document.querySelector('#show');
let closeButton = document.querySelector('#close');
let dialog = document.querySelector('dialog');
openButton.addEventListener("click", () => {
  dialog.showModal();
});
closeButton.addEventListener("click", () => {
  dialog.close();
});