Lazy loading data for DataTables using Vue 3

datator

Hi. First time DataTables user here, using datatables.net-dt 2.2 and datatables.net-vue3 3.0.

Initially the page looks like this(removed uninteresting parts):

<script setup lang="ts">
import DataTable from "datatables.net-vue3";
import DataTablesCore from 'datatables.net';

const groups = JSON.parse(JSON.stringify($page.value.props.groups)).data;
const sectionLevels = ref([]);
const sectionTypes = ref([]);

const {items,} = useGroupTable();

DataTable.use(DataTablesCore);

const columns = [
  {
    data:'section_level_id',
    name:'test',
  },
];

let dt;
const table = ref();
onMounted(function () {
  dt = table.value.dt;
});
</script>

<template>
  <div>
    <DataTable
      ref="table"
      :columns="columns"
      :data="items"
      class="table table-hover table-striped display"
      width="100%"
    >
      <thead>
        <tr>
          <th>Level</th>
        </tr>
      </thead>

      <template #column-test="itemProps">
        <pre>{{ itemProps.cellData }}</pre> // My "problematic line"
      </template>
    
      <tfoot>
        <tr>
          <th />
        </tr>
      </tfoot>
    </DataTable>
</template>

<style>
  @import 'datatables.net-dt';
</style>

Data for the table is loaded asynchronously, and so the table needs an update afterwards. I have code for this that is kind of working(I see the console printouts):

const updateTable = () => {
  if (/*...*/) { // Don't update until all parts of the data has loaded to avoid flickering
    dt.rows().every(function () {
      let row = this.data();
      console.log('rows every', row);

      // The data to show is *based* on section_level_id, but rather than the id of the level show the name of it
      row.section_level_id = sectionLevels.value.find((item) => item.id == row.section_level_id).name
    });
  }
}

The procedure is to update the part of the data()/row that matches the data property of the column in columns, right? But still.. the data in the column stays numbers(matches the section level id). How to update the data after an asynchronous load? I know about https://stackblitz.com/edit/datatables-net-vue3-reactive and I've tried matching it. But apparently I am missing something.

allan

Can you use the demo StackBlitz example to build up a test case showing the issue please?

I think you'll need to update your items variable directly. That might be responsive, it might not - I'm not sure what useGroupTable returns.

Allan