Installation

Simple Laravel Livewire datatable! You can easily manage data with one library!

install via composer

composer require devaweb/livewire-data-table

Usage

@livewire('livewire-data-table', [], key('unique-key'))

Props

Configuration properties!

Model

Add the table model class of the table you want to manage! It is required!

@livewire('livewire-data-table', [
    'model' => \App\Models\User::class
])

Columns

For initial setup, you must add some columns here as an array!
After then you can manage columns in Livewire data table GUI!

@livewire('livewire-data-table', [
    'model' => \App\Models\User::class,
    'columns' => ['id','name','email','role']
])

Sortable

Add sortable columns (ASC or DESC) It's also you can manage in GUI!

@livewire('livewire-data-table', [
    'model' => \App\Models\User::class,
    'columns' => ['id','name','email','role'],
    'sortable' => ['id']
])

Searchable

Add searchable columns! It's also you can manage in GUI!

If it is empty, you can't search for anything!

@livewire('livewire-data-table', [
    'model' => \App\Models\User::class,
    'columns' => ['id','name','email','role'],
    'searchable' => ['id','name','email']
])

Editable

Add editable columns! It enables the inline edit of the data for that column.
It's also you can manage in GUI!

Editable options should be like this!

    $editable => [
        'name' => [
            // text | textarea | select
            'inputtype' => 'text'
            // options used in input type 'select'
            'options' => ['Jo', 'vwe', 'so']
        ]
    ];

@livewire('livewire-data-table', [
    'model' => \App\Models\User::class,
    'columns' => ['id','name','email','role'],
    'searchable' => ['id','name','email'],
    'editable' => $editable
])

PerPage

It is determined how many rows want to display in the table per page!
It's also you can manage in GUI!

@livewire('livewire-data-table', [
    'model' => \App\Models\User::class,
    'columns' => ['id','name','email','role'],
    'searchable' => ['id','name','email'],
    'editable' => $editable,

    'perPage' => 15 // default value is 15

])

AddNew

Livewire component for adding new data to the table!

    $addNew = [
        'component' => 'add-new-user' // your component name
        'params' => []
    ];

    @livewire('livewire-data-table', [
        'model' => \App\Models\User::class,
        'columns' => ['id','name','email','role'],
        'searchable' => ['id','name','email'],
        'editable' => $editable,
        'perPage' => 15

        'addNew' => $addNew
    ])

Customizable

This property determines whether or not to show the area with customizable options!

Default is TRUE.

    @livewire('livewire-data-table', [
        'model' => \App\Models\User::class,
        'columns' => ['id','name','email','role'],
        'searchable' => ['id','name','email'],
        'editable' => $editable,
        'perPage' => 15
        'addNew' => $addNew

        'customizable' => true

    ])

Hide Columns

If you want to hide columns from approachable from the GUI,
Write this function in your Model Class

    public function hiddenColumns(): array {
        return [
            'created_at',
            'updated_at'
        ];
    }