CODEWITHSUNDEEP
javascriptjqueryreactjsdatatables
5pence
5pence

Reputation: 175

DataTables.net in React - Tooltip on header column cell needed

I am using a datatables.net table inside a React app. I want to know how I can create a tooltip on the header of the 'Effective Year Built' column.

componentDidMount() {
    this.setupTable(this.props.data);
}

setupTable(data) {

    this.$el = $(this.el);
    this.$el.DataTable(
        {
            alternatingRowStyle: true,
            sort: 'enable'
            data: data,
            "oLanguage": {
                "sSearch": "Search"
            },
            columns: [
                {
                    "title": "Parcel ID",
                    mData: "ParcelID"
                },
                {
                    "title": "Land Value",
                    mData: "TotalLandValue",
                    render: $.fn.dataTable.render.number(',', '', 0, '$')
                },
                {
                    "title": "Effective Year Built",
                    mData: "effectiveyearbuilt"
                }
            ]
        }
    )
}

I have tried a number of solutions to no avail. I don't seem to be able to tag a unique id into that particular cell either? Thanks for any help.

Upvotes: 0

Views: 675

Answers (2)

user3307073
user3307073

Reputation:

If you need to assign an attribute (id, in your case) to your column header node, you may do that with something, like:

$(dataTable.column(2).header()).attr('id', '/* some id here */');

where dataTable is a variable, returned by DataTable() constructor

Upvotes: 1

Grant Stromgren
Grant Stromgren

Reputation: 111

Depending on your needs, you might benefit from pulling in a package like react-table (react-table) - I've used this before in a project, and it works really nicely. You are able to define custom rendered components - which you can just go and grab another package react-tooltip (react-tooltip) for.

I find it a bit easier to work with React specific node packages instead of pulling in JS libraries, where possible.

Upvotes: 1

Related Questions