Component Class

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\DummyProduct;
use Livewire\WithPagination;

class DataTableComponent extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';

    public $orderByColumn = 'title', $order = 'asc';
    protected $paginate = 10;

    public $searchColumns = [
        'title' => '',
        'description' => '',
        'price' => [
            'startingPrice' => '',
            'endingPrice' => '',
        ],
    ];

    public function render()
    {
        return view('livewire.data-table-component');
    }

    public function sortBy($column)
    {
        if ($this->orderByColumn == $column) {
            $this->order = $this->order == 'asc' ? 'desc' : 'asc';
        }

        $this->orderByColumn = $column;
    }

    public function getDummyProductsQueryProperty()
    {
        return DummyProduct::query()
            ->orderBy($this->orderByColumn, $this->order)
            ->when($this->searchColumns['title'], function ($query) {
                $query->whereLike('title', trim($this->searchColumns['title']));
            })
            ->when($this->searchColumns['description'], function ($query) {
                $query->whereLike('description', trim($this->searchColumns['description']));
            })
            ->when($this->searchColumns['price']['startingPrice'], function ($query) {
                $query->filterPrice('>=', trim($this->searchColumns['price']['startingPrice']));
            })
            ->when($this->searchColumns['price']['endingPrice'], function ($query) {
                $query->filterPrice('<=', trim($this->searchColumns['price']['endingPrice']));
            });
    }

    public function getDummyProductsProperty()
    {
        return $this->dummyProductsQuery->paginate($this->paginate);
    }
}

Component View File

<div class="tw-py-10">
    <div class="tw-mx-auto tw-max-w-7xl">
        <div class="tw-px-4 sm:tw-px-6 lg:tw-px-8">
            <div class="sm:tw-flex sm:items-center tw-mb-4">
                <h2 class="fw-bold blue-heading">
                    Datatables with Search and Filters
                </h2>
            </div>
            <div class="alert alert-info tw-m-0">
                You can filter the data by searching for name/price/description, also use
                sorting and pagination.
            </div>
            <div class="tw-mt-8 tw-flex tw-flex-col">
                <div class="tw--my-2 tw--mx-4 overflow-x-auto sm:tw--mx-6 lg:tw--mx-8">
                    <div class="tw-inline-block tw-min-w-full tw-py-2 tw-align-middle md:tw-px-6 lg:tw-px-8">
                        <div
                            class="tw-overflow-hidden tw-shadow tw-ring-1 tw-ring-black tw-ring-opacity-5 md:tw-rounded-lg">
                            <table class="tw-min-w-full tw-divide-y tw-divide-gray-300">
                                <thead class="tw-bg-gray-50">
                                    <tr>
                                        <th wire:click="sortBy('title')" scope="tw-col"
                                            class="tw-py-3.5 tw-pl-4 tw-pr-3 tw-text-left tw-text-sm tw-font-semibold tw-text-gray-900 sm:tw-pl-6 tw-cursor-pointer">
                                            Title
                                            @if ($this->order == 'asc' && $this->orderByColumn == 'title')
                                                <i class="fa fa-fw fa-sort-desc"></i>
                                            @elseif ($this->order == 'desc' && $this->orderByColumn == 'title')
                                                <i class="fa fa-fw fa-sort-asc"></i>
                                            @else
                                                <i class="fa fa-fw fa-sort"></i>
                                            @endif
                                            </span>
                                        </th>
                                        <th wire:click="sortBy('description')" scope="tw-col"
                                            class="tw-py-3.5 tw-pl-4 tw-pr-3 tw-text-left tw-text-sm tw-font-semibold tw-text-gray-900 sm:tw-pl-6 tw-cursor-pointer">
                                            Description
                                            @if ($this->order == 'asc' && $this->orderByColumn == 'description')
                                                <i class="fa fa-fw fa-sort-desc"></i>
                                            @elseif ($this->order == 'desc' && $this->orderByColumn == 'description')
                                                <i class="fa fa-fw fa-sort-asc"></i>
                                            @else
                                                <i class="fa fa-fw fa-sort"></i>
                                            @endif
                                            </span>
                                        </th>
                                        <th wire:click="sortBy('price')" scope="tw-col"
                                            class="tw-py-3.5 tw-pl-4 tw-pr-3 tw-text-left tw-text-sm tw-font-semibold tw-text-gray-900 sm:tw-pl-6 tw-cursor-pointer">
                                            Price
                                            @if ($this->order == 'asc' && $this->orderByColumn == 'price')
                                                <i class="fa fa-fw fa-sort-desc"></i>
                                            @elseif ($this->order == 'desc' && $this->orderByColumn == 'price')
                                                <i class="fa fa-fw fa-sort-asc"></i>
                                            @else
                                                <i class="fa fa-fw fa-sort"></i>
                                            @endif
                                            </span>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="tw-divide-y tw-divide-gray-200 tw-bg-white">
                                    <tr>
                                        <td
                                            class="tw-whitespace-nowrap tw-py-4 tw-pl-4 tw-pr-3 tw-text-sm tw-font-medium tw-text-gray-900 sm:tw-pl-6">
                                            <input type="text" placeholder="Search..."
                                                class="tw-mt-2 tw-text-sm sm:tw-text-base tw-pl-2 tw-pr-4 tw-rounded-lg tw-border tw-border-gray-400 tw-w-full tw-py-1 focus:tw-outline-none focus:tw-border-blue-400"
                                                autocomplete="off" wire:model="searchColumns.title">
                                        </td>
                                        <td class="tw-whitespace-nowrap tw-px-3 tw-py-4 tw-text-sm tw-text-gray-500">
                                            <input type="text" placeholder="Search..."
                                                class="tw-mt-2 tw-text-sm sm:tw-text-base tw-pl-2 tw-pr-4 tw-rounded-lg tw-border tw-border-gray-400 tw-w-full tw-py-1 focus:tw-outline-none focus:tw-border-blue-400"
                                                autocomplete="off" wire:model="searchColumns.description">
                                        </td>
                                        <td class="tw-whitespace-nowrap tw-px-3 tw-py-4 tw-text-sm tw-text-gray-500">
                                            <label for="startingPrice">From</label>
                                            <input id="startingPrice" wire:model="searchColumns.price.startingPrice"
                                                type="number"
                                                class="tw-mt-2 tw-text-sm sm:tw-text-base tw-pl-2 tw-pr-4 tw-rounded-lg tw-border tw-border-gray-400 tw-w-full tw-py-1 focus:tw-outline-none focus:tw-border-blue-400"
                                                style="width: 70px">

                                            <label for="endingPrice">To</label>
                                            <input id="endingPrice" wire:model="searchColumns.price.endingPrice"
                                                type="number"
                                                class="tw-mt-2 tw-text-sm sm:tw-text-base tw-pl-2 tw-pr-4 tw-rounded-lg tw-border tw-border-gray-400 tw-w-full tw-py-1 focus:tw-outline-none focus:tw-border-blue-400"
                                                style="width: 70px">
                                        </td>
                                    </tr>

                                    @foreach ($this->dummyProducts as $product)
                                        <tr>
                                            <td
                                                class="tw-whitespace-nowrap tw-py-4 tw-pl-4 tw-pr-3 tw-text-sm tw-font-medium tw-text-gray-900 sm:tw-pl-6">
                                                {{ $product->title }}
                                            </td>
                                            <td
                                                class="tw-whitespace-nowrap tw-px-3 tw-py-4 tw-text-sm tw-text-gray-500">
                                                {{ $product->description ?? '' }}
                                            </td>
                                            <td
                                                class="tw-whitespace-nowrap tw-px-3 tw-py-4 tw-text-sm tw-text-gray-500">
                                                {{ $product->price ?? '' }}
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <div class="tw-my-3">
                                {{ $this->dummyProducts->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>