[Bug]: reorder icon get displayed when sorting table

itsLeonB commented 4 months ago

What happened?

When clicking one of the headers for sorting, the data columns are shifted, adding a new column on the left. Package is freshly installed.

Screen recording

How to reproduce the bug

Table component

class ProductTable extends DataTableComponent
{
    protected $model = Product::class;

    public function configure(): void
    {
        $this->setPrimaryKey('id');
        $this->setReorderStatus(false);
    }

    public function columns(): array
    {
        return [
            Column::make("Id", "id")
                ->sortable(),
            Column::make("Name", "name")
                ->sortable(),
            Column::make("Photo", "photo")
                ->sortable(),
            Column::make("Description", "description")
                ->sortable(),
            Column::make("Category id", "category_id")
                ->sortable(),
            Column::make("Manufacturer", "manufacturer")
                ->sortable(),
            Column::make("Created at", "created_at")
                ->sortable(),
            Column::make("Updated at", "updated_at")
                ->sortable(),
        ];
    }
}

app.js file

import './bootstrap';

import Alpine from 'alpinejs'

window.Alpine = Alpine

Alpine.start()

view file

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Products') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <livewire:product-table class="shadow-xl sm:rounded-lg"/>
        </div>
    </div>
</x-app-layout>

Layout file

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])

        <!-- Styles -->
        @livewireStyles
    </head>
    <body class="font-sans antialiased">
        <x-banner />

        <div class="min-h-screen bg-gray-100">
            @livewire('navigation-menu')

            <!-- Page Heading -->
            @if (isset($header))
                <header class="bg-white shadow">
                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                        {{ $header }}
                    </div>
                </header>
            @endif

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>

        @stack('modals')

        @livewireScripts
    </body>
</html>

Package Version

3.2.2

PHP Version

8.2.x

Laravel Version

10.43.0

Alpine Version

3.13.5

Theme

Tailwind 3.x

Notes

Console mentioned AlpineJS error, currentlyReorderingStatus is not defined.

Error Message

No response

lrljoe commented 4 months ago

It looks like either: 1) You have AlpineJS included/started twice 2) The Rappasoft specific code isn't being loaded in, are you using injection or bundler approach (I'd always recommend bundler!) See Here For Details

Make sure as well that you include the rappasoft path in your tailwind config for inclusion to ensure that all of the styles are loaded properly. See Here For Details

itsLeonB commented 3 months ago

Apparently removing these lines from app.js solved the issue.

import Alpine from 'alpinejs'

window.Alpine = Alpine

Alpine.start()

Thanks!

rappasoft / laravel-livewire-tables