Livewire Tailwind Table pagination UI bug

So im currenly making a table with livewire and tailwind

The first page is not displaying the right ui but when i visit the second page and beyond it shows the correct UI

customers livewire

<?php

namespace App\Livewire;

use App\Models\Customer;
use Livewire\Component;
use Livewire\WithPagination;

class Customers extends Component
{
    use WithPagination;

    public function render()
    {
        return view('livewire.customers', [
            'customers' => Customer::paginate(10) 
        ]);
    }
}

customers.blade.php

<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <caption class="p-6 text-lg font-semibold text-left text-gray-900 bg-white dark:text-white dark:bg-gray-800" style="text-align: left;">
            Customers
            <p class="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400" style="text-align: left;">Browse a list of our customers designed to help you manage customer relationships effectively.</p>
        </caption>
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
        <tr>
            <th scope="col" class="px-6 py-3">
                Name
            </th>
            <th scope="col" class="px-6 py-3">
                Email
            </th>
            <th scope="col" class="px-6 py-3">
                Contact No
            </th>
            <th scope="col" class="px-6 py-3">
                Address
            </th>
            <th scope="col" class="px-6 py-3 text-left max-w-[100px] overflow-ellipsis">
                Actions
            </th>
        </tr>
        </thead>
        <tbody>
        @foreach ($customers as $customer)
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    {{ $customer->name }}
                </th>
                <td class="px-6 py-4">
                    {{ $customer->email }}
                </td>
                <td class="px-6 py-4">
                    {{ $customer->contact_no }}
                </td>
                <td class="px-6 py-4">
                    {{ $customer->address }}
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:text-blue-800 hover:underline">View</a> | <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:text-blue-800 hover:underline">Delete</a>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
    <!-- Pagination Links -->
    <div class="px-6 py-4">
        {{ $customers->links() }}
    </div>
</div>

screenshot https://imgur.com/a/5N4mOzC

lift_spindle

2 years ago

Level 16

So on page 1, the row with the name Adalberto, that's the only name that is wrapping onto a second line. Have you tried adding classes for max-w (and/or maybe text truncate) to the cell that shows the name?

... or adding classes for min width to the cell that shows the action buttons

Snapey

2 years ago

Level 122

make sure your html is valid. putting caption and paragraph between table tag and thead tag is asking for rendering issues.

The number #1 issue with livewire rendering is not using a wire:key so that livewire can keep track of the changed nodes.

<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
        <caption class="p-6 text-lg font-semibold text-left text-gray-900 bg-white dark:text-white dark:bg-gray-800" style="text-align: left;">
            Customers
            <p class="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400" style="text-align: left;">Browse a list of our customers designed to help you manage customer relationships effectively.</p>
        </caption>
    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
        <tr>
            <th scope="col" class="px-6 py-3">
                Name
            </th>
            <th scope="col" class="px-6 py-3">
                Email
            </th>
            <th scope="col" class="px-6 py-3">
                Contact No
            </th>
            <th scope="col" class="px-6 py-3">
                Address
            </th>
            <th scope="col" class="px-6 py-3 text-left max-w-[100px] overflow-ellipsis">
                Actions
            </th>
        </tr>
        </thead>
        <tbody>
        @foreach ($customers as $customer)
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700" wire:key="{{ $customer->id }}">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    {{ $customer->name }}
                </th>
                <td class="px-6 py-4">
                    {{ $customer->email }}
                </td>
                <td class="px-6 py-4">
                    {{ $customer->contact_no }}
                </td>
                <td class="px-6 py-4">
                    {{ $customer->address }}
                </td>
                <td class="px-6 py-4">
                    <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:text-blue-800 hover:underline">View</a> | <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:text-blue-800 hover:underline">Delete</a>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
    <!-- Pagination Links -->
    <div class="px-6 py-4">
        {{ $customers->links() }}
    </div>
</div>

Please or to participate in this conversation.