<div class="col-md-12">
            <div id="tabulator-root">
            </div>
         </div>


        
        

                
                    <script>
    // Generate 50 random data entries
    var sampleData = [];
    for (var i = 1; i <= 50; i++) {
        var children = [];

        // EVERY ROW WILL HAVE CHILD DATA
        for (var j = 1; j <= 2; j++) {
            children.push({
                id: i * 100 + j,
                name: "Child " + j + " of Sales " + i,
                empCode: "C" + j + "-" + i,
                employeeType: "Dependent",
                department: "Family",
                jobTitle: "N/A",
                age: Math.floor(Math.random() * 10) + 1,
                gender: Math.random() > 0.5 ? "Male" : "Female",
                height: Math.floor(Math.random() * 50) + 50,
                dob: "01/01/201" + Math.floor(Math.random() * 9)
            });
        }

        sampleData.push({
            id: i,
            name: "Customer " + i,
            empCode: (1000 + i).toString(),
            employeeType: i % 3 === 0 ? "Contract" : "Permanent",
            department: i % 5 === 0 ? "IT" : (i % 3 == 0 ? "HR" : "Operations"),
            jobTitle: "Employee",
            age: Math.floor(Math.random() * 40) + 20,
            gender: Math.random() > 0.5 ? "Male" : "Female",
            height: Math.floor(Math.random() * 50) + 150,
            dob: "01/01/19" + (Math.floor(Math.random() * 40) + 60),
            _children: children
        });
    }

    let tblconfig = {
        height: "500px",
        layout: "fitColumns",
        placeholder: "No Data Available",
        data: sampleData,
        selectableRows: true,

        persistenceID: "gt-framework-tabulator-demo",
        persistence: {
            columns: true,
        },

        pagination: "local",
        paginationSize: 10,
        paginationSizeSelector: [10, 20, 50, 100],

        columns: [
            { formatter: "rowSelection", titleFormatter: "rowSelection", hozAlign: "center", headerSort: false },
            { title: "Name", field: "name", width: 200, editor: "input" },
            { title: "Employee Code", field: "empCode", hozAlign: "center", editor: "input" },
            { title: "Employee Type", field: "employeeType", hozAlign: "center", editor: "input" },
            { title: "Department", field: "department", editor: "input" },
            { title: "Job Title", field: "jobTitle", editor: "input" },
            { title: "Age", field: "age", hozAlign: "right", editor: "input" },
            { title: "Gender", field: "gender", editor: "input" },
            { title: "Height", field: "height", hozAlign: "center", editor: "input", visible: false },
            { title: "Date of Birth", field: "dob", hozAlign: "center", sorter: "date", visible: false }
        ],
    };

    var table = initTabulator('#tabulator-root', null, tblconfig);
</script>