CODEWITHSUNDEEP
reactjsdatatables
Gaurav Kumar
Gaurav Kumar

Reputation: 1231

How to put onClick in column of data tables?

So, been trying to use datatable in reactjs, I want to put an onclick in the column but getting an error.

Following is my code:

const $ = require('jquery')
$.DataTable = require('datatables.net')
class Rmsdatatable extends Component {
    constructor(props) {
        super(props)
        this.handletableclick = this.handletableclick.bind(this)
    }
    handletableclick(event) {
        console.log(event)
    }
    componentDidUpdate() {
        console.log(this.props.data)
        this.$el = $(this.el)
        this.$el.DataTable(
            {
                data: this.props.data,
                scrollY: 520,
                paging: false,
                responsive: true,
                columns: [
                    {
                        data: "vfdSno",
                        render: function (data, type, row) {
                            return '<a onClick={' + this.handletableclick.bind(this, row) + '} >' + data + '</a>'
                        }
                    },
                    { data: "customerName" },
                    { data: "district" },
                    { data: "state" }
                ]
            }
        )
    }
    render() {
        return (
            <div style={{ 'padding': '10px' }} className="col-xs-10">
                <table id="example" className="display" width="100%" ref={el => this.el = el}>
                    <thead>
                        <tr>
                            <th>VFD/Controller No</th>
                            <th>Beneficiary</th>
                            <th>District</th>
                            <th>State</th>
                        </tr>
                    </thead></table>
            </div>

        )
    }
}

For reference, I am using this link:

https://datatables.net/forums/discussion/38969/reload-refresh-table-after-event

Error is : TypeError: Cannot read property 'handletableclick' of undefined

Thanks and appreciate your help.

Upvotes: 0

Views: 3044

Answers (4)

kontramundo
kontramundo

Reputation: 453

can you try like this:

 columnDefs: [
            {
                targets: 1,
                createdCell: (td, cellData, rowData, row, col) =>
                  ReactDOM.render(
                    <button
                      onClick={() => this.handletableclick(row) }>
                     data
                    </button>, td),
              } 
        ]

Upvotes: 8

yagiro
yagiro

Reputation: 777

This seems like a scope issue. Try the following:

componentDidUpdate() {
        console.log(this.props.data)
        this.$el = $(this.el)
        const self = this; // ******** save a reference to 'this' 
        this.$el.DataTable(
            {
                data: this.props.data,
                scrollY: 520,
                paging: false,
                responsive: true,
                columns: [
                    {
                        data: "vfdSno",
                        render: function (data, type, row) {
                            // ******** use self here (instead of this) ********
                            return '<a onClick={' + self.handletableclick.bind(self, row) + '} >' + data + '</a>'
                        }
                    },
                    { data: "customerName" },
                    { data: "district" },
                    { data: "state" }
                ]
            }
        )
    }

Upvotes: 0

user
user

Reputation: 427

try this 

       "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
            {
       $(ntd).html("<a onClick={ this.handletableclick.bind(this, iRow)}>{ 
              sData }</a>
              }

instead of

render: function (data, type, row) {
     return '<a onClick={' + 
   this.handletableclick.bind(this, row) + '} >' + data + '</a>'
                    }

Upvotes: 0

Nicolae Maties
Nicolae Maties

Reputation: 2675

return (<a onClick={ this.handletableclick.bind(this, row) }>{ data }</a>)

Replace current return statement with the one from above. You don't need to return a string of your html tag.

Upvotes: 0

Related Questions