React + select - extracting row information

fulltonj

I have been working with DataTables for quite a few years and have just started working with the datatables.net-react package. I can create a datatable, make an ajax call and populate the table. I can also generate a select event and log it to the console. My question - I don't understand how to extract information from the selected row.

I was able to do this readily with JQuery in the pre-React days but am trying to avoid mixing React and JQuery. I've looked in many places but have found nothing timely, or even relevant. Any advice gratefully accepted!

<DataTable id="resultSetTable" className="display" onSelect={selectEvent}
                                    options={{
                                        responsive: true,
                                        select: true,

                                        ajax: {
                                            url: 'blah blah',

                                            headers: {
                                                'Content-Type': 'application/json',
                                            }
                                        },

                                        searching: true,
                                        paging: true,
                                        order: [[1, 'desc']],
                                        dom: 'lfrtip', // use B for buttons
                                        pageLength: 5,
                                        lengthMenu: [[5, 10, 20, -1], [5, 10, 20]],
                                        (plenty of column definitions),
                                        fixedColumns: false
                                    }}>

and the simple logging function:

 let selectEvent = (e) => {
        console.log('Select action', e);
       
      };

allan

You need an API reference for the DataTable, which you can get via the ref attribute - see this section of the manual. Then you can do normal API interaction such as table.rows({selected: true}).data().

Allan

fulltonj

Hi Allan - will give it another try. I tried it once but no luck - 2nd time is the charm (I hope). Thank you!

fulltonj

My apologies for not getting back earlier. I am still having problems. I have done what was suggested in the example in the manual, with one difference. As I am using JS instead of TSX, I had to make the following change:

ref={table},

Changed to:

 ref: { table },

The following code is executed when the onSelect event fires ( bit extra for completeness - see the debugger error message):

 window.Datatable=DataTable;

    let selectEvent = (e) => {
        console.log('Select action', e);
        console.log('Table: ', table);
    };

    const table = useRef();

The current object is undefined.......

Running the debugger gives us this:

I'm at my wits' end - applying late-night caffeine hasn't helped either.

Any suggestions will be gratefully received.

allan

Perhaps you can show me the full code for the component in question?

This example shows a working case of using the DataTables API inside a React component.

Allan

fulltonj

Thanks Allan - will do if I can't resolve this myself over the next couple of days. I'll mark this as answered and if I can't get it to work with a new, clean install I'll ask again just using your example. Thank you.