React onclick not working inside DataTable due to columnDefs

tomography

Hi,

I have a React component in the first column in a Datatable and will do something when clicked.

Also I am using a columnDefs to adjust the column width.

            paging: false,
            scrollX: "100%",
            scrollY: "50vh",
            scrollCollapse: true,
            columnDefs: [
                {
                    render:
                        function (data, type, full, meta) {
                            if (data.length > 40) {
                                return "<div class='text-wrap width-320'>" + data + "</div>";
                            }                         
                            else {
                                return "<div class='text-wrap'>" + data + "</div>";
                            }
                        },
                    targets: "_all"
                }
             ]

Somehow nothing happened when I click, but if I remove the column from columnDefs, then it started to work, anyone can briefly explain why?

Also if I remove that column from columnDefs, how can I adjust the column width. I tried the following, the react was working fine but the column width wasn't.

            columnDefs: [
                {
                    render:
                        function (data, type, full, meta) {
                            if (data.length > 40) {
                                return "<div class='text-wrap width-320'>" + data + "</div>";
                            }
                            else {
                                return "<div class='text-wrap'>" + data + "</div>";
                            }
                        },
                    targets: [1, 2, 3]
                },
                { width: "4000px", targets: 0 }
            ]

Is there a better solution?

Thanks,

kthorngren

Maybe your React component in column 0 is affected by wrapping it in a div?

Since you seem to be forcing the size of the other columns maybe disabling autoWidth will help. Do you really want column 0 to be 4000px?

Kevin

tomography

Hi @kthorngren,

Thank you for the response.

I do use the div tag in the render() of my react component. What should I use to replace that?

I just put 4000px to see if it can give a wider column but it still don't even I set autoWidth as false...

kthorngren

I do use the div tag in the render() of my react component. What should I use to replace that?

Thought you said the second example is working with the React component in column 0. In that situation you aren't rendering a div. However note that Datatables isn't controlling anything inside the td. If you place a div there and the React component doesn't work that has nothing to do with Datatables.

I just put 4000px to see if it can give a wider column but it still don't even I set autoWidth as false...

Column widths are not the easiest thing. Make sure you are setting style="width:100%" on the table tag as shown in this example:
https://datatables.net/examples/basic_init/flexible_width.html

Kevin