Create an option for disabling clickable rows in mary-table component

[joaoclobocar]

Inspecting the code, I have found that mary-table have the JSON object properties for each table row.

This is useful if I want to act over onclick events, but generates an extra HTML verbosity and exposes additional data.

So, I could suggest to introduce an attribute for creating passive rows tables:

    <x-mary-table :headers="$this->getHeaders()" :rows="$this->getRows()" passive-rows striped>

An addition to that would be to control if I want to expose all the properties or choose only one from the row object:

    <x-mary-table :headers="$this->getHeaders()" :rows="$this->getRows()" click-row-property="id" striped>

[robsontenorio]

The best approach is to generate this extra code only when using collapse or selectable options, instead of an extra parameter. Nice advice, thanks!

[robsontenorio]

Could you please try this branch? Let me know if it's ok.

composer require robsontenorio/mary:dev-table-improvements
 php artisan view:clear

[joaoclobocar]

OK, the extra code is not there, thanks.

May be I am doing something wrong, but when I added the selectable option the checkbox appeared, but clicking on it over one row, all the checkbox toggle to on/off.

<!-- ROWS -->
  <tbody>
    @foreach($rows as $k => $row)
    <tr
    wire:key="{{ $uuid }}-{{ $k }}"
    class="hover:bg-base-200/50 {{ $rowClasses($row) }}"
    @if($attributes->has('@row-click'))
     @click="$dispatch('row-click', {{ json_encode($row) }});"
   @endif

I don't think encoding the entire $row is allways necessary. For example, we can have several mary-tabs for same $rows.

We could have an option for what column of row to encode.

...
    @if($attributes->has('@row-click-column-key'))
     @click="$dispatch('row-click', {{ json_encode( $row->the_column_key_here ) }});"
    @elseif($attributes->has('@row-click'))
     @click="$dispatch('row-click', {{ json_encode($row) }});"
   @endif

Something like that.

[robsontenorio]

I wasn’t expecting this bug about clicking one row make all of them checked.

Any errors on console ? Have you cleared the view cache after installing that branch ? Could you provide a minimal code to reproduce it ?

[joaoclobocar]

    <x-mary-table selectable :headers="$this->getHeaders()" :rows="$this->familias()" striped>

I have this on console:

and more here:

[robsontenorio]

What do you have in “$this->familias()” and “$this->getHeaders()” ?

Are you sure you have the latest commit from that branch ? Please require it again.

[joaoclobocar]

    #[Computed]
    public function familias() : Collection
    {
        return Familia::orderBy('id', 'DESC')->orderBy('created_at', 'DESC')->get();
    }

    public function getHeaders() {
        return [
            ['key' => 'created_at', 'label' => _tr('Data da inclusão'), 'class' => ''],
            ['key' => 'nome_familia', 'label' => _tr('Nome da família'), 'class' => ''],
            ['key' => 'versao', 'label' => _tr('Versão'), 'class' => ''],
            ['key' => 'complemento_versao', 'label' => _tr('Complemento'), 'class' => ''],
        ];
    }

Double checked the latest commit. I am using it.

[robsontenorio]

That should work even on latest stable version.

[joaoclobocar]

Could reproduce here.

Putting a public variable for the component throws the exception.

<?php

use App\Models\User;
use Illuminate\Support\Collection;
use Livewire\Attributes\Layout;
use Livewire\Attributes\Computed;
use Livewire\Volt\Component;

new #[Layout('layouts.portal')] class extends Component {

    public $publicHere;

    #[Computed]
    public function familias(): Collection
    {
        return User::orderBy('id', 'DESC')->orderBy('created_at', 'DESC')->get();
    }

    public function getHeaders()
    {
        return [
            ['key' => 'created_at', 'label' => 'Data da inclusão', 'class' => ''],
            ['key' => 'nome_familia', 'label' => 'Nome da família', 'class' => ''],
            ['key' => 'versao', 'label' => 'Versão', 'class' => ''],
            ['key' => 'complemento_versao', 'label' => 'Complemento', 'class' => ''],
        ];
    }

}
?>

<div>

    <x-mary-table selectable :headers="$this->getHeaders()" :rows="$this->familias()" />

</div>

[robsontenorio]

But it has nothing todo with the table component. It is a Livewire thing.

[joaoclobocar]

I understand, sorry.

I have started to use livewire/volt recently and I don't know how to help you more.

Thanks.

[robsontenorio]

You have missed the wire:model to bind the selection.

https://mary-ui.com/docs/components/table#row-selection

[joaoclobocar]

Thank you!