CODEWITHSUNDEEP
tabulator
Aris
Aris

Reputation: 13

Am I missing how add buttons properly?

I am currently working on building a new table with the functionality of adding and deleting rows. I see in the documentation of 4.0 how to add these buttons. I am able to make the buttons show up, however the functionality behind them are not there.

Any help or being pointed in the right direction with this issue would be wonderful. Thank you in advance. 

<head>
        <link href="dist/css/tabulator.css" rel="stylesheet">
        <link rel="stylesheet" href="landing_css.css">
    <meta charset="ISO-8859-1">
    </head>
    <body>
        <div id="example-table"></div>
        <div id="tabulator-controls">
            <button name="add-row">
                + Add Row
            </button>
        </div>
        <script type="text/javascript" src="dist/js/tabulator.js"></script>
        <script type="text/javascript">
            var table = new Tabulator("#example-table", {
                height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
                //data:tabledata,         //assign data to table
                layout:"fitColumns",      //fit columns to width of table (optional)
                responsiveLayout:"hide",  //hide columns that dont fit on the table
                tooltips:true,            //show tool tips on cells
                addRowPos:"bottom",          //when adding a new row, add it to the top of the table
                history:true,             //allow undo and redo actions on the table
                pagination:"local",       //paginate the data
                paginationSize:10,         //allow 10 rows per page of data
                movableColumns:true,      //allow column order to be changed
                resizableRows:true,       //allow row order to be changed
                columns:[ //Define Table Columns
                    {title:"Admin (Yes/No)", field:"admin", width:150, editor:"select", editorParams:{"Yes":"Yes", "No":"No"}},
                    {title:"First Name", field:"firstname", width:150, editor:"input"},
                    {title:"Last Name", field:"lastname", width:150, editor:"input"},
                    {title:"Job Title", field:"job", width:150, editor:"input"},
                    {title:"Email Address", field:"email", width:150, editor:"input"},
            });

            $("#add-row").click(function(){
                table.addRow({});
            });
        </script>

I

Upvotes: 1

Views: 358

Answers (1)

Oli Folkerd
Oli Folkerd

Reputation: 8368

The issue is you are using the selector #add-row which means it is looking for an element with an id attribute of "add-row". Your button element has no id attribute but a name attribute with that value in which case you need to use the following selector:

$('[name="add-row"]').click(function(){
    table.addRow({});
});

Upvotes: 1

Related Questions