<div>
    @foreach($toolbars as $toolbar)
        {{ $toolbar?->render() }}
    @endforeach
    <table class="table">
        <colgroup>
            @foreach($columns as $column)
                <col @class([$column->getColClass()]) />
            @endforeach
        </colgroup>
        <thead>
            <tr>
                @foreach($columns as $column)
                    <th
                        scope="col"
                    >
                        <div
                            @class([
                                'ordered' => $column->isSortable(),
                                'ordered-asc' => $column->name === $order && $orderDirection === 'asc',
                                'ordered-desc' => $column->name === $order && $orderDirection === 'desc',
                            ])
                            @if($column->isSortable())
                                wire:click="orderBy('{{ $column->name }}')"
                            @endif
                        >
                            {{ $column->getTitle() }}
                        </div>
                    </th>
                @endforeach
            </tr>
        </thead>
        <tbody>
            @foreach($data as $row)
                <tr>
                    @foreach($columns as $column)
                        {{ $column->view($row) }}
                    @endforeach
                </tr>
            @endforeach
        </tbody>
    </table>
    <div class="table-pagination d-flex justify-content-between align-items-center">
        {{ $data->links() }}
        <div>
            {{ __('Showing') }} {{ $data->count() }}
            {{ __('of') }} {{ $data->total() }}

        </div>
    </div>
</div>