A responsive table component.
Name | Age | Address | Address | Address |
Action
|
---|---|---|---|---|---|
Richard Hendricks | 30 | Pied Piper HQ, Palo Alto | Pied Piper HQ, Palo Alto | Pied Piper HQ, Palo Alto |
|
Richard Hendricks | 30 | Pied Piper HQ, Palo Alto | Pied Piper HQ, Palo Alto | Pied Piper HQ, Palo Alto |
|
Richard Hendricks | 30 | Pied Piper HQ, Palo Alto | Pied Piper HQ, Palo Alto | Pied Piper HQ, Palo Alto |
|
Richard Hendricks | 30 | Pied Piper HQ, Palo Alto | Pied Piper HQ, Palo Alto | Pied Piper HQ, Palo Alto |
|
Richard Hendricks | 30 | Pied Piper HQ, Palo Alto | Pied Piper HQ, Palo Alto | Pied Piper HQ, Palo Alto |
|
<x-portal::table>
<thead>
<x-portal::table.row class="!text-neutral-800">
<x-portal::table.head sortable key="name">Name</x-portal::table.head>
<x-portal::table.head sortable key="age">Age</x-portal::table.head>
<x-portal::table.head sortable key="address">Address</x-portal::table.head>
<x-portal::table.head sortable key="address">Address</x-portal::table.head>
<x-portal::table.head sortable key="address">Address</x-portal::table.head>
<x-portal::table.head class="text-right">Action</x-portal::table.head>
</x-portal::table.row>
</thead>
<tbody class="divide-y divide-border">
@for($i = 0; $i < 5; $i++)
<x-portal::table.row>
<x-portal::table.cell class="font-medium">Richard Hendricks</x-portal::table.cell>
<x-portal::table.cell>30</x-portal::table.cell>
<x-portal::table.cell>Pied Piper HQ, Palo Alto</x-portal::table.cell>
<x-portal::table.cell>Pied Piper HQ, Palo Alto</x-portal::table.cell>
<x-portal::table.cell>Pied Piper HQ, Palo Alto</x-portal::table.cell>
<x-portal::table.cell class="font-medium text-right">
<x-portal::dropdown-menu class="flex justify-end">
<x-portal::dropdown-menu.trigger variant="ghost" class="h-fit !px-1 !py-1">
<x-tabler-dots class="h-4.5" />
</x-portal::dropdown-menu.trigger>
<x-portal::dropdown-menu.content class="w-fit" align="end">
<x-portal::dropdown-menu.item>
Edit
</x-portal::dropdown-menu.item>
<x-portal::dropdown-menu.item variant="danger">
Delete
</x-portal::dropdown-menu.item>
</x-portal::dropdown-menu.content>
</x-portal::dropdown-menu>
</x-portal::table.cell>
</x-portal::table.row>
@endfor
</tbody>
</x-portal::table>
If you want to customize the components, you can publish them by running the following command :
php artisan vendor:publish --tag=portal-ui:table --force