Answers

• allan Posts: 65,339Questions: 1Answers: 10,838 Site admin

  November 7

  If I'm understanding correctly, to see the problem:

  1. Load the example
  2. When loaded, expand the first row
  3. Click the "Change Data" button
  4. Observe that the table shows all columns?

  I'm not seeing that behaviour I'm afraid. Clicking the button doesn't change the layout of the table for me. I continue to see 4 columns.

  Allan
• Long Lundy Posts: 13Questions: 3Answers: 0

  November 7

  Let me clarify the issue again:

  First, I opened the web page and resized the screen to 550px. At this width, four columns were hidden. Then, I clicked the Expand button to view the hidden columns (see the picture below).
  

  After that, I clicked the Change Data button, which updates the values in the Description column to “11112222”. When I resized the screen back to the normal width of 1070px, the four previously hidden columns reappeared — but their data was duplicated (see the picture below).
  
• allan Posts: 65,339Questions: 1Answers: 10,838 Site admin

  November 10 Answer ✓

  Hi,

  Thanks for the instructions. I went to look at it, but, have you changed the Stackblitz example? This is what I'm seeing at the moment:

  

  I no longer see the "Change Data" button, and the data is different.

  How can I see the original issue please?

  Allan
• Long Lundy Posts: 13Questions: 3Answers: 0

  November 11

  "Did you click this link: https://stackblitz.com/~/github.com/mizterdy07/vue3-test-datatable?file=src/App.vue?
• allan Posts: 65,339Questions: 1Answers: 10,838 Site admin

  November 11

  That's odd - yes, it is back to normal now. Maybe I did click on the wrong one... Anyway, I see the issue now, thank you.

  The problem is that when clicking the Change Data button, the data is updated, but Responsive doesn't clear out its child node cache. So when the table is expanded, the elements that were hidden are reattached, even although they are no longer needed.

  As a total hack, a workaround is to add:

  datatable.value.dt.settings()[0].responsive.s.childNodeStore = {};
  

  at the end of your fnUpdate function. That eliminates the child node cache.

  That isn't a great solution though - I need to look into a better way to resolve this, ideally making it happen automatically. I will do so as part of other changes that I'm working on (although they are extensive, so it won't be resolved properly in the near future I'm afraid).

  Allan
• Long Lundy Posts: 13Questions: 3Answers: 0

  November 12

  Thank you very much, Allan, for resolving the issue.