X-Splade-Table Component Pagination Is Broken in 0.7.1

[MotionPhix]

The picture above is from the docs. But that paginate function is not available anymore and hence the pagination is no longer working properly. Thing is, if I click on the drop down of perpageoptions and pick a number number different from default (the default is set to 5) the pagination doesn't change to the selected number. It just remains the default one.

And for the pagination to even show on the table, I have to define it on the dataset like in the picture below. What am I missing?

The picture below shows my config for contacts table

Also the custom head and body does not work. Using the same data as above, it tells me that $contact is undefined when clearly I have set the as attribute on the x-splade-table as shown below

<x-splade-table for="$contacts" as="$contact">

<x-slot name="body">
                
                <tbody class="bg-white divide-y divide-gray-200">

                    <tr class="transition-all hover:bg-gray-100">
                      <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                          <div class="flex-shrink-0 w-10 h-10">
                            <img
                              src="{{ asset( '/logos/' . $contact->company->logo->photo_path ) }}"
                            />
                          </div>

                          <div class="ml-4">
                            <div class="text-sm font-medium text-gray-900"> 
                              {{ $contact->firsname . ' ' . $contact->last_name
                            </div>
                            <div class="text-sm text-gray-500">
                              {{ $contact->email }}
                            </div>
                          </div>
                        </div>
                      </td>

                      <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">Regional Paradigm Technician</div>
                        <div class="text-sm text-gray-500">Optimization</div>
                      </td>
                      <td class="px-6 py-4 whitespace-nowrap">
                        <span
                          {{-- class={{[
                            'inline-flex px-2 text-xs font-semibold leading-5 text-green-800 rounded-full',
                            active ? 'bg-green-100' : 'bg-red-100',
                          ]}} --}}
                        >
                          {{ $contact->phone->number }}
                        </span>
                      </td>
                      <td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">
                        {{ $contact->status }}
                      </td>

                      <td class="px-6 py-4 text-sm font-medium whitespace-nowrap">
                        <Link href="{{ route('contacts.edit', $contact) }}" class="text-indigo-600 hover:text-indigo-900">
                          Edit
                        </Link>
                      </td>
                    </tr>
                    
                </tbody>
              </x-slot>
</x-splade-table>

[ifathurrohman]

Same with me, perpage option doesn't work properly

[pascalbaljet]

The paginate method seems to work fine (there's a dedicated test for it). I've found a bug that occurs if you're using different perPage values in the paginate and perPageOptions methods, that's fixed in v0.7.4.

[MotionPhix]

Good afternoon, after upgrading, pagination does not work still. I am getting the following error with the pagination.

Need some help getting this to work

[pascalbaljet]

Ahh I see it! You should remove the paginate method in the for() method and only call it in the configure() method.

public function for()
{
    return Contact::with(['company', 'phone']);
}

[pascalbaljet]

As of v0.7.7, it throws an Exception to make it more obvious what's going on.