Tailwind CSS Data Table
A data table for Tailwind CSS with sorting, filters, and pagination. Use it for admin lists like members, orders, and files. Built with the table, badge, and dropdown components.
<section class="flex w-full flex-col gap-4">
<div class="space-y-1">
<h2 class="text-lg font-semibold tracking-tight">Team members</h2>
<p class="text-sm text-muted-foreground">
Everyone with access to the workspace.
</p>
</div>
<div class="flex items-center gap-2 sm:hidden">
<input
class="input input-sm flex-1"
placeholder="Filter members..."
aria-label="Filter members..."
/><button
type="button"
class="btn btn-outline btn-sm"
id="data-table-filters"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon-start"
>
<path d="M2 5h20"></path>
<path d="M6 12h12"></path>
<path d="M9 19h6"></path></svg
>Filters<span
class="badge h-4 min-w-4 rounded-full px-1 tabular-nums hidden"
data-filter-count=""
>0</span
></button
><button
type="button"
class="btn btn-sm btn-icon"
aria-label="Invite member"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<line x1="19" x2="19" y1="8" y2="14"></line>
<line x1="22" x2="16" y1="11" y2="11"></line>
</svg>
</button>
</div>
<dialog class="drawer" data-sp-toggle="#data-table-filters">
<div class="drawer-panel">
<div class="drawer-header">
<h2 class="drawer-title">Filters</h2>
<p class="drawer-description">Narrow the list by status and role.</p>
</div>
<div class="drawer-content">
<div class="grid grid-cols-2 gap-6" data-facet="">
<fieldset class="field-set gap-3">
<legend class="field-legend field-legend-label">Status</legend>
<div class="field field-horizontal">
<input
type="checkbox"
class="checkbox"
id="data-table-filters-status-active"
name="status"
value="Active"
/><label
class="label font-normal"
for="data-table-filters-status-active"
>Active</label
>
</div>
<div class="field field-horizontal">
<input
type="checkbox"
class="checkbox"
id="data-table-filters-status-invited"
name="status"
value="Invited"
/><label
class="label font-normal"
for="data-table-filters-status-invited"
>Invited</label
>
</div>
<div class="field field-horizontal">
<input
type="checkbox"
class="checkbox"
id="data-table-filters-status-suspended"
name="status"
value="Suspended"
/><label
class="label font-normal"
for="data-table-filters-status-suspended"
>Suspended</label
>
</div>
</fieldset>
<fieldset class="field-set gap-3">
<legend class="field-legend field-legend-label">Role</legend>
<div class="field field-horizontal">
<input
type="checkbox"
class="checkbox"
id="data-table-filters-role-owner"
name="role"
value="Owner"
/><label
class="label font-normal"
for="data-table-filters-role-owner"
>Owner</label
>
</div>
<div class="field field-horizontal">
<input
type="checkbox"
class="checkbox"
id="data-table-filters-role-admin"
name="role"
value="Admin"
/><label
class="label font-normal"
for="data-table-filters-role-admin"
>Admin</label
>
</div>
<div class="field field-horizontal">
<input
type="checkbox"
class="checkbox"
id="data-table-filters-role-member"
name="role"
value="Member"
/><label
class="label font-normal"
for="data-table-filters-role-member"
>Member</label
>
</div>
<div class="field field-horizontal">
<input
type="checkbox"
class="checkbox"
id="data-table-filters-role-viewer"
name="role"
value="Viewer"
/><label
class="label font-normal"
for="data-table-filters-role-viewer"
>Viewer</label
>
</div>
</fieldset>
</div>
</div>
<div class="drawer-footer flex-row">
<button
type="button"
class="btn btn-outline flex-1"
data-reset-filters=""
>
Reset</button
><button type="button" class="btn flex-1" data-sp-dismiss="">
Show 24 results
</button>
</div>
</div>
</dialog>
<div class="hidden flex-wrap items-center justify-between gap-2 sm:flex">
<div class="flex flex-wrap items-center gap-2">
<input
class="input input-sm w-[250px]"
placeholder="Filter members..."
aria-label="Filter members..."
/><button
type="button"
class="btn btn-outline btn-sm border-dashed"
id="data-table-status"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon-start"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M8 12h8"></path>
<path d="M12 8v8"></path></svg
>Status<span class="contents" data-facet-badges=""></span>
</button>
<div
class="dropdown min-w-40"
data-sp-toggle="#data-table-status"
data-sp-placement="bottom-start"
data-facet=""
>
<div class="dropdown-label">Status</div>
<div class="dropdown-item dropdown-item-checkbox">
<input type="checkbox" name="status" value="Active" />Active
</div>
<div class="dropdown-item dropdown-item-checkbox">
<input type="checkbox" name="status" value="Invited" />Invited
</div>
<div class="dropdown-item dropdown-item-checkbox">
<input type="checkbox" name="status" value="Suspended" />Suspended
</div>
</div>
<button
type="button"
class="btn btn-outline btn-sm border-dashed"
id="data-table-role"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon-start"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M8 12h8"></path>
<path d="M12 8v8"></path></svg
>Role<span class="contents" data-facet-badges=""></span>
</button>
<div
class="dropdown min-w-40"
data-sp-toggle="#data-table-role"
data-sp-placement="bottom-start"
data-facet=""
>
<div class="dropdown-label">Role</div>
<div class="dropdown-item dropdown-item-checkbox">
<input type="checkbox" name="role" value="Owner" />Owner
</div>
<div class="dropdown-item dropdown-item-checkbox">
<input type="checkbox" name="role" value="Admin" />Admin
</div>
<div class="dropdown-item dropdown-item-checkbox">
<input type="checkbox" name="role" value="Member" />Member
</div>
<div class="dropdown-item dropdown-item-checkbox">
<input type="checkbox" name="role" value="Viewer" />Viewer
</div>
</div>
<button
type="button"
class="btn btn-ghost btn-sm hidden"
data-reset-filters=""
>
Reset<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon-end"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="flex gap-2">
<button type="button" class="btn btn-outline btn-sm" id="data-table-view">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon-start"
>
<path d="M10 5H3"></path>
<path d="M12 19H3"></path>
<path d="M14 3v4"></path>
<path d="M16 17v4"></path>
<path d="M21 12h-9"></path>
<path d="M21 19h-5"></path>
<path d="M21 5h-7"></path>
<path d="M8 10v4"></path>
<path d="M8 12H3"></path></svg
>View
</button>
<div
class="dropdown min-w-40"
data-sp-toggle="#data-table-view"
data-sp-placement="bottom-end"
>
<div class="dropdown-label">Toggle columns</div>
<div class="dropdown-item dropdown-item-checkbox">
<input type="checkbox" name="data-table-view-role" checked="" />Role
</div>
<div class="dropdown-item dropdown-item-checkbox">
<input
type="checkbox"
name="data-table-view-status"
checked=""
/>Status
</div>
<div class="dropdown-item dropdown-item-checkbox">
<input
type="checkbox"
name="data-table-view-last-active"
checked=""
/>Last active
</div>
</div>
<button type="button" class="btn btn-sm">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon-start"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<line x1="19" x2="19" y1="8" y2="14"></line>
<line x1="22" x2="16" y1="11" y2="11"></line></svg
>Invite member
</button>
</div>
</div>
<div class="overflow-hidden rounded-lg border">
<div class="table-container scrollbar scrollbar-sm">
<table class="table">
<thead class="table-header">
<tr class="table-row">
<th class="table-head w-10 ps-3">
<input
type="checkbox"
class="checkbox"
aria-label="Select all members"
data-sp-toggle-all=""
/>
</th>
<th class="table-head">
<button type="button" class="btn btn-ghost btn-sm -ms-3">
Member<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon-end"
>
<path d="m21 16-4 4-4-4"></path>
<path d="M17 20V4"></path>
<path d="m3 8 4-4 4 4"></path>
<path d="M7 4v16"></path>
</svg>
</button>
</th>
<th class="table-head">Role</th>
<th class="table-head">Status</th>
<th class="table-head">
<button type="button" class="btn btn-ghost btn-sm -ms-3">
Last active<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon-end"
>
<path d="m21 16-4 4-4-4"></path>
<path d="M17 20V4"></path>
<path d="m3 8 4-4 4 4"></path>
<path d="M7 4v16"></path>
</svg>
</button>
</th>
<th class="table-head w-12">
<span class="sr-only">Actions</span>
</th>
</tr>
</thead>
<tbody class="table-body">
<tr class="table-row">
<td class="table-cell ps-3">
<input
type="checkbox"
class="checkbox"
aria-label="Select Leila Navarro"
/>
</td>
<td class="table-cell">
<div class="flex items-center gap-3">
<span class="avatar"
><img
class="avatar-image"
alt=""
src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
/><span class="avatar-fallback">LN</span></span
>
<div class="flex flex-col">
<span class="font-medium">Leila Navarro</span
><span class="text-xs text-muted-foreground"
>[email protected]</span
>
</div>
</div>
</td>
<td class="table-cell">Owner</td>
<td class="table-cell">
<span class="badge badge-outline gap-1.5"
><span class="size-1.5 rounded-full bg-emerald-500"></span
>Active</span
>
</td>
<td class="table-cell text-muted-foreground">Just now</td>
<td class="table-cell">
<button
type="button"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
id="data-table-0-menu"
aria-label="Open menu for Leila Navarro"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown min-w-40"
data-sp-toggle="#data-table-0-menu"
data-sp-placement="bottom-end"
>
<button type="button" class="dropdown-item">Edit profile</button
><button
type="button"
class="dropdown-item"
id="data-table-0-role"
>
Change role<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg></button
><button
type="button"
class="dropdown-item"
id="data-table-0-status"
>
Change status<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
<div class="dropdown-separator"></div>
<button
type="button"
class="dropdown-item dropdown-item-destructive"
>
Remove from team
</button>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-0-role"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-0-role"
checked=""
value="Owner"
/>Owner
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-0-role"
value="Admin"
/>Admin
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-0-role"
value="Member"
/>Member
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-0-role"
value="Viewer"
/>Viewer
</div>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-0-status"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-0-status"
checked=""
value="Active"
/>Active
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-0-status"
value="Suspended"
/>Suspended
</div>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-3">
<input
type="checkbox"
class="checkbox"
aria-label="Select Maya Santoso"
/>
</td>
<td class="table-cell">
<div class="flex items-center gap-3">
<span class="avatar"
><img
class="avatar-image"
alt=""
src="https://images.unsplash.com/photo-1573497019236-17f8177b81e8?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
/><span class="avatar-fallback">MS</span></span
>
<div class="flex flex-col">
<span class="font-medium">Maya Santoso</span
><span class="text-xs text-muted-foreground"
>[email protected]</span
>
</div>
</div>
</td>
<td class="table-cell">Admin</td>
<td class="table-cell">
<span class="badge badge-outline gap-1.5"
><span class="size-1.5 rounded-full bg-emerald-500"></span
>Active</span
>
</td>
<td class="table-cell text-muted-foreground">12 minutes ago</td>
<td class="table-cell">
<button
type="button"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
id="data-table-1-menu"
aria-label="Open menu for Maya Santoso"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown min-w-40"
data-sp-toggle="#data-table-1-menu"
data-sp-placement="bottom-end"
>
<button type="button" class="dropdown-item">Edit profile</button
><button
type="button"
class="dropdown-item"
id="data-table-1-role"
>
Change role<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg></button
><button
type="button"
class="dropdown-item"
id="data-table-1-status"
>
Change status<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
<div class="dropdown-separator"></div>
<button
type="button"
class="dropdown-item dropdown-item-destructive"
>
Remove from team
</button>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-1-role"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-1-role"
value="Owner"
/>Owner
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-1-role"
checked=""
value="Admin"
/>Admin
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-1-role"
value="Member"
/>Member
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-1-role"
value="Viewer"
/>Viewer
</div>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-1-status"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-1-status"
checked=""
value="Active"
/>Active
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-1-status"
value="Suspended"
/>Suspended
</div>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-3">
<input
type="checkbox"
class="checkbox"
aria-label="Select Sofia Lindqvist"
checked=""
/>
</td>
<td class="table-cell">
<div class="flex items-center gap-3">
<span class="avatar"
><img
class="avatar-image"
alt=""
src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
/><span class="avatar-fallback">SL</span></span
>
<div class="flex flex-col">
<span class="font-medium">Sofia Lindqvist</span
><span class="text-xs text-muted-foreground"
>[email protected]</span
>
</div>
</div>
</td>
<td class="table-cell">Member</td>
<td class="table-cell">
<span class="badge badge-outline gap-1.5"
><span class="size-1.5 rounded-full bg-emerald-500"></span
>Active</span
>
</td>
<td class="table-cell text-muted-foreground">2 hours ago</td>
<td class="table-cell">
<button
type="button"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
id="data-table-2-menu"
aria-label="Open menu for Sofia Lindqvist"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown min-w-40"
data-sp-toggle="#data-table-2-menu"
data-sp-placement="bottom-end"
>
<button type="button" class="dropdown-item">Edit profile</button
><button
type="button"
class="dropdown-item"
id="data-table-2-role"
>
Change role<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg></button
><button
type="button"
class="dropdown-item"
id="data-table-2-status"
>
Change status<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
<div class="dropdown-separator"></div>
<button
type="button"
class="dropdown-item dropdown-item-destructive"
>
Remove from team
</button>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-2-role"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-2-role"
value="Owner"
/>Owner
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-2-role"
value="Admin"
/>Admin
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-2-role"
checked=""
value="Member"
/>Member
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-2-role"
value="Viewer"
/>Viewer
</div>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-2-status"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-2-status"
checked=""
value="Active"
/>Active
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-2-status"
value="Suspended"
/>Suspended
</div>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-3">
<input
type="checkbox"
class="checkbox"
aria-label="Select Anouk Visser"
/>
</td>
<td class="table-cell">
<div class="flex items-center gap-3">
<span class="avatar"
><img
class="avatar-image"
alt=""
src="https://images.unsplash.com/photo-1513673054901-2b5f51551112?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
/><span class="avatar-fallback">AV</span></span
>
<div class="flex flex-col">
<span class="font-medium">Anouk Visser</span
><span class="text-xs text-muted-foreground"
>[email protected]</span
>
</div>
</div>
</td>
<td class="table-cell">Member</td>
<td class="table-cell">
<span class="badge badge-outline gap-1.5"
><span class="size-1.5 rounded-full bg-blue-500"></span
>Invited</span
>
</td>
<td class="table-cell text-muted-foreground">Never</td>
<td class="table-cell">
<button
type="button"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
id="data-table-3-menu"
aria-label="Open menu for Anouk Visser"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown min-w-40"
data-sp-toggle="#data-table-3-menu"
data-sp-placement="bottom-end"
>
<button type="button" class="dropdown-item">Edit profile</button
><button
type="button"
class="dropdown-item"
id="data-table-3-role"
>
Change role<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg></button
><button
type="button"
class="dropdown-item"
id="data-table-3-status"
>
Change status<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
<div class="dropdown-separator"></div>
<button
type="button"
class="dropdown-item dropdown-item-destructive"
>
Remove from team
</button>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-3-role"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-3-role"
value="Owner"
/>Owner
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-3-role"
value="Admin"
/>Admin
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-3-role"
checked=""
value="Member"
/>Member
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-3-role"
value="Viewer"
/>Viewer
</div>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-3-status"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-3-status"
value="Active"
/>Active
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-3-status"
value="Suspended"
/>Suspended
</div>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-3">
<input
type="checkbox"
class="checkbox"
aria-label="Select Amara Okafor"
/>
</td>
<td class="table-cell">
<div class="flex items-center gap-3">
<span class="avatar"
><img
class="avatar-image"
alt=""
src="https://images.unsplash.com/photo-1573496527892-904f897eb744?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
/><span class="avatar-fallback">AO</span></span
>
<div class="flex flex-col">
<span class="font-medium">Amara Okafor</span
><span class="text-xs text-muted-foreground"
>[email protected]</span
>
</div>
</div>
</td>
<td class="table-cell">Viewer</td>
<td class="table-cell">
<span class="badge badge-outline gap-1.5"
><span class="size-1.5 rounded-full bg-emerald-500"></span
>Active</span
>
</td>
<td class="table-cell text-muted-foreground">Yesterday</td>
<td class="table-cell">
<button
type="button"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
id="data-table-4-menu"
aria-label="Open menu for Amara Okafor"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown min-w-40"
data-sp-toggle="#data-table-4-menu"
data-sp-placement="bottom-end"
>
<button type="button" class="dropdown-item">Edit profile</button
><button
type="button"
class="dropdown-item"
id="data-table-4-role"
>
Change role<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg></button
><button
type="button"
class="dropdown-item"
id="data-table-4-status"
>
Change status<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
<div class="dropdown-separator"></div>
<button
type="button"
class="dropdown-item dropdown-item-destructive"
>
Remove from team
</button>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-4-role"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-4-role"
value="Owner"
/>Owner
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-4-role"
value="Admin"
/>Admin
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-4-role"
value="Member"
/>Member
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-4-role"
checked=""
value="Viewer"
/>Viewer
</div>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-4-status"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-4-status"
checked=""
value="Active"
/>Active
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-4-status"
value="Suspended"
/>Suspended
</div>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-3">
<input
type="checkbox"
class="checkbox"
aria-label="Select Zara Delacroix"
/>
</td>
<td class="table-cell">
<div class="flex items-center gap-3">
<span class="avatar"
><img
class="avatar-image"
alt=""
src="https://images.unsplash.com/photo-1631377307475-9acfa929b062?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
/><span class="avatar-fallback">ZD</span></span
>
<div class="flex flex-col">
<span class="font-medium">Zara Delacroix</span
><span class="text-xs text-muted-foreground"
>[email protected]</span
>
</div>
</div>
</td>
<td class="table-cell">Member</td>
<td class="table-cell">
<span class="badge badge-outline gap-1.5"
><span class="size-1.5 rounded-full bg-neutral-400"></span
>Suspended</span
>
</td>
<td class="table-cell text-muted-foreground">Aug 21, 2026</td>
<td class="table-cell">
<button
type="button"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
id="data-table-5-menu"
aria-label="Open menu for Zara Delacroix"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown min-w-40"
data-sp-toggle="#data-table-5-menu"
data-sp-placement="bottom-end"
>
<button type="button" class="dropdown-item">Edit profile</button
><button
type="button"
class="dropdown-item"
id="data-table-5-role"
>
Change role<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg></button
><button
type="button"
class="dropdown-item"
id="data-table-5-status"
>
Change status<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
<div class="dropdown-separator"></div>
<button
type="button"
class="dropdown-item dropdown-item-destructive"
>
Remove from team
</button>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-5-role"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-5-role"
value="Owner"
/>Owner
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-5-role"
value="Admin"
/>Admin
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-5-role"
checked=""
value="Member"
/>Member
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-5-role"
value="Viewer"
/>Viewer
</div>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-5-status"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-5-status"
value="Active"
/>Active
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-5-status"
checked=""
value="Suspended"
/>Suspended
</div>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-3">
<input
type="checkbox"
class="checkbox"
aria-label="Select Paulina Nowak"
/>
</td>
<td class="table-cell">
<div class="flex items-center gap-3">
<span class="avatar"
><img
class="avatar-image"
alt=""
src="https://images.unsplash.com/photo-1780733057947-7b57f5108f68?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
/><span class="avatar-fallback">PN</span></span
>
<div class="flex flex-col">
<span class="font-medium">Paulina Nowak</span
><span class="text-xs text-muted-foreground"
>[email protected]</span
>
</div>
</div>
</td>
<td class="table-cell">Admin</td>
<td class="table-cell">
<span class="badge badge-outline gap-1.5"
><span class="size-1.5 rounded-full bg-emerald-500"></span
>Active</span
>
</td>
<td class="table-cell text-muted-foreground">3 days ago</td>
<td class="table-cell">
<button
type="button"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
id="data-table-6-menu"
aria-label="Open menu for Paulina Nowak"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown min-w-40"
data-sp-toggle="#data-table-6-menu"
data-sp-placement="bottom-end"
>
<button type="button" class="dropdown-item">Edit profile</button
><button
type="button"
class="dropdown-item"
id="data-table-6-role"
>
Change role<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg></button
><button
type="button"
class="dropdown-item"
id="data-table-6-status"
>
Change status<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
<div class="dropdown-separator"></div>
<button
type="button"
class="dropdown-item dropdown-item-destructive"
>
Remove from team
</button>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-6-role"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-6-role"
value="Owner"
/>Owner
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-6-role"
checked=""
value="Admin"
/>Admin
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-6-role"
value="Member"
/>Member
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-6-role"
value="Viewer"
/>Viewer
</div>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-6-status"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-6-status"
checked=""
value="Active"
/>Active
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-6-status"
value="Suspended"
/>Suspended
</div>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-3">
<input
type="checkbox"
class="checkbox"
aria-label="Select Theo Marchetti"
/>
</td>
<td class="table-cell">
<div class="flex items-center gap-3">
<span class="avatar"
><img
class="avatar-image"
alt=""
src="https://images.unsplash.com/photo-1750390200293-92d5a788d3a2?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
/><span class="avatar-fallback">TM</span></span
>
<div class="flex flex-col">
<span class="font-medium">Theo Marchetti</span
><span class="text-xs text-muted-foreground"
>[email protected]</span
>
</div>
</div>
</td>
<td class="table-cell">Member</td>
<td class="table-cell">
<span class="badge badge-outline gap-1.5"
><span class="size-1.5 rounded-full bg-emerald-500"></span
>Active</span
>
</td>
<td class="table-cell text-muted-foreground">Sep 28, 2026</td>
<td class="table-cell">
<button
type="button"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
id="data-table-7-menu"
aria-label="Open menu for Theo Marchetti"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown min-w-40"
data-sp-toggle="#data-table-7-menu"
data-sp-placement="bottom-end"
>
<button type="button" class="dropdown-item">Edit profile</button
><button
type="button"
class="dropdown-item"
id="data-table-7-role"
>
Change role<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg></button
><button
type="button"
class="dropdown-item"
id="data-table-7-status"
>
Change status<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
<div class="dropdown-separator"></div>
<button
type="button"
class="dropdown-item dropdown-item-destructive"
>
Remove from team
</button>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-7-role"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-7-role"
value="Owner"
/>Owner
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-7-role"
value="Admin"
/>Admin
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-7-role"
checked=""
value="Member"
/>Member
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-7-role"
value="Viewer"
/>Viewer
</div>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-7-status"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-7-status"
checked=""
value="Active"
/>Active
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-7-status"
value="Suspended"
/>Suspended
</div>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-3">
<input
type="checkbox"
class="checkbox"
aria-label="Select Luca Moretti"
/>
</td>
<td class="table-cell">
<div class="flex items-center gap-3">
<span class="avatar"
><img
class="avatar-image"
alt=""
src="https://images.unsplash.com/photo-1705645930353-0e335311ef20?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
/><span class="avatar-fallback">LM</span></span
>
<div class="flex flex-col">
<span class="font-medium">Luca Moretti</span
><span class="text-xs text-muted-foreground"
>[email protected]</span
>
</div>
</div>
</td>
<td class="table-cell">Member</td>
<td class="table-cell">
<span class="badge badge-outline gap-1.5"
><span class="size-1.5 rounded-full bg-emerald-500"></span
>Active</span
>
</td>
<td class="table-cell text-muted-foreground">Sep 26, 2026</td>
<td class="table-cell">
<button
type="button"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
id="data-table-8-menu"
aria-label="Open menu for Luca Moretti"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown min-w-40"
data-sp-toggle="#data-table-8-menu"
data-sp-placement="bottom-end"
>
<button type="button" class="dropdown-item">Edit profile</button
><button
type="button"
class="dropdown-item"
id="data-table-8-role"
>
Change role<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg></button
><button
type="button"
class="dropdown-item"
id="data-table-8-status"
>
Change status<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
<div class="dropdown-separator"></div>
<button
type="button"
class="dropdown-item dropdown-item-destructive"
>
Remove from team
</button>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-8-role"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-8-role"
value="Owner"
/>Owner
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-8-role"
value="Admin"
/>Admin
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-8-role"
checked=""
value="Member"
/>Member
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-8-role"
value="Viewer"
/>Viewer
</div>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-8-status"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-8-status"
checked=""
value="Active"
/>Active
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-8-status"
value="Suspended"
/>Suspended
</div>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-3">
<input
type="checkbox"
class="checkbox"
aria-label="Select Emilie Dahl"
/>
</td>
<td class="table-cell">
<div class="flex items-center gap-3">
<span class="avatar"
><img
class="avatar-image"
alt=""
src="https://images.unsplash.com/photo-1634149134664-ca3598f29da5?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
/><span class="avatar-fallback">ED</span></span
>
<div class="flex flex-col">
<span class="font-medium">Emilie Dahl</span
><span class="text-xs text-muted-foreground"
>[email protected]</span
>
</div>
</div>
</td>
<td class="table-cell">Viewer</td>
<td class="table-cell">
<span class="badge badge-outline gap-1.5"
><span class="size-1.5 rounded-full bg-blue-500"></span
>Invited</span
>
</td>
<td class="table-cell text-muted-foreground">Never</td>
<td class="table-cell">
<button
type="button"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
id="data-table-9-menu"
aria-label="Open menu for Emilie Dahl"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown min-w-40"
data-sp-toggle="#data-table-9-menu"
data-sp-placement="bottom-end"
>
<button type="button" class="dropdown-item">Edit profile</button
><button
type="button"
class="dropdown-item"
id="data-table-9-role"
>
Change role<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg></button
><button
type="button"
class="dropdown-item"
id="data-table-9-status"
>
Change status<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ms-auto"
>
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
<div class="dropdown-separator"></div>
<button
type="button"
class="dropdown-item dropdown-item-destructive"
>
Remove from team
</button>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-9-role"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-9-role"
value="Owner"
/>Owner
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-9-role"
value="Admin"
/>Admin
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-9-role"
value="Member"
/>Member
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-9-role"
checked=""
value="Viewer"
/>Viewer
</div>
</div>
<div
class="dropdown dropdown-sub min-w-36"
data-sp-toggle="#data-table-9-status"
data-sp-placement="inline-end-start"
data-sp-mode="hover"
>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-9-status"
value="Active"
/>Active
</div>
<div class="dropdown-item dropdown-item-radio">
<input
type="radio"
name="data-table-9-status"
value="Suspended"
/>Suspended
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="flex items-center justify-between gap-4">
<span class="hidden text-sm text-muted-foreground sm:block"
><span data-selected="">1</span> of 24 row(s) selected.</span
>
<div
class="flex w-full items-center justify-between gap-6 sm:w-auto sm:justify-end"
>
<div class="field field-horizontal hidden w-auto md:flex">
<label class="label" for="data-table-page-size">Rows per page</label
><select class="select select-sm w-[72px]" id="data-table-page-size">
<option value="10" selected="">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
</div>
<span class="text-sm font-medium whitespace-nowrap">Page 1 of 3</span>
<div class="flex gap-2">
<button
type="button"
class="btn btn-outline btn-sm btn-icon hidden sm:inline-flex"
disabled=""
aria-label="First page"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m11 17-5-5 5-5"></path>
<path d="m18 17-5-5 5-5"></path>
</svg></button
><button
type="button"
class="btn btn-outline btn-sm btn-icon"
disabled=""
aria-label="Previous page"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m15 18-6-6 6-6"></path>
</svg></button
><button
type="button"
class="btn btn-outline btn-sm btn-icon"
aria-label="Next page"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9 18 6-6-6-6"></path>
</svg></button
><button
type="button"
class="btn btn-outline btn-sm btn-icon hidden sm:inline-flex"
aria-label="Last page"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m6 17 5-5-5-5"></path>
<path d="m13 17 5-5-5-5"></path>
</svg>
</button>
</div>
</div>
</div>
<div
class="sticky bottom-4 z-20 mx-auto flex w-fit items-center gap-1 rounded-xl border bg-popover p-1.5 text-popover-foreground shadow-lg"
data-selection=""
>
<span class="px-2 text-sm font-medium tabular-nums whitespace-nowrap"
><span data-selected="">1</span> selected</span
><button
type="button"
class="btn btn-ghost btn-sm btn-icon"
aria-label="Clear selection"
data-clear-selection=""
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
<div class="separator separator-vertical mx-1 h-5 self-center"></div>
<button type="button" class="btn btn-ghost btn-sm">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon-start"
>
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
<rect x="2" y="4" width="20" height="16" rx="2"></rect></svg
><span class="hidden sm:inline">Email</span></button
><button
type="button"
class="btn btn-ghost btn-sm"
id="data-table-bar-role"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon-start"
>
<path d="M10 15H6a4 4 0 0 0-4 4v2"></path>
<path d="m14.305 16.53.923-.382"></path>
<path d="m15.228 13.852-.923-.383"></path>
<path d="m16.852 12.228-.383-.923"></path>
<path d="m16.852 17.772-.383.924"></path>
<path d="m19.148 12.228.383-.923"></path>
<path d="m19.53 18.696-.382-.924"></path>
<path d="m20.772 13.852.924-.383"></path>
<path d="m20.772 16.148.924.383"></path>
<circle cx="18" cy="15" r="3"></circle>
<circle cx="9" cy="7" r="4"></circle></svg
><span class="hidden sm:inline">Change role</span>
</button>
<div
class="dropdown min-w-40"
data-sp-toggle="#data-table-bar-role"
data-sp-placement="top"
>
<div class="dropdown-label">Move to role</div>
<button type="button" class="dropdown-item">Owner</button
><button type="button" class="dropdown-item">Admin</button
><button type="button" class="dropdown-item">Member</button
><button type="button" class="dropdown-item">Viewer</button>
</div>
<button type="button" class="btn btn-ghost btn-sm">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon-start"
>
<path d="M12 15V3"></path>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<path d="m7 10 5 5 5-5"></path></svg
><span class="hidden sm:inline">Export</span></button
><button
type="button"
class="btn btn-ghost btn-sm text-destructive hover:text-destructive"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon-start"
>
<path d="M10 11v6"></path>
<path d="M14 11v6"></path>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>
<path d="M3 6h18"></path>
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg
><span class="hidden sm:inline">Remove</span>
</button>
</div>
<script>
// Demo only: the selection bar and the filter badges follow the checkboxes,
// the rows themselves never change. Wire these controls to your own data.
{
const table = document.currentScript.closest("section");
const all = table.querySelector("thead input[type=checkbox]");
const rows = [...table.querySelectorAll("tbody input[type=checkbox]")];
const update = () => {
const selected = rows.filter((input) => input.checked).length;
table
.querySelectorAll("[data-selected]")
.forEach((el) => (el.textContent = selected));
table
.querySelector("[data-selection]")
.classList.toggle("hidden", selected === 0);
all.checked = selected === rows.length;
all.indeterminate = selected > 0 && !all.checked;
table.querySelectorAll(".dropdown[data-facet]").forEach((menu) => {
const values = [...menu.querySelectorAll("input:checked")].map(
(input) => input.value,
);
document
.querySelector(menu.dataset.spToggle)
.querySelector("[data-facet-badges]").innerHTML = values.length
? '<div class="separator separator-vertical mx-1 h-4 self-center"></div>' +
values
.map(
(value) =>
'<span class="badge badge-secondary rounded-sm px-1 font-normal">' +
value +
"</span>",
)
.join("")
: "";
});
const filters = table.querySelectorAll(
".dropdown[data-facet] input:checked",
).length;
table
.querySelector("[data-reset-filters].btn-ghost")
.classList.toggle("hidden", filters === 0);
const count = table.querySelector("[data-filter-count]");
count.textContent = table.querySelectorAll(
".drawer [data-facet] input:checked",
).length;
count.classList.toggle("hidden", count.textContent === "0");
};
const uncheck = (inputs) =>
inputs.forEach((input) => {
input.checked = false;
input.dispatchEvent(new Event("change", { bubbles: true }));
});
table.addEventListener("change", (event) => {
if (event.target === all)
rows.forEach((input) => (input.checked = all.checked));
update();
});
table.addEventListener("click", (event) => {
if (event.target.closest("[data-clear-selection]")) uncheck(rows);
if (event.target.closest("[data-reset-filters]"))
uncheck(table.querySelectorAll("[data-facet] input:checked"));
});
update();
}
</script>
</section>