'Tabulator & Split.js: Is there a layout setting to make Tabulator work with Split.js

I have created a Pen which integrates Tabulator & Split.js.

https://codepen.io/LondonWebFactory/pen/jOZPzYJ

I'm happy with the horizontal behaviour but I would like:

  1. The table to be bound to the top, right, bottom and left of the top pane
  2. Grow and shrink with the splitter

What is the best way to achieve this?

Here is my code:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.2.3/css/tabulator.min.css"/>

<style>
    .gutter {
        background-color: #eee;
        background-repeat: no-repeat;
        background-position: 50%;
    }
    .gutter.gutter-vertical {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
        cursor: row-resize;
    }
</style>


</head>

<body>

<div class="split" style="height: 100vh;">
    <div id="split-0">
        <div id="example-table"></div>
    </div>
    <div id="split-1">What is the best way to make Tabulator grow and shrink with the splitter? </div>
</div>

<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.0/split.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.2.3/js/tabulator.min.js"></script>

<script>

    var tableData = [
        { "id": 1, "name": "Oli Bob", "location": "United Kingdom", "gender": "male", "rating": 1, "col": "red" },
        { "id": 2, "name": "Mary May", "location": "Germany", "gender": "female", "rating": 2, "col": "blue" },
        { "id": 3, "name": "Christine Lobowski", "location": "France", "gender": "female", "rating": 0, "col": "green" },
        { "id": 4, "name": "Brendon Philips", "location": "USA", "gender": "male", "rating": 1, "col": "orange" },
        { "id": 5, "name": "Margret Marmajuke", "location": "Canada", "gender": "female", "rating": 5, "col": "yellow" },
        { "id": 6, "name": "Frank Harbours", "location": "Russia", "gender": "male", "rating": 4, "col": "red" },
        { "id": 7, "name": "Jamie Newhart", "location": "India", "gender": "male", "rating": 3, "col": "green" },
        { "id": 8, "name": "Gemma Jane", "location": "China", "gender": "female", "rating": 0, "col": "red" },
        { "id": 9, "name": "Emily Sykes", "location": "South Korea", "gender": "female", "rating": 1, "col": "maroon" },
        { "id": 10, "name": "James Newman", "location": "Japan", "gender": "male", "rating": 5, "col": "red" }
    ]

    window.addEventListener('load', (e) => {

        Split(['#split-0', '#split-1'], {
            direction: 'vertical',
            minSize: 0,
            gutterSize: 12,
        })

        var table = new Tabulator("#example-table", {
            // height: "311px",
            data: tableData,
            columns: [
                { title: "Name", field: "name" },
                { title: "Location", field: "location" },
                { title: "Gender", field: "gender" },
                { title: "Rating", field: "rating", hozAlign: "center" },
                { title: "Favourite Color", field: "col" },
            ],
        });
    });

</script>


</body>

</html>
javascriptcsstabulatorsplit.js


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions