JSFiddle - React, Tailwind, and code Playground

by carlbeech

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>E4TESTING</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="flyouttest.css">
    <style>
      .tabulator {
        font-size: 12px;  // change font size
      }
    </style>
</head>
<body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js" integrity="sha256-AlTido85uXPlSyyaZNsjJXeCs07eSv3r43kyCVc8ChI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon/build/global/luxon.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<script...

JavaScript

$("#table").tabulator({
  layout: "fitDataFill",
  height: "311px",
  columns: [{
      title: "Name",
      field: "name"
    },
    {
      title: "Age",
      field: "age"
    },
    {
      title: "Gender",
      field: "gender"
    },
    {
      title: "Height",
      field: "height",
      align: "center"
    },
    {
      title: "Favourite Color",
      field: "col"
    },
    {
      title: "Testing Column",
      field: "test",
      formatter: "html",
      editor: 'input'
    },
  ],
});

var tableData = [{
    id: 1,
    name: "Billy Bob",
    age: "12",
    gender: "male",
    height: 1,
    col: "red",
    test: "Text</br>here</br>Multi-line"
  },
  {
    id: 2,
    name: "Mary May",
    age: "1",
    gender: "female",
    height: 2,
    col: "blue"
  },
  {
    id: 1,
    name: "Billy Bob",
    age: "12",
    gender: "male",
    height: 1,
    col: "red"
  },
  {
    id: 2,
    name: "Mary May",
    age: "1",
    gender: "female",
    height: 2,
    col: "blue"
  },
  {
    id: 1,
    name: "Billy Bob",
    age: "12",
    gender: "male",
    height: 1,
    col: "red",
    test: "Text</br>here</br>Multi-line"
  },
  {
    id: 2,
    name: "Mary May",
    age: "1",
    gender: "female",
    height: 2,
    col: "blue"
  },
]

$("#table").tabulator("setData", tableData);

//Show column normalize height and redraw
$("#showColumn").on("click", function(evt) {
  $("#table").tabulator("showColumn", "test");
  var rows = $("#table").tabulator("getRows");
  for (var row in rows) {

    rows[row].normalizeHeight();
  }
  $("#table").tabulator("redraw");
});

//hide column normalize height and redraw
$("#hideColumn").on("click", function(evt) {
  $("#table").tabulator("hideColumn", "test");
  var rows = $("#table").tabulator("getRows");
  for (var row in rows) {
    rows[row].normalizeHeight();
  }
  $("#table").tabulator("redraw", true);
});

//Once...