row-toggle

The button that opens a row-details row.

Example

PlatformStatus
Njuko Active
Last synced 4 minutes ago. Sends entry_granted.

Laravel

<x-admin::table>
    <x-slot:head><th class="adm-shrink"></th><th>Platform</th><th>Status</th></x-slot:head>
    <tr>
        <td class="adm-shrink"><x-admin::row-toggle for="g-row-1" label="Show details for Njuko" /></td>
        <td>Njuko</td>
        <td><x-admin::badge variant="success" dot>Active</x-admin::badge></td>
    </tr>
    <x-admin::row-details id="g-row-1" :colspan="3">Last synced 4 minutes ago. Sends entry_granted.</x-admin::row-details>
</x-admin::table>

Props

PropRequiredDefaultOptions
foryes
labelnull
openfalse

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

Other stacks

React and Vue: import { RowToggle } 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">
                    <table class="adm-table">
                <thead><tr><th class="adm-shrink"></th><th>Platform</th><th>Status</th></tr></thead>                <tbody><tr>
        <td class="adm-shrink"><button type="button" class="adm-btn adm-btn--ghost adm-btn--square adm-btn--sm adm-row-toggle" data-adm-expand="g-row-1" aria-expanded="false" aria-controls="g-row-1" aria-label="Show details for Njuko"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
</td>
        <td>Njuko</td>
        <td><span class="adm-badge adm-badge--success adm-badge--dot">Active</span>
</td>
    </tr>
    <tr id="g-row-1" class="adm-table__details" ><td colspan="3">Last synced 4 minutes ago. Sends entry_granted.</td></tr></tbody>
            </table>
            </div>
    </div>