Editor table in child row, style inherited by parent table?

Editor table in child row, style inherited by parent table?

TronikTronik Posts: 101Questions: 23Answers: 0

Hi,

I'm using child rows in which a child editor table is displayed, as shown in this blog post https://datatables.net/blog/2019-01-11

It works great but I'm having some trouble with the styling on the child table.

It seems like the child tables inherits most of the css/styling from the parent table.

If the parent table have class=display, and the child table have no class, the child table will still use the display class from the parent.

It's not my enviroment that causes it, I tested on the blog post on the inspection tool, removing the class=display on the parent also affects the child.

Any suggestions on how to make the child tables "style-independent"?

Also, when debugging this I found that the draw events on the child table is not reflected in console as the child table draw, but the parent.

$('table').DataTable().on('draw', function() {
    console.log('table draw #+this.id);
  });

The above will output 'table draw #parent_table' even if its the child that is actually drawn

Answers

  • allanallan Posts: 55,076Questions: 1Answers: 8,645 Site admin

    Excellent point. Nearly all of the styles we use in DataTables are not immediate descendent specific, but rather a general cascade - e.g. here.

    We should perhaps change that to stop this sort of bleed through. I've just created a bug in our internal tracker (DD-2361). I can't say for sure when that will get implemented though. At the moment you'll need to add some custom CSS to modify the styles you don't want on the child table.

    Allan

  • TronikTronik Posts: 101Questions: 23Answers: 0
    edited November 2021

    Thank you for the explanation.

    I removed the striped rows and hover effect by adding

    table.temp_table tbody tr { 
    pointer-events: none; 
    background-color: #FFFFFF !important;
    } 
    
  • TronikTronik Posts: 101Questions: 23Answers: 0

    Is it possible somehow to prevent the draw event of the main table when the child table is created/shown?
    I dont know why it is done, but it is not necessary.

  • allanallan Posts: 55,076Questions: 1Answers: 8,645 Site admin

    The draw event bubbles up the document. So a draw from the child will bubble up through the document, through the parent table and right the way to the body and document.

    If you want to be certain which table the event is coming from you will need to check the settings object which contains the data for the original table - e.g.

    table.on('draw', function (e, settings) {
      if (table.table().node() !== settings.nTable) {
        return;
      }
    
      // else this is our table, do something
    });
    

    I know it isn't ideal, but that's how the dom events work at the moment.

    Allan

  • TronikTronik Posts: 101Questions: 23Answers: 0

    Ok, then I understand why the on.draw is fired, but it is possible to prevent/surpress the unneccesary re-draw of the parent table when the child table is (correctly) re-drawn?

  • allanallan Posts: 55,076Questions: 1Answers: 8,645 Site admin

    In the blog post we specifically tell the parent table to redraw (to update counts and anything else) as described in the "Updated the parent table" section.

    If you don't want that, drop that block.

    Allan

  • TronikTronik Posts: 101Questions: 23Answers: 0

    I dont use that function.

    My problem is that the parent row is already selected, and when the child table is shown the row of the parent table gets re-selected. (and then also re-drawn)

    I have already told the parent table to not use select on that cell so its not that.
    Everything works as long as the row is not selected before the child table is shown.

  • allanallan Posts: 55,076Questions: 1Answers: 8,645 Site admin

    I'm going to need a link to the page showing the issue to be able to help with this one I think. I'm not understanding what is causing the parent row to be reselected if there isn't code to do that.

    Allan

Sign In or Register to comment.