Portal UI

Table

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>

Publishing Component

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