Datatable empty cells using inertia and vue3

Question

I am using Laravel Inertia with Vue3. I used the package https://datatables.net/blog/2022-06-22-vue for the data tables. The problem is I passed the data from the controller to vue as props but it wont render correctly. I got empty cells but it has the correct data count.

I got this alert when I go to the component

DataTables warning: table id=DataTables_Table_17 - 
Requested unknown parameter '0' for row 0, column 0. 
For more information about this error, please see http://datatables.net/tn/4

Here is my datatable component code

          <DataTable :data="tenants" class="display">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Database</th>
                    <th>Email</th>
                    <th>Actions</th>
                </tr>
            </thead>
          </DataTable>

Here is my vue devtools props details

I just found a way to partially work by doing

          <DataTable class="display">
            <thead>
              <tr>
                <th>Id</th>
                <th>Database</th>
                <th>Email</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="tenant in tenants" :key="tenant.id">
                <td>{{ tenant.id }}</td>
                <td>{{ tenant.tenancy_db_name }}</td>
                <td>{{ tenant.email }}</td>
                <td>
                  <button class="btn btn-outline-info">Update</button>
                  &emsp;
                  <button @click="deleteTenant(tenant.id)" class="btn btn-outline-danger">Delete</button>
                </td>
              </tr>
            </tbody>
          </DataTable>

But the problem is when I add or delete on the table I need to switch to other component and go back in order for the table to update.

Code from controller

    public function index(){
        $tenants = Tenant::all()->toArray();

        return Inertia::render('Tenants/Index',[
            'tenants' => $tenants
        ]);
    }

Then in my component

defineProps({
  tenants: Array,
});

Thanks in advance!

Answer 1

1. If the data structure is an array of objects then according to the documentation, we need to use the columns to populate the object properties.
2. Working with Reactive Data is also mentioned in the documentation where the package will automatically reflect the changes made to the data.

So, if you can try the following, it might help-

<DataTable
    class="display"
    :columns="columns"
    :data="tenants"
    :options="{ select: true }"
    ref="table"
/>

where columns data according to tenants array could be-

const columns = [
  { data: 'id' },
  { data: 'tenancy_db_name' },
  { data: 'email' },
];

Answer 2

Maybe you cannot loop the Reactive array based on the props you posted. Also based on this link it needs to be some kind of normal array.
You might need to convert your props from reactive to a normal array.

const data = [
  [1, 2],
  [3, 4],
];