Columns render configuration ignored when using insert() and/or rows.add() about simple-datatables HOT 12 CLOSED

Could you provide me with a full example (a demo app that highlights the issue)?

from simple-datatables.

@mariatamayo. Did you end up with a solution ? I have a similar issue.

I generate the following JSON data serverside.

data = [
 {id: 1, name: 'Edward K.', country: 'UK', city: 'London'},
 {id: 2, name: 'Henri S', country: 'France', city: 'Lyon'},
 {id: 3, name: 'Mike D', country: 'US', city: 'New York City'},
...]

In my js I try to :

const renderFunction = function(data, cell, row){
    return data + "<button class=\'test\' type=\'button\' data-row=\'"  + row.dataIndex + "\'>Select</button>";
  }

this.dataTable = new DataTable(this.results_tableTarget, {columns: [  {select: 1, render: this.renderFunction}, {select: 2, hidden: true}]  });

this.dataTable.insert(JSON.parse(this.data.get("results")));
// NB:  I use JSON.parse since data sent from server is JSON

}

In the end, column 1 is not rendered as expected (only a class td tag) and column 2 is not hidden.

from simple-datatables.

Ok, I found a temporary solution. After calling insert you should call render on dataTable

From @mariatamayo's example :
https://jsfiddle.net/2xsbeutg/

The problem is that if you set searchable: true search is rendered twice..

PS: I have not solved the issue related to hidden yet

from simple-datatables.

Please also note that the quick fix above breaks pagination

from simple-datatables.

Hi all,

After reviewing the source code, I realized that insert / add called the update function to regenerate rows. The problem is that this last function doest not call the setColumns() from datatable.js. which is in charge of iterating over columnRenderers and format rows.

When I change the update function as follow the rendering works (not hidden columns)

    update() {
        classList.remove(this.wrapper, "dataTable-empty")

        this.paginate(this)
        this.render("page")

        this.links = []

        let i = this.pages.length
        while (i--) {
            const num = i + 1
            this.links[i] = button(i === 0 ? "active" : "", num, num)
        }

        this.sorting = false

        this.render("pager")

        this.rows().update()
        this.setColumns()
        this.emit("datatable.update")
    }

In my app I had performance issue so I ended up calling dataTable.setColumns() just after dataTable.insert(table)

https://jsfiddle.net/72smtnvx/2/

from simple-datatables.

@johanneswilm do you recommend to call this.setColumns() inside update ?

from simple-datatables.

@maximedelpit Thanks for investigating this and the fiddles. In my own test setup this version works: https://github.com/fiduswriter/Simple-DataTables/tree/es2018

Could you check if this works for you? If so, I'll merge it into master and make a release.

from simple-datatables.

@maximedelpit ping!

from simple-datatables.

Hi @johanneswilm,

Sorry, I have been busy and did not see your message. I'm a bit in a rush but will dive on it as soon as possible

from simple-datatables.

@maximedelpit Ok great. Hopefully you have some more time now.

from simple-datatables.

@maximedelpit Unfortunately I needed to merge this for some other bug fix but please let me know if it didn't work out and we'll reopen this issue/

from simple-datatables.

A bit late to the party but I have the same issue. I added a delete button on the last column via columns render function on creation of the table. However, when I add a new row, the button is not there. You @johanneswilm mentioned a solution, which worked for you, but the link is broken. Can you explain what I can do?

from simple-datatables.