JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Do not add `link` tags unless you know what you are doing -->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.2/css/select.dataTables.min.css"/>

    <!-- Do not add `script` tags unless you know what you are doing -->
    <script src="public/vendor.js" type="text/javascript" charset="utf-8" defer></script>
    <script src="public/application.js" type="text/javascript" charset="utf-8" defer></script>
    <!-- <script type="text/javascript" src="DataTables/datatables.min.js"></script> -->
  </head>
  <body class="container-fluid">
    <!-- Title row -->
    <div id='app-title' class='row app-title col-xs-12'>
    </div>

    <!-- Log-in & register forms -->
    <div id='authn' class='row authn col-xs-12'>
    </div>

    <!-- Announcements -->
    <div id='announcement' class='row announcement col-xs-offset-2 col-xs-10'>
    </div>
    <table id="example" class="display dataTable" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr id="1">
                <td>fjhgfjh></td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr id="2">
                <td>Garrett...

JavaScript

'use strict'

const authnDispatchUI = require('./authn-dispatch-ui')
const config = require('./config')
const setAPIOrigin = require('../../lib/set-api-origin')
const store = require('./store')
const User = require('./user')

require('datatables.net-bs')
require('datatables.net-buttons')
require('datatables.net-select')

require('./dataTables.editor.js')

$(() => {
  setAPIOrigin(location, config)
  // Instantiate a new User in store.
  store.user = new User(false)
  // Insert application heading (done after the basic DOM loads to avoid
  //    jumping around on the screen at page load.
  $('#app-title').html('<h1>Achieve Your Bucket List</h1>')
  // Load initial page content: matrix form & login/register buttons
  authnDispatchUI.initUI()
  // other UI inits go here

  const editor = new $.fn.dataTable.Editor({
    table: '#example',
    fields: [{
      label: "Name:",
      name: "name"
    }, {
      label: "Position:",
      name: "position"
    }, {
      label: "Office:",
      name: "office"
    }, {
      label: "Age:",
      name: "age"
    }, {
      label: "Date:",
      name: "date",
      type: "datetime"
    }, {
      label: "Salary:",
      name: "salary"
    }]
  })

  $('#example').DataTable({
    select: true,
    dom: 'Bfrtip',
    buttons: [{
        extend: 'create',
        editor: editor
      },
      {
        extend: 'edit',
        editor: editor
      },
      {
        extend: 'remove',
        editor: editor
      }
    ],
    columns: [{
        data: "name"
      },
      {
        data: "position"
      },
      {
        data: "office"
      },
      {
        data: "age"
      },
      {
        data: "date"
      },
      {
        data: "salary",
        render: $.fn.dataTable.render.number(',', '.', 0, '$')
      }
    ]
  })
})