JSFiddle - React, Tailwind, and code Playground

by Dominic Myers

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.0/css/responsive.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.12/dataRender/ellipsis.js"></script>
<script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment-with-locales.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.2/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.20/pdfmake.min.js"></script>
      <title>Planning</title>

   ...

JavaScript

$(document).ready( function () {
        var jsonData = {
                  "sfr_dispo": [
                    {
                      "Ticket_RT": 123456,
                      "Commentaire_ISP": "the comment"
                    },
                    {
                      "Ticket_RT": 876543,
                      "Commentaire_ISP": "other comment"
                    }
                  ]
        }; // get the json object array from php

        // console.log(jsonData);

        var buttonCommon = { // set default export column 0 (first column)
                exportOptions: {
                    columns:[0]
                }
            };

        var options = { // set options for tables
              responsive: true,
              bAutoWidth: true,
              dom: '<"top"lf>Bt<"bottom"pi><"clear">',
              scrollY: 400,
              scrollCollapse: true,
              jQueryUI: true,
              bProcessing: true,
              sScrollX: "70%",
              sScrollXInner: "100%",
              bScrollCollapse: true,
              bDestroy: true,
              searching: false,
              iDisplayLength: 25,
              buttons: [
                  $.extend( true, {}, buttonCommon, {
                    header: false,
                    extend: 'copyHtml5'
                  }),
                  'excelHtml5', 'csvHtml5', 'pdfHtml5',
                  {
                    text: 'Delete',
                    action: function ( e, dt, node, config ) { // function to delete selected rows on click button
                        dt.data().rows('.selected').remove().draw( false );
                    }
                  }
              ],
              language: {
                  url: "https://cdn.datatables.net/plug-ins/1.10.12/i18n/French.json",
                  buttons: {
                      copy: 'Copy',
                      copyTitle: 'Ajouté au presse-papiers',
                      copyKeys: 'Appuyez sur <i>ctrl</i> ou...