JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sample"></div>

<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>

JavaScript

var headerMenu = function () {
  var menu = [];
  var columns = this.getColumns();

  var i = 0;
  for (let column of columns) {
    let title = column.getDefinition().title;
    let field = column.getDefinition().field;

    menu.push({
      label: function () {
        let checkboxChar = column.isVisible() ? "☑ " : "□ ";
        return checkboxChar + title;
      },
      action: function (e) {
        column.toggle();
      }
    });
  }
  return menu;
};

var tableColumns = [
  { title: "A", field: "A", frozen: true, width: "130", headerMenu: headerMenu },
  { title: "B", field: "B", frozen: true, width: "130", headerMenu: headerMenu },
  { title: "C", field: "C", frozen: true, width: "130", headerMenu: headerMenu },
  { title: "D", field: "D", frozen: true, width: "130", headerMenu: headerMenu },
  { title: "E", field: "E", width: "130", headerMenu: headerMenu },
  { title: "F", field: "F", width: "130", headerMenu: headerMenu },
  { title: "G", field: "G", width: "130", headerMenu: headerMenu },
  { title: "H", field: "H", width: "130", headerMenu: headerMenu }
];

var tabledata = [
	{"A" : "A", "B" : "B", "C" : "C", "D" : "D", "E" : "E", "F" : "F", "G" : "G", "H" : "H"},
  {"A" : "A", "B" : "B", "C" : "C", "D" : "D", "E" : "E", "F" : "F", "G" : "G", "H" : "H"},
  {"A" : "A", "B" : "B", "C" : "C", "D" : "D", "E" : "E", "F" : "F", "G" : "G", "H" : "H"},
  {"A" : "A", "B" : "B", "C" : "C", "D" : "D", "E" : "E", "F" : "F", "G" : "G", "H" : "H"},
 	{"A" : "A", "B" : "B", "C" : "C", "D" : "D", "E" : "E", "F" : "F", "G" : "G", "H" : "H"}
]

var table = new Tabulator("#sample", {
  data: tabledata,
  columns: tableColumns,
  /* autoResize: true,
  frozenRows:1 */
});

table.on("renderComplete", function(){
  $(".tabulator-header-popup-button").on("click", function(){
    $(".tabulator-menu.tabulator-popup-container")
      .css("height", "150px")
      .css("overflow-y", "scroll")
      .css("top", "10px");
  });
});