Datatable child rows integrate with React

Datatable child rows integrate with React

George011George011 Posts: 3Questions: 1Answers: 0

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

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • George011George011 Posts: 3Questions: 1Answers: 0

    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');
      }
    

    } );
    }

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954

    See if this example helps remove the jQuery code.

    Kevin

  • George011George011 Posts: 3Questions: 1Answers: 0

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

Sign In or Register to comment.