JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    
        <meta name="description" content="description here">
        <meta name="keywords" content="keywords,here">
    
      <!-- <link href="/dist/css/tabulator_simple.min.css" rel="stylesheet"> -->
      <link href="/dist/css/bootstrap/tabulator_bootstrap4.min.css" rel="stylesheet">
    
      <link rel="stylesheet" href="styles.css" type="text/css">
      <link rel="stylesheet" href="KMStyles.css" type="text/css">
    
      <link href="https://unpkg.com/tabulator-tables@4.1.5/dist/css/tabulator.min.css" rel="stylesheet">
    
      <script 
        type="text/javascript" 
        src="SiteAssets/scripts/getListItems.js"></script>
      
    
      <script 
        src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
    
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    
      <script 
        type="text/javascript" src="https://unpkg.com/tabulator-tables@4.1.5/dist/js/tabulator.min.js"></script>
    
    <!------------------------------->
    
    <script   
      src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.6.2/core.min.js"></script>
    
      </head>
    
      <body>
    
        <script src="./bundle.js"></script>
    
        <div class="km-div-container">
    
          <div class="col-md-2"></div> <!-- Left -->
             
          <div class="col-md-3" id="middle-id"></div> <!-- Middle --> 
    
          <div class="col-md-7"> <!-- Right -->
            <table id="km-table-id" class="table table-striped...

JavaScript

import $ from 'jquery';
    
    import JSONfile from '../../../public/JSONfile.json';
    import { basename } from 'path';
    
    var Tabulator = require('tabulator-tables');
    
    var categories = '';
    var tableRes = '';



    export default class {
        constructor() {
            this.loadData();
            this.loadTableData();
        }

    loadTableData() {
        let tableRes = JSONfile.d.results.filter(function(val) { 
          return (val.FileLeafRef.trim().length > 0);
        }).map(function(obj) {
    
          return {
            // "FileName": obj.FileLeafRef,
            "Path": obj.EncodedAbsUrl,
            "Titles": obj.File.Name
            }
          });
    
    
    
    ///// Tabulator Section /////
    
          let tableData = tableRes;
    
          let table = new Tabulator("#km-table-id", {
            data:tableData,
            columns:[
              {title:"", field:"&nbsp;"},
              {title:"All Templates", field:"Name"},
              {title:"My Favorites", field:"faves"}
            ],
            pagination:"local",
            paginationSize:100,
            placeholder:"No data available"
          });
    
          table.setData(tableData);

      } // ------------------ loadTableData
    
       
    } // ------------- export default class