Tailwind CSS Table Row Actions Dropdown
A table row actions dropdown for Tailwind CSS, opened from an ellipsis button on each row, with delete kept apart. Built with the table and dropdown components.
<div class="card card-sm w-full gap-0">
<div class="card-header border-b">
<h3 class="card-title">Files uploaded</h3>
<p class="card-description max-sm:col-start-1">7 files · 52.1 MB</p>
<div
class="card-action flex items-center gap-2 self-end max-sm:col-start-1 max-sm:row-start-3 max-sm:mt-2 max-sm:justify-self-start"
>
<button class="btn btn-outline btn-sm" type="button">Download all</button
><button class="btn btn-sm" type="button">
<svg
class="icon-start"
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="M12 3v12"></path>
<path d="m17 8-5-5-5 5"></path>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path></svg
>Upload
</button>
</div>
</div>
<div class="table-container">
<table class="table">
<thead class="table-header bg-muted/40">
<tr class="table-row hover:bg-transparent">
<th class="table-head w-10 ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
data-sp-toggle-all="true"
aria-label="Select all files"
/>
</th>
<th class="table-head">File name</th>
<th class="table-head w-32">File size</th>
<th class="table-head w-40">Date uploaded</th>
<th class="table-head w-44">Uploaded by</th>
<th class="table-head w-11 pe-4"></th>
</tr>
</thead>
<tbody class="table-body">
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select Tech requirements.pdf"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-red-500"
>pdf</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>Tech requirements.pdf</span
><span class="text-xs text-muted-foreground">200 KB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">200 KB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 4, 2026
</td>
<td class="table-cell text-[13px]">Leila Navarro</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-0"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for Tech requirements.pdf"
>
<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 w-54"
data-sp-toggle="#file-menu-0"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<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="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<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"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<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 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<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="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<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"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<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="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
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select Dashboard screenshot.jpg"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-purple-500"
>jpg</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>Dashboard screenshot.jpg</span
><span class="text-xs text-muted-foreground">720 KB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">720 KB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 4, 2026
</td>
<td class="table-cell text-[13px]">Maya Okonkwo</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-1"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for Dashboard screenshot.jpg"
>
<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 w-54"
data-sp-toggle="#file-menu-1"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<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="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<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"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<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 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<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="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<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"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<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="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
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select Dashboard prototype recording.mp4"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-blue-600"
>mp4</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>Dashboard prototype recording.mp4</span
><span class="text-xs text-muted-foreground">16 MB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">16 MB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 2, 2026
</td>
<td class="table-cell text-[13px]">Devin Ross</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-2"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for Dashboard prototype recording.mp4"
>
<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 w-54"
data-sp-toggle="#file-menu-2"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<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="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<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"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<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 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<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="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<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"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<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="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
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select Dashboard prototype FINAL.fig"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-violet-600"
>fig</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>Dashboard prototype FINAL.fig</span
><span class="text-xs text-muted-foreground">4.2 MB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">4.2 MB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 6, 2026
</td>
<td class="table-cell text-[13px]">Priya Raman</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-3"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for Dashboard prototype FINAL.fig"
>
<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 w-54"
data-sp-toggle="#file-menu-3"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<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="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<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"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<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 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<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="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<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"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<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="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
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select UX design guidelines.docx"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-blue-500"
>docx</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>UX design guidelines.docx</span
><span class="text-xs text-muted-foreground">400 KB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">400 KB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 8, 2026
</td>
<td class="table-cell text-[13px]">Grace Adeyemi</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-4"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for UX design guidelines.docx"
>
<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 w-54"
data-sp-toggle="#file-menu-4"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<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="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<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"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<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 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<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="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<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"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<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="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
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select Dashboard interaction.aep"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-indigo-500"
>aep</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>Dashboard interaction.aep</span
><span class="text-xs text-muted-foreground">12 MB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">12 MB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 6, 2026
</td>
<td class="table-cell text-[13px]">Theo Lindqvist</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-5"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for Dashboard interaction.aep"
>
<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 w-54"
data-sp-toggle="#file-menu-5"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<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="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<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"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<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 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<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="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<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"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<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="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
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
<tr class="table-row h-16.5 border-border/50">
<td class="table-cell ps-4 pe-3">
<input
type="checkbox"
class="checkbox align-middle"
aria-label="Select Briefing call recording.mp3"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9.5 w-8 shrink-0 items-end justify-center rounded-sm border bg-background pb-1"
>
<span
class="rounded-xs px-0.75 py-px font-mono text-[8px] font-semibold tracking-wide text-white uppercase bg-pink-500"
>mp3</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate text-[13px] font-medium"
>Briefing call recording.mp3</span
><span class="text-xs text-muted-foreground">18.6 MB</span>
</div>
</div>
</td>
<td class="table-cell text-[13px]">18.6 MB</td>
<td class="table-cell text-[13px] text-muted-foreground">
Jan 4, 2026
</td>
<td class="table-cell text-[13px]">Camille Laurent</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-menu-6"
class="btn btn-ghost btn-sm btn-icon text-muted-foreground"
aria-label="Open menu for Briefing call recording.mp3"
>
<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 w-54"
data-sp-toggle="#file-menu-6"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">
<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="6" cy="6" r="3"></circle>
<path d="M8.12 8.12 12 12"></path>
<path d="M20 4 8.12 15.88"></path>
<circle cx="6" cy="18" r="3"></circle>
<path d="M14.8 14.8 20 20"></path></svg
>Cut<span class="dropdown-shortcut">⌘X</span></button
><button class="dropdown-item" type="button">
<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"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Copy<span class="dropdown-shortcut">⌘C</span></button
><button class="dropdown-item" type="button">
<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 14h10"></path>
<path d="M16 4h2a2 2 0 0 1 2 2v1.344"></path>
<path d="m17 18 4-4-4-4"></path>
<path
d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 1.793-1.113"
></path>
<rect x="8" y="2" width="8" height="4" rx="1"></rect></svg
>Paste<span class="dropdown-shortcut">⌘V</span>
</button>
<div class="dropdown-separator"></div>
<button class="dropdown-item" type="button">
<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="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"
></path>
<path d="m15 5 4 4"></path></svg
>Rename</button
><button class="dropdown-item" type="button">
<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"
>
<line x1="15" x2="15" y1="12" y2="18"></line>
<line x1="12" x2="18" y1="15" y2="15"></line>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path></svg
>Duplicate<span class="dropdown-shortcut">⌘D</span></button
><button
class="dropdown-item dropdown-item-destructive"
type="button"
>
<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="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
>Delete<span class="dropdown-shortcut">⌘⌫</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div
class="card-footer justify-between border-t text-xs text-muted-foreground"
>
<span>Showing 7 of 42 files</span>
<div class="flex gap-1.5">
<button class="btn btn-outline btn-sm" type="button" disabled="">
Previous</button
><button class="btn btn-outline btn-sm" type="button">Next</button>
</div>
</div>
</div>