table

A data table in a card, with toolbar, empty state and footer slots.

Example

No segments yet

Segments group members and push them to your platforms.

Laravel

<x-admin::table :is-empty="true">
    <x-slot:empty><x-admin::empty title="No segments yet" description="Segments group members and push them to your platforms." icon="layers"><x-slot:actions><x-admin::button variant="primary" icon="plus">New segment</x-admin::button></x-slot:actions></x-admin::empty></x-slot:empty>
</x-admin::table>

Props

PropRequiredDefaultOptions
is-emptyfalse
barefalse

Slots: toolbar, empty, head, footer

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Table } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<div class="adm-card adm-card--flush">
        <div class="adm-table-wrap">
                    <div class="adm-empty">
    <div class="adm-empty__icon"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></div>
    <div class="adm-empty__text">
        <h3 class="adm-heading">No segments yet</h3>
        <p>Segments group members and push them to your platforms.</p>    </div>
    <div class="adm-row"><button type="button" class="adm-btn adm-btn--primary" ><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>New segment</button></div></div>            </div>
    </div>