[Bug]: reorder icon get displayed when sorting table
itsLeonB opened this issue · 2 comments
itsLeonB commented
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.
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
It looks like either:
- You have AlpineJS included/started twice
- 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
Apparently removing these lines from app.js
solved the issue.
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
Thanks!