Datatable child rows integrate with React

George011

Hi, i want to implement child rows in React. Is there any possibility ?

It should look like this:
https://datatables.net/examples/api/row_details.html

colin

Child rows are just additional data associated with the record that is displayed when the child is open - whether React is in use or not, that would still be the case.

Could you explain a little more, ideally with an example, what you're trying to achieve please. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

George011

Something like this i want to achieve but without jquery code inside react component.
https://therichpost.com/reactjs-datatable-row-expand-working-demo-with-source-code/

componentDidMount() {

//initialize datatable
var table = $('#example').DataTable();
$('#example tbody').on('click', 'td.details-control', function () {
  var tr = $(this).closest('tr');
  var row = table.row( tr );
  if ( row.child.isShown() ) {
      // This row is already open - close it
      row.child.hide();
      tr.removeClass('shown');
  }
  else {
      // Open this row
      row.child( '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"><tr><td>Full name:</td><td>Ajay</td></tr></table>' ).show();
      tr.addClass('shown');
  }

} );
}

kthorngren

See if this example helps remove the jQuery code.

Kevin

George011

This example is pure js, i need react code to implement a datatable with child row