JSFiddle - React, Tailwind, and code Playground

by CloudTables

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="img/favicon.ico" title="Favicon" />
    <title>
      Arctic Military Activity Tracker | CSIS Europe, Russia, Eurasia Program
    </title>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />

    <!--DataTables.net css-->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.datatables.net/v/dt/dt-1.10.20/r-2.2.3/datatables.min.css"
    />

    <!--FontAwesome-->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css"
    />

    <script src="https://unpkg.com/[email protected]/dist/polyfill.js"></script>

  </head>

  <body>

    <!-- Table -->
    <div class="table-container">
      <table cellspacing="5" cellpadding="5" class="date-filter">
        <tbody>
          <td>
            From: <input type="date" id="max" name="datechk" class="datechk" />
          </td>
          <td>
            To: <input type="date" id="min" name="datechk" class="datechk" />
          </td>
        </tbody>
      </table>
      <table id="table" class="display">
        <tfoot>
          <tr>
            <td colspan="6"></td>
          </tr>
        </tfoot>
      </table>
    </div>

    <!--JQuery CDN from Google Hosted Libraries-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!--DataTables.net library-->
    <script
      type="text/javascript"
      src="https://cdn.datatables.net/v/dt/dt-1.10.20/r-2.2.3/datatables.min.js"
    ></script>

    <!--Import PapaParse to use for reading Google spreadsheet-->
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js"
    ></script>
  </body>
</html>

JavaScript

let dateFilter = { min: null, max: null };
/* Custom filtering function which will search data in column 1 between two values */
$.fn.dataTable.ext.search.push(function (settings, data, dataIndex, rowData) {
  const date = new Date(rowData.Date);
  const min = dateFilter.min;
  const max = dateFilter.max;
  if (
    (!min && !max) ||
    (!min && date <= max) ||
    (min <= date && !max) ||
    (min <= date && date <= max)
  ) {
    return true;
  }
  return false;
});

/*Use Papa.parse and Datatables to read Google Spreadsheet*/

var publicSpreadsheetUrl =
  "https://docs.google.com/spreadsheets/d/e/2PACX-1vS-2xZhfNz9V1RSsfBXHjp8RZoBuYYPgmQCW7Tybbrq0b6IPtfxINjzNklJQVfUNic9SvAurQgkAZj3/pub?output=csv";

/*init() and showInfo() are from Papa.parse, with the addition of displayInfo to use Datatables*/
function init() {
  Papa.parse(publicSpreadsheetUrl, {
    download: true,
    header: true,
    complete: function (results) {
      var data = results.data;
      data.forEach(d => {
        // console.log(d)
        const date = new Date(d.Date)
        d.date = {
          display: d.Date + `${d.EndDate ? ` - ${d.EndDate}` : ""}`,
          sort: (date.getTime()),
        }
      })
      console.log(data)
      displayInfo(data);
    },
  });
}

/*function to use Datatables to display data */
function displayInfo(dataset) {
  var table = $("#table").DataTable({
    // adding id to rows
    createdRow: function (row, dataset, data) {
      $(row).attr("id", `${data + 1}`);
    },

    dom:
      "<'row'<'col-md-12'Bf>>" +
      "<'row'<'col-md-12't>>" +
      "<'row table-footer'<'col-md-6'l><'col-md-6'ip>>",
    responsive: true,
    data: dataset,
    columns: [
      {
        title: "Date",
        data: "date",
        // data: {
        //   _:    "date.display",
        //   sort: "date.sort"
        // },
        render: {
          _: "display",
          filter: "sort",
          type: "sort",
          sort: "sort",
          display: "display"
       ...