row-details · Admiral UI kit

Example

	Platform	Status
	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

Prop	Required	Default
`id`	yes
`colspan`		`1`
`open`		`false`

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

Other stacks

React and Vue: import { RowDetails } 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>