Tabulator: Add blank row with semantic ui theme - row height incorrect

[dpatel20]

Hi Oli -
I add a row using the following onclick button.

$("#add-row").click(function(){
    $("#example-table-demo").tabulator("addRow", {}, true);
});

With the standard theme, it looks fine. With the semantic ui theme (which has a bigger font) the new row is too short to see the text completely (bottom of text partially cut off). I tried a redraw but that did not work.

Also, is it possible to make the newly added blank row fully editable and add custom editors?? My current table only allows editing certain columns for existing data but when a new blank row is added, can I make it so all columns can be edited? I tried it but get the following issue (understandably):

Options Error - Tabulator does not allow options to be set after initialization unless there is a function defined for that purpose

Using v3.

[olifolkerd]

Hey,

Thanks for the feedback, i will look into the semanti-ui design issue tonight.

with reguards to the editors for new rows, i would suggest that you put an editor on every column then used the editable callback in the columns that are new row only to check that the row is new before allowing edit. you could pass a newRow:true parameter in with the new row data for example.

Cheers

Oli

[dpatel20]

Hi Oli - I'm not entirely sure what you mean... How would I know it is a new row to pass a parameter as you suggest?

In fact, I am struggling conceptually about how to add new rows and then save the data. Say the user adds a couple of new rows, I need to save the new rows back to the server. Right now, the best I can think of is: when the user presses 'save', I get the table data and then iterate through looking for any object that has not got an index (indicating its a new row).

[olifolkerd]

When you create a new row you can pass in data:

$("#example-table").tabulator("addRow", {newRow:true});

In your editable column definition property you can check for this:

{title:"Name", field:"name", editor:"input", editable:function(cell){
    var data = cell.getRow().getData();
    return data.newRow;
}},

There are a lot of ways you can pass data back to the server, if you wanted to do it automatically there are callbacks that are triggered after rows are added and edited, you could use any of these to trigger a write to the server. if you then need to update the row to add an index assigned by the server, in the success callback for your ajax request you could call the row.update() function on the component passed into the callback passing in the updated data.

$("#example-table").tabulator({
    rowAdded:function(row){
        //row - row component
        //You could trigger an ajax request to your server here
    },
    cellEdited:function(cell){
        //cell - cell component
        //You could trigger an ajax request to your server here
    },
    dataEdited:function(data){
        //data - the updated table data
        //You could trigger an ajax request to your server here
    },
});

alternatively, if you wanted to use a save button you can use the getData function to return the updated data from the table and then use this in a request to the server:

var data = $("#example-table").tabulator("getData");

Let me know if that helps.

Cheers

Oli

[dpatel20]

Hi Oli - many thanks for all the help! :)

I now understand the editable part.

I'd rather have a 'save' button purely because then I know the user has finished adding all the data. e.g. if I have 7 columns, the callbacks you mentioned above would be called after editing each column - but I do not want to make the call to the server until the user has completed all the mandatory columns (and allow for the fact they may make input errors so may change something before being ready to commit the new row).

I tried using getData in the 'save' button but that returns ALL the rows. But I only want to update the server with new rows. So, my best idea is to iterate through looking for rows without an index (or with the newRow parameter). My data is relatively small (max few hundred rows) so this should be OK. But I was hoping there was a way that tabulator kept track of newly added rows??

PS: I tested the dataEdited and on addRow event it returns a function - is this a bug?

function (active) {

    var self = this,
        output = [];

    var rows = active ? self.rows : self.activeRows;

    rows.forEach(function (row) {

      output.push(row.getData(true));
    });

    retu…

[dpatel20]

In addition to the above questions, I think I have found another bug. With below code, I add a row then I use the test button to get the data. When I check the data returned from getData, I now have 2 new objects (rows) rather than 1.

 //Add row on "Add Row" button click
$("#add-row").click(function(){
    $("#example-table-demo").tabulator("addRow", {}, true);    
  });

  $("#test").click(function(){
    var tmp = $("#example-table-demo").tabulator('getData');
    console.log(tmp);    
  });

Using v3.

Let me know if I should put this in a separate issue.

[olifolkerd]

Hey,

Thanks for the feedback, both the parameter containing a function and the duplicated add row were bugs, which should now be fixed.

In answer to your other question i would use the rowAdded callback to push to an array of added rows, that you could then process on save.

//hold new rows
var newRows = [];

$("#example-table").tabulator({
    //push new rows to array
    rowAdded:function(row){
        //row - row component
        //You could trigger an ajax request to your server here
        newRows .push(row);
    },
});

//generate output data from new rows
$("#save-button").click(function(){
    var output = [];

    //get data from rows
    newRows.forEach(function (row) {
      output.push(row.getData());
    });

    //do something with data

    //clear the new rows array for any new rows from this point
    newRows = [];
});

Does that help at all?

Cheers

Oli

[dpatel20]

I think that helps. So, when the rowAdded callback is called, I assume it will be a blank row (since the callback is fired when the row is first added by the user). But, then I assume (lack of proper understanding by me of JS may follow): since each new row is an object, when the user adds data to the row within tabulator, that data will be reflected in the newRows array. i.e. newRows is pointing (referencing) to the row objects.

I'll give that a go.

Also, did you get a chance to take a look at the semantic-ui new row issue (row height too small)?

And I'll test the bug fixes too. Love the speedy response!!

[olifolkerd]

Hey you are correct when you call the getData function that will retrieve the latest data for that row.

I haven't had a chance to tackle the add row issue yet, there are a few tweaks that need to be made to the virtual DOM so i will make them all in one go on Saturday.

I will give you a shout when it is all up and running.

Cheers :)

[olifolkerd]

Hey,

I have committed a tweak to fix the new row issues, empty cells wern't taking the line height into account. I have added a tweak to fill empty cells with a non-breaking space so that they observe the correct line height.

Cheers

Oli