tabulator-tables

import { Tabulator } from 'tabulator-tables'; import 'tabulator-tables/dist/css/tabulator.min.css'; // Ensure the DOM is loaded before initializing Tabulator document.addEventListener('DOMContentLoaded', () => { const tableElement = document.createElement('div'); tableElement.id = 'example-table'; document.body.appendChild(tableElement); // Sample data for the table const tableData = [ {id:1, name:"Oli Bob", age:"12", col:"red", dob:""}, {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"}, {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"}, {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"}, {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"} ]; // Initialize Tabulator on the created div element const table = new Tabulator("#example-table", { height:"310px", // Set table height, enables Virtual DOM for large datasets data:tableData, // Assign data to the table layout:"fitColumns", // Fit columns to the width of the table columns:[ // Define table columns with titles, fields, and optional formatters/sorters {title:"Name", field:"name", width:150}, {title:"Age", field:"age", hozAlign:"left", formatter:"progress"}, {title:"Favorite Color", field:"col"}, {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"} ], }); // Example: Dynamically add a new row to the table const addButton = document.createElement('button'); addButton.textContent = 'Add New Row'; addButton.id = 'add-row'; document.body.appendChild(addButton); addButton.addEventListener('click', () => { table.addRow({id: tableData.length + 1, name: `User ${tableData.length + 1}`, age: Math.floor(Math.random() * 50) + 20, col: "purple", dob: ""}); }); });