Tabulator

by carlbeech

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.5.3/js/tabulator.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.5.3/css/tabulator.min.css">
<!-- Trigger Button -->
<button id="toggle-btn" type="button">Open Panel</button>
<!-- Flyout Panel -->
<div id="flyout-panel" class="flyout-panel">
<button id="close-btn" type="button">&times; Close</button>
<div class="panel-content">;
Panel Content.
</div>
</div>

<div id="table">

</div>



<script>
$(document).ready(function() {
    
    // Open panel when trigger button is clicked
    $('#toggle-btn').on('click', function() {
        $('#flyout-panel').addClass('active');
        console.log("Floyout active2");
    });

    // Close panel when close button is clicked
    $('#close-btn').on('click', function() {
        $('#flyout-panel').removeClass('active');
    });

    // Optional: Close panel when clicking anywhere outside of it
    $(document).on('click', function(event) {
        // If the click happened outside the panel and outside the trigger button
        if (!$(event.target).closest('#flyout-panel, #toggle-btn').length) {
            $('#flyout-panel').removeClass('active');
        }
    });
});
</script>

CSS

body {
    overflow-x: hidden;
    font-family: sans-serif;
    margin: 0;
    padding: 20px;
}

/* Base Flyout Panel Styles */
.flyout-panel {
    position: fixed;
    top: 0;
    right: 0; /* Positions panel on the right side */
    width: 50vw;
    height: 100vh;
    background-color: #111;
    color: #fff;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
    padding: 20px;
    box-sizing: border-box;
    
    /* Hide the panel completely to the right */
    transform: translateX(100%); 
    
    /* Hardware accelerated smooth animation transition */
    transition: transform 0.3s ease-in-out; 
    z-index: 1000;
}

/* Modifier class to fly out the panel */
.flyout-panel.active {
    transform: translateX(0);
}

/* Close Button Styling */
#close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    float: right;
}

.panel-content {
    margin-top: 50px;
}

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'
    },
  ],
    rowClick: function(e, row) {
        // Access row data using row.getData()
        console.log("Row clicked:", row.getData().name);
        $('#flyout-panel').addClass('active');
        console.log("Finished row click")
    },
});

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);

$("#table").on("rowClick", function(e, row){
    console.log("Row data:", row.getData());
});