Datatables Vue 3 Component: Responsive Table's Child Rows are Cached and Not Updating

paulhemen88

Here's the example: https://stackblitz.com/edit/datatables-net-vue3-reactive-optyvfrg

If I put the table in responsive mode, and click on Search Data, the child row's data is not getting updated. I've tried several things such as: responsive._redrawChildren(); but nothing seems to work in this case.

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';

import DataTablesCore from 'datatables.net-bs5';
import 'datatables.net-responsive';
import DataTable from 'datatables.net-vue3';

DataTablesCore.Api.register('responsive.redisplay()', function () {
  var responsive = this.context[0].responsive;

  if (responsive) {
    responsive._redrawChildren();
  }
});

DataTable.use(DataTablesCore);

const productsTable = ref(null);

const productsColumns = [
  { title: 'Product', data: 'name' },
  { title: 'Commodity Code', data: 'commodity_code' },
  { title: 'Stock', data: 'stock_quantity' },
  { title: 'On Hold', data: 'ordered_quantity' },
  { title: 'Price', data: 'price' },
  { title: 'Surcharge', data: 'sur_charge' },
  { title: 'Image', data: 'image' },
];
const productsOptions = {
  searching: false,
  columnDefs: [
    { sortable: false, targets: [1] },
    {
      defaultContent: '-',
      targets: '_all',
    },
  ],
  language: {
    searchPlaceholder: 'Search Products or Commodity Codes',
  },
  processing: true,

  stateSaveCallback: function (settings, data) {
    sessionStorage.setItem(
      btoa('inventoryManagementIndex'),
      JSON.stringify(data)
    );
  },
  stateLoadCallback: function () {
    return JSON.parse(sessionStorage.getItem(btoa('inventoryManagementIndex')));
  },
  responsive: {
    details: {
      renderer: DataTablesCore.Responsive.renderer.listHiddenNodes(),
      display: DataTablesCore.Responsive.display.childRowImmediate,
    },
  },
  paging: true,
  stateSave: true,
  stateDuration: -1,
  order: [[0, 'asc']],
};

const data = ref([
  {
    name: 'Apple',
    commodity_code: 'APL001',
    stock_quantity: 150,
    ordered_quantity: 20,
    price: 1.2,
    sur_charge: 1.2,
    image: 'https://ui-avatars.com/api/?name=A',
  },
  {
    name: 'Banana',
    commodity_code: 'BAN002',
    stock_quantity: 200,
    ordered_quantity: 30,
    price: 0.5,
    sur_charge: 12,
    image: 'https://ui-avatars.com/api/?name=B',
  },
]);

const search = () => {
  // Update data
  data.value = [
    {
      name: 'Updated Banana',
      commodity_code: 'BAN002',
      stock_quantity: 200,
      ordered_quantity: 30,
      price: 0.5,
      sur_charge: 12,
      image: 'https://ui-avatars.com/api/?name=C',
    },
  ];
};
</script>

paulhemen88

What I know so far is that:
renderer: DataTablesCore.Responsive.renderer.listHiddenNodes()

Is causing the issue, as if i disable that, child row gets updated. But them [html Object] thing is coming on the scren.

allan

Thanks for the test case - that will be a big help when I look into the issue.

Allan

paulhemen88

Thank you @allan Do you suggest any hotfix for time being...

paulhemen88

I looked into the library code, at high level I guess:

    if (this.s.childNodeStore[name]) {
        return this.s.childNodeStore[name];
    }

This is returning the cached value. Because there's no unique identifier.