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

Question

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.

I've used datatables with React and have added styles to the columns by specifying a class name in the column definition. Maybe you could a class name and then use CSS for the tooltip as per w3schools.com/css/css_tooltip.asp. — Chris Adams
– Chris Adams, Commented Mar 13, 2019 at 15:49
Thanks Chris, this is how I fixed it :) -- "title": "<span class='d-inline-block' tabindex='0' data-toggle='tooltip' title='Estimated effective age of the improvement.'>Effective Year Built</span>", — 5pence
– 5pence, Commented Mar 13, 2019 at 16:44

user3307073 · Accepted Answer · 2019-03-13 16:09:02Z

1

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

answered Mar 13, 2019 at 16:09

user3307073

Sign up to request clarification or add additional context in comments.

1 Comment

5pence Over a year ago

Thanks Yevgen, I did alter the column header node by adding in the "title": "<span class='d-inline-block' tabindex='0' data-toggle='tooltip' title='Estimated effective age of the improvement.'>Effective Year Built</span>"

Grant Stromgren · Accepted Answer · 2019-03-13 15:32:49Z

1

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.

answered Mar 13, 2019 at 15:32

Grant Stromgren

1112 bronze badges

1 Comment

5pence Over a year ago

Yes I completely agree and do know that I ought not to be mixing jQuery with React as a lot of care needs to be taken to keep the tables DOM and React's DOM separate. Using it was a requirement unfortunately.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related