Question 16750 in Laravel Question posted in
The official Laravel Documentation can be found here.

Datatable empty cells using inertia and vue3 – Laravel

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.

enter image description here

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

enter image description here

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.

enter image description here

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!

Tags:

2

Answers


  1. 0

    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],
];
    Login or Signup to reply.
  2. 0
    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' },
];
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search