Screencasts: Building Data Tables

#1

Hi
finally I found out screencasts section of livewire :wink: It’s great! Awesome!
Ok, I trying to repeat Building data tables screencast but get error from first seconds.

    <x-table>
        <x-slot name="head">
        </x-slot>
    </x-table>

returns Unable to locate a class or view for component [table]
Why? Where should I take this component.

PS
In fact, I don’t need to build tables, but I liked how quickly the author add sorting into the table header.

#2

Hey, @RizONEnew

Just check the name of the component, or if you are creating the component inside a specific folder you should put the name before the component name.

EX:

php artisan make:component Dashboard/Table

it will

<x-dashboard.table>
#3

What you are stuck on is a feature of Laravel, not Livewire. Make sure you check the docs for Laravel blade components.

https://laravel.com/docs/8.x/blade#components

#4

Thanks a lot.
I understand how <x-table> is work. But about about ‘sortable’. What is it? Is this some kind of standard livewire property or something else?

#5

sortable it means if the column sorted or not (e.g: desc, asc)

#6

You do not understand at all, or I do not explain well. I know what sortable is and I understand the meaning of this word. But if I do

<table class = "table-fixed w-full">
 <thead>
    <tr class = "bg-gray-100">
       <th class = "px-4 py-2 w-20" sortable> No. </th>
   </tr>
</thead>

the column will not become sortable and will not change when you hover over it. This is done by javascript or some other way. How does the column behavior change from the appearance of the word sortable?

#7

please explain with this sortable property

#8

Have found everything I was looking for at
Jack of Traits Laravel Livewire Tutorial: Datatable Made Easy! (part 10).
Thanks a lot