Use Core Attribute Bag

resources/js/laravel-livewire-tables.js

@@ -2,7 +2,10 @@
 
 document.addEventListener('alpine:init', () => {
 
-    Alpine.data('laravellivewiretable', (wire, showBulkActionsAlpine, tableID, primaryKeyName) => ({
+    Alpine.data('laravellivewiretable', (wire) => ({
+        tableId: '',
+        showBulkActionsAlpine: false,
+        primaryKeyName: '',
         shouldBeDisplayed: wire.entangle('shouldBeDisplayed'),
         tableName: wire.entangle('tableName'),
         dataTableFingerprint: wire.entangle('dataTableFingerprint'),
@@ -70,7 +73,7 @@ document.addEventListener('alpine:init', () => {
             element.classList.remove("laravel-livewire-table-dragging");
             let originalPosition = element.rowIndex;
             let newPosition = target.rowIndex;
-            let table = document.getElementById(tableID);
+            let table = document.getElementById(this.tableId);
             let loopStart = originalPosition;
             if (event.offsetY > (target.getBoundingClientRect().height / 2)) {
                 parent.insertBefore(element, target.nextSibling);
@@ -126,17 +129,17 @@ document.addEventListener('alpine:init', () => {
 
         },
         updateOrderedItems() {
-            let table = document.getElementById(tableID);
+            let table = document.getElementById(this.tableId);
             let orderedRows = [];
             for (let i = 1, row; row = table.rows[i]; i++) {
-            orderedRows.push({ [primaryKeyName]: row.getAttribute('rowpk'), [this.defaultReorderColumn]: i });
+            orderedRows.push({ [this.primaryKeyName]: row.getAttribute('rowpk'), [this.defaultReorderColumn]: i });
             }
             wire.storeReorder(orderedRows);
         },
         setupEvenOddClasses() {
             if (this.evenNotInOdd.length === undefined || this.evenNotInOdd.length == 0 || this.oddNotInEven.length === undefined || this.oddNotInEven.length == 0)
             {
-                let tbody = document.getElementById(tableID).getElementsByTagName('tbody')[0];
+                let tbody = document.getElementById(this.tableId).getElementsByTagName('tbody')[0];
                 let evenRowClassArray = [];
                 let oddRowClassArray = [];
 
@@ -152,7 +155,7 @@ document.addEventListener('alpine:init', () => {
             }
         },
         toggleSelectAll() {
-            if (!showBulkActionsAlpine) {
+            if (!this.showBulkActionsAlpine) {
                 return;
             }
 
@@ -171,14 +174,14 @@ document.addEventListener('alpine:init', () => {
             }
         },
         setAllItemsSelected() {
-            if (!showBulkActionsAlpine) {
+            if (!this.showBulkActionsAlpine) {
                 return;
             }
             this.selectAllStatus = true;
             this.selectAllOnPage();
         },
         setAllSelected() {
-            if (!showBulkActionsAlpine) {
+            if (!this.showBulkActionsAlpine) {
                 return;
             }
             if (this.delaySelectAll)
@@ -192,14 +195,14 @@ document.addEventListener('alpine:init', () => {
             }
         },
         clearSelected() {
-            if (!showBulkActionsAlpine) {
+            if (!this.showBulkActionsAlpine) {
                 return;
             }
             this.selectAllStatus = false;
             wire.clearSelected();
         },
         selectAllOnPage() {
-            if (!showBulkActionsAlpine) {
+            if (!this.showBulkActionsAlpine) {
                 return;
             }
 
@@ -210,14 +213,32 @@ document.addEventListener('alpine:init', () => {
             }
             this.selectedItems = [...new Set(tempSelectedItems)];
         },
-        showTable(eventTableName = '', eventTableFingerpint = '')
+        setTableId(tableId)
         {
-            if ((eventTableName != '' && eventTableName === this.tableName) || (eventTableFingerprint != '' && eventTableFingerpint === this.dataTableFingerprint)) { 
+            this.tableId = tableId;
+        },
+        setAlpineBulkActions(showBulkActionsAlpine)
+        {
+            this.showBulkActionsAlpine = showBulkActionsAlpine;
+        },
+        setPrimaryKeyName(primaryKeyName)
+        {
+            this.primaryKeyName = primaryKeyName;
+        },
+        showTable(event)
+        {
+            let eventTableName = event.detail.tableName ?? '';
+            let eventTableFingerprint = event.detail.tableFingerpint ?? '';
+
+            if (((eventTableName ?? '') != '' && eventTableName === this.tableName) || (eventTableFingerprint != '' && eventTableFingerpint === this.dataTableFingerprint)) { 
                 this.shouldBeDisplayed = true; 
             } 
         },
-        hideTable(eventTableName = '', eventTableFingerpint = '')
+        hideTable(event)
         {
+            let eventTableName = event.detail.tableName ?? '';
+            let eventTableFingerprint = event.detail.tableFingerpint ?? '';
+
             if ((eventTableName != '' && eventTableName === this.tableName) || (eventTableFingerprint != '' && eventTableFingerpint === this.dataTableFingerprint)) { 
                 this.shouldBeDisplayed = false; 
             } 

resources/views/components/table.blade.php

@@ -21,6 +21,7 @@
             {{ $attributes->merge($customAttributes['table'])
                 ->class(['min-w-full divide-y divide-gray-200 dark:divide-none' => $customAttributes['table']['default'] ?? true])
                 ->except('default') }}
+
         >
             <thead wire:key="{{ $tableName }}-thead"
                 {{ $attributes->merge($customAttributes['thead'])

resources/views/datatable.blade.php

@@ -6,7 +6,7 @@
 @php($isBootstrap4 = $this->isBootstrap4)
 @php($isBootstrap5 = $this->isBootstrap5)
 
-<div x-data="laravellivewiretable($wire, '{{ $this->showBulkActionsDropdownAlpine() }}', '{{ $tableId }}', '{{ $primaryKey }}')" x-cloak x-show="shouldBeDisplayed"  x-on:show-table.window="showTable(event.detail.tableName ?? '', event.detail.tableFingerpint ?? '')" x-on:hide-table.window="hideTable(event.detail.tableName ?? '', event.detail.tableFingerpint ?? '')">
+<div {{ $this->getTopLevelAttributes() }}>
     <x-livewire-tables::wrapper :component="$this" :tableName="$tableName" :$primaryKey :$isTailwind :$isBootstrap :$isBootstrap4 :$isBootstrap5>
         @if($this->hasActions && !$this->showActionsInToolbar)
             <x-livewire-tables::includes.actions/>    

src/Traits/Helpers/ComponentHelpers.php

@@ -94,7 +94,7 @@ public function getTableName(): string
     #[Computed]
     public function getTableId(): string
     {
-        return $this->getTableAttributes()['id'];
+        return $this->getTableAttributes()['id'] ?? 'table-'.$this->getTableName();
     }
 
     public function isTableNamed(string $name): bool

src/Traits/Helpers/TableAttributeHelpers.php

@@ -3,6 +3,7 @@
 namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;
 
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\View\ComponentAttributeBag;
 use Livewire\Attributes\Computed;
 use Rappasoft\LaravelLivewireTables\Views\Column;
 
@@ -82,4 +83,22 @@ public function getShouldBeDisplayed(): bool
     {
         return $this->shouldBeDisplayed;
     }
+
+    public function getTopLevelAttributesArray(): array
+    {
+        return [
+            'x-data' => 'laravellivewiretable($wire)',
+            'x-init' => "setTableId('".$this->getTableAttributes()['id']."'); setAlpineBulkActions('".$this->showBulkActionsDropdownAlpine()."'); setPrimaryKeyName('".$this->getPrimaryKey()."');",
+            'x-cloak',
+            'x-show' => 'shouldBeDisplayed',
+            'x-on:show-table.window' => 'showTable(event)',
+            'x-on:hide-table.window' => 'hideTable(event)',
+        ];
+    }
+
+    #[Computed]
+    public function getTopLevelAttributes(): ComponentAttributeBag
+    {
+        return new ComponentAttributeBag($this->getTopLevelAttributesArray());
+    }
 }

tests/Traits/Helpers/TableAttributeHelpersTest.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Tests\Traits\Helpers;
+
+use Rappasoft\LaravelLivewireTables\Tests\TestCase;
+
+final class TableAttributeHelpersTest extends TestCase
+{
+    public function test_top_level_attributes_match(): void
+    {
+        $topLevelAttributesArray = $this->basicTable->getTopLevelAttributesArray();
+        $this->assertSame('shouldBeDisplayed', $topLevelAttributesArray['x-show']);
+        $this->assertSame('showTable(event)', $topLevelAttributesArray['x-on:show-table.window']);
+        $this->assertSame('hideTable(event)', $topLevelAttributesArray['x-on:hide-table.window']);
+        $this->assertSame('laravellivewiretable($wire)', $topLevelAttributesArray['x-data']);
+    }
+
+    public function test_top_level_attribute_bag_matches(): void
+    {
+        $topLevelAttributeBag = $this->basicTable->getTopLevelAttributes();
+
+        $topLevelAttributesArray = $topLevelAttributeBag->getAttributes();
+
+        $this->assertSame('shouldBeDisplayed', $topLevelAttributesArray['x-show']);
+        $this->assertSame('showTable(event)', $topLevelAttributesArray['x-on:show-table.window']);
+        $this->assertSame('hideTable(event)', $topLevelAttributesArray['x-on:hide-table.window']);
+        $this->assertSame('laravellivewiretable($wire)', $topLevelAttributesArray['x-data']);
+    }
+}

tests/Traits/Visuals/SortingVisualsTest.php

@@ -121,7 +121,6 @@ public function test_multiple_sorting_pill_shows_with_single_column_off(): void
     public function test_sorting_pill_shows_correct_name_and_direction(): void
     {
         Livewire::test(PetsTable::class)
-            ->assertDontSee('Key')
             ->call('sortBy', 'id')
             ->assertSee('Key')
             ->assertSee('0-9')