Create interactive tables with Tabulator

(Image credit: Future)

Tables carry all kinds of advanced visual gimmicks intended to make them look better. Table rendering performance is more important than ever. Generating a few labels on the fly is not a problem, but doing so with complex tables containing images overloads systems.

Tables intended for the web are best generated with the Tabulator framework. Just like all the best web design tools it's designed to streamline your workflow. This JavaScript framework contains an advanced implementation of the virtual document object programming paradigm. This means it only creates a few widgets, which it recycles as the user scrolls through your list.

<html>
    <head>
        <link href="https://unpkg.com/
tabulator-tables@4.3.0/dist/css/tabulator.
min.css" rel="stylesheet">
        <script type="text/javascript"
src="https://unpkg.com/tabulatortables@
4.3.0/dist/js/tabulator.min.js"></
script>
    </head>
<body>
    <div id="example-table"></div>
</body>

</html>

     <div id="example-table"></div>
     <script>
             var tableData = [
             {id:1, name:"A A", age:"24",
gender:"male", height:1, col:"red"},
             {id:2, name:"B B", age:"48",
gender:"female", height:2, col:"blue"},
             ];

            var table = new
Tabulator("#example-table", {
             data:tableData,
             columns:[
             {title:"Name",
field:"name"},
             {title:"Age", field:"age"},
             {title:"Gender",
field:"gender"},
             {title:"Height",
field:"height"},
             {title:"Favourite Color",
field:"col"},
             ],
         });


             </script>
</body>

             var table = new
Tabulator("#example-table", {
             . . .
             rowFormatter:function(row){
                 var data = row.getData();
                 if(data.col == "blue"){
                     row.getElement().
style.backgroundColor = "#A6A6DF";
                 }
                 if(data.col == "red"){
                     row.getElement().
style.backgroundColor = "#A60000";
                 }
             },

    <script>
             var tableData = [
             {id:1, name:”A A”, age:”24”,
gender:”male”, height:1, col:”red”},
             {id:2, name:”B B”, age:”48”,
gender:”female”, height:2, col:”blue”},
             {id:3, name:”B B”, age:”48”,
gender:”female”, height:3, col:”white”},
             {id:4, name:”B B”, age:”48”,
gender:”female”, height:4, col:”green”},
             {id:5, name:”B B”, age:”48”,
gender:”female”, height:5, col:”pink”},
             {id:6, name:”B B”, age:”48”,
gender:”female”, height:6, col:”xxx”},
             ];

var table = new Tabulator("#example-table",
{
cellClick:function(e, cell){

},

{title:"Name", field:"name",
cellClick:function(e, cell){
    //e - the click event object
    //cell - cell component
    },
}

             var table = new
Tabulator("#example-table", {
             cellClick:function(e, cell){
                 console.log(e);
                 console.log(cell);
             },

var table = new Tabulator(“#example-table”,
 {
cellClick:function(e, cell){
    if(cell._cell.value==”A A”){
alert(“Hello, Mr A. A!”);
}
console.log(cell);
},

columns:[
        {title:”Name”, field:”name”},
        {title:”Age”, field:”age”},
        {title:”Gender”, field:”gender”},
        {title:”Height”, field:”height”,
 formatter:”star”},
        {title:”Favourite Color”,
 field:”col”},
    ],

columns:[
        {title:”Name”, field:”name”},
        {title:”Age”, field:”age”},
        {title:”Gender”, field:”gender”},
        {title:”Height”, field:”height”,
 formatter:”star”,
formatterParams:{stars:6}},
        {title:”Favourite Color”,
field:”col”},
    ],

<body>
    <div id=”example-table”></div><br>
    <button onclick=”workThis()”>Apply an
action!</button>
    <script>
        function workThis(){


        }
   </script>
   <script>
           var tableData = [

     <script>
             var tableData = [
             {id:1, name:"A A", age:"24",
gender:"male", height:1, col:"red"},
             . . .
             });

             window.myTable=table;

    </script>

    <script>
         function workThis(){
             window.myTable.
setFilter("height", ">", 3);
         }
   </script>

           var table = new
Tabulator(“#example-table”, {
             data:tableData,
             columns:[
                 {title:”Name”,
field:”name”}
             ],
             height:”350px”,
             layout:”fitColumns”,
             resizableColumns:false,
             rowFormatter:function(row){
                 var element = row.
getElement(),
                 data = row.getData(),
                 width = element.
offsetWidth,
                 rowTable, cellContents;

                 while(element.firstChild)
element.removeChild(element.firstChild);

                  rowTable = document.
createElement("table")
                  rowTable.style.width =
(width - 18) + "px";

                  rowTabletr = document.
createElement("tr");
                  cellContents = "<td>" +
data.id + "</td>";

cellContents += "<td><div><strong>Name:</
strong> " + data.name + "</div></td>"

                  rowTabletr.innerHTML =
cellContents;

                  rowTable.
appendChild(rowTabletr);

                  element.append(rowTable);
             },
        });
        table.setData(tableData);

$(“#add-row”).click(function(){
    table.addRow({});
});

$(“#del-row”).click(function(){
    table.deleteRow(1);
});

$(“#clear”).click(function(){
    table.clearData()
});

$(“#reset”).click(function(){
    table.setData(tabledata);
});

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

TOPICS

Tam Hanna is a software consultant who specialises in the management of carrier and device manufacturer relationships, mobile application distribution and development, design and prototyping of process computers and sensors. He was a regular contributor to Web Designer magazine in previous years, and now occupies his time as the owner of Tamoggemon Software and Computer Software.

Create interactive tables with Tabulator

01. Load the files

02. Generate example data

03. Initiate a code-behind class

04. Analyse the results

05. Change colours during program execution

06. Add example data

07. On cell click event handlers

08. Analyse event parameters

09. Target specific cells

10. Spruce up display

11. Deploy a formatter

12. Set some options

13. Add a button

14. Access the table instance

15. Apply a filter

16. Use various filter operations

17. Create custom lines – I

18. Create custom lines - II

19. Modify data at runtime

20. Target framework elements

21. Learn more

Related articles