Tailwind CSS File Table
A file table for Tailwind CSS with type icons, shared-with avatars, row actions, and pagination. Built with the table, avatar, and pagination components.
<div class="card card-sm w-full gap-0">
<div class="card-header border-b">
<h3 class="card-title">All files</h3>
<p class="card-description">24 files ยท 2.4 GB of 10 GB used</p>
<div class="card-action flex gap-2 self-end">
<button class="btn btn-outline 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="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
></path></svg
>New folder</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">
<th class="table-head w-10 ps-4">
<input
type="checkbox"
class="checkbox"
aria-label="Select all files"
/>
</th>
<th class="table-head">Name</th>
<th class="table-head">Shared with</th>
<th class="table-head">Size</th>
<th class="table-head">Modified</th>
<th class="table-head pe-4"></th>
</tr>
</thead>
<tbody class="table-body">
<tr class="table-row">
<td class="table-cell ps-4">
<input
type="checkbox"
class="checkbox"
aria-label="Select Q3 roadmap.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 font-medium">Q3 roadmap.pdf</span
><span class="text-xs text-muted-foreground">PDF</span>
</div>
</div>
</td>
<td class="table-cell">
<span class="avatar-group"
><span class="avatar avatar-sm"
><img
class="avatar-image"
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"
alt="Leila Navarro"
/><span class="avatar-fallback">LN</span></span
><span class="avatar avatar-sm"
><img
class="avatar-image"
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"
alt="Amara Okafor"
/><span class="avatar-fallback">AO</span></span
></span
>
</td>
<td class="table-cell">2.4 MB</td>
<td class="table-cell text-muted-foreground">Sep 12, 2026</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-table-menu-0"
class="btn btn-ghost btn-sm btn-icon"
aria-label="Open menu for Q3 roadmap.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"
data-sp-toggle="#file-table-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="18" cy="5" r="3"></circle>
<circle cx="6" cy="12" r="3"></circle>
<circle cx="18" cy="19" r="3"></circle>
<line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line>
<line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line></svg
>Share</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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
></path>
<path
d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
></path></svg
>Copy link</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="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
>Download
</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"
>
<path
d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1"
></path>
<path d="M2 13h10"></path>
<path d="m9 16 3-3-3-3"></path></svg
>Move to
</button>
<div class="dropdown-separator"></div>
<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
</button>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-4">
<input
type="checkbox"
class="checkbox"
aria-label="Select Homepage hero.png"
/>
</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"
>png</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate font-medium">Homepage hero.png</span
><span class="text-xs text-muted-foreground">PNG</span>
</div>
</div>
</td>
<td class="table-cell">
<span class="avatar-group"
><span class="avatar avatar-sm"
><img
class="avatar-image"
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"
alt="Maya Santoso"
/><span class="avatar-fallback">MS</span></span
></span
>
</td>
<td class="table-cell">5.8 MB</td>
<td class="table-cell text-muted-foreground">Sep 10, 2026</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-table-menu-1"
class="btn btn-ghost btn-sm btn-icon"
aria-label="Open menu for Homepage hero.png"
>
<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"
data-sp-toggle="#file-table-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="18" cy="5" r="3"></circle>
<circle cx="6" cy="12" r="3"></circle>
<circle cx="18" cy="19" r="3"></circle>
<line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line>
<line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line></svg
>Share</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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
></path>
<path
d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
></path></svg
>Copy link</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="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
>Download
</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"
>
<path
d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1"
></path>
<path d="M2 13h10"></path>
<path d="m9 16 3-3-3-3"></path></svg
>Move to
</button>
<div class="dropdown-separator"></div>
<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
</button>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-4">
<input
type="checkbox"
class="checkbox"
aria-label="Select Onboarding walkthrough.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 font-medium"
>Onboarding walkthrough.mp4</span
><span class="text-xs text-muted-foreground">MP4</span>
</div>
</div>
</td>
<td class="table-cell">
<span class="avatar-group"
><span class="avatar avatar-sm"
><img
class="avatar-image"
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"
alt="Sofia Lindqvist"
/><span class="avatar-fallback">SL</span></span
><span class="avatar avatar-sm"
><img
class="avatar-image"
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"
alt="Anouk Visser"
/><span class="avatar-fallback">AV</span></span
><span class="avatar avatar-sm"
><img
class="avatar-image"
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"
alt="Amara Okafor"
/><span class="avatar-fallback">AO</span></span
></span
>
</td>
<td class="table-cell">312 MB</td>
<td class="table-cell text-muted-foreground">Sep 8, 2026</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-table-menu-2"
class="btn btn-ghost btn-sm btn-icon"
aria-label="Open menu for Onboarding walkthrough.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"
data-sp-toggle="#file-table-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="18" cy="5" r="3"></circle>
<circle cx="6" cy="12" r="3"></circle>
<circle cx="18" cy="19" r="3"></circle>
<line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line>
<line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line></svg
>Share</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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
></path>
<path
d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
></path></svg
>Copy link</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="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
>Download
</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"
>
<path
d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1"
></path>
<path d="M2 13h10"></path>
<path d="m9 16 3-3-3-3"></path></svg
>Move to
</button>
<div class="dropdown-separator"></div>
<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
</button>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-4">
<input
type="checkbox"
class="checkbox"
aria-label="Select Podcast intro.wav"
/>
</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"
>wav</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate font-medium">Podcast intro.wav</span
><span class="text-xs text-muted-foreground">WAV</span>
</div>
</div>
</td>
<td class="table-cell">
<span class="text-muted-foreground">Only you</span>
</td>
<td class="table-cell">48 MB</td>
<td class="table-cell text-muted-foreground">Sep 3, 2026</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-table-menu-3"
class="btn btn-ghost btn-sm btn-icon"
aria-label="Open menu for Podcast intro.wav"
>
<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"
data-sp-toggle="#file-table-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="18" cy="5" r="3"></circle>
<circle cx="6" cy="12" r="3"></circle>
<circle cx="18" cy="19" r="3"></circle>
<line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line>
<line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line></svg
>Share</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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
></path>
<path
d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
></path></svg
>Copy link</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="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
>Download
</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"
>
<path
d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1"
></path>
<path d="M2 13h10"></path>
<path d="m9 16 3-3-3-3"></path></svg
>Move to
</button>
<div class="dropdown-separator"></div>
<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
</button>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-4">
<input
type="checkbox"
class="checkbox"
aria-label="Select Brand kit.zip"
/>
</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-amber-500"
>zip</span
>
</div>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate font-medium">Brand kit.zip</span
><span class="text-xs text-muted-foreground">ZIP</span>
</div>
</div>
</td>
<td class="table-cell">
<span class="avatar-group"
><span class="avatar avatar-sm"
><img
class="avatar-image"
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"
alt="Leila Navarro"
/><span class="avatar-fallback">LN</span></span
></span
>
</td>
<td class="table-cell">96 MB</td>
<td class="table-cell text-muted-foreground">Aug 28, 2026</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-table-menu-4"
class="btn btn-ghost btn-sm btn-icon"
aria-label="Open menu for Brand kit.zip"
>
<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"
data-sp-toggle="#file-table-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="18" cy="5" r="3"></circle>
<circle cx="6" cy="12" r="3"></circle>
<circle cx="18" cy="19" r="3"></circle>
<line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line>
<line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line></svg
>Share</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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
></path>
<path
d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
></path></svg
>Copy link</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="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
>Download
</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"
>
<path
d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1"
></path>
<path d="M2 13h10"></path>
<path d="m9 16 3-3-3-3"></path></svg
>Move to
</button>
<div class="dropdown-separator"></div>
<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
</button>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-4">
<input
type="checkbox"
class="checkbox"
aria-label="Select Dashboard prototype.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 font-medium">Dashboard prototype.fig</span
><span class="text-xs text-muted-foreground">Figma</span>
</div>
</div>
</td>
<td class="table-cell">
<span class="avatar-group"
><span class="avatar avatar-sm"
><img
class="avatar-image"
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"
alt="Leila Navarro"
/><span class="avatar-fallback">LN</span></span
><span class="avatar avatar-sm"
><img
class="avatar-image"
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"
alt="Maya Santoso"
/><span class="avatar-fallback">MS</span></span
><span class="avatar avatar-sm"
><img
class="avatar-image"
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"
alt="Sofia Lindqvist"
/><span class="avatar-fallback">SL</span></span
></span
>
</td>
<td class="table-cell">4.2 MB</td>
<td class="table-cell text-muted-foreground">Aug 21, 2026</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-table-menu-5"
class="btn btn-ghost btn-sm btn-icon"
aria-label="Open menu for Dashboard prototype.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"
data-sp-toggle="#file-table-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="18" cy="5" r="3"></circle>
<circle cx="6" cy="12" r="3"></circle>
<circle cx="18" cy="19" r="3"></circle>
<line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line>
<line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line></svg
>Share</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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
></path>
<path
d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
></path></svg
>Copy link</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="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
>Download
</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"
>
<path
d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1"
></path>
<path d="M2 13h10"></path>
<path d="m9 16 3-3-3-3"></path></svg
>Move to
</button>
<div class="dropdown-separator"></div>
<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
</button>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-4">
<input
type="checkbox"
class="checkbox"
aria-label="Select Team offsite notes.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 font-medium">Team offsite notes.docx</span
><span class="text-xs text-muted-foreground">Word</span>
</div>
</div>
</td>
<td class="table-cell">
<span class="avatar-group"
><span class="avatar avatar-sm"
><img
class="avatar-image"
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"
alt="Anouk Visser"
/><span class="avatar-fallback">AV</span></span
></span
>
</td>
<td class="table-cell">400 KB</td>
<td class="table-cell text-muted-foreground">Aug 14, 2026</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="file-table-menu-6"
class="btn btn-ghost btn-sm btn-icon"
aria-label="Open menu for Team offsite notes.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"
data-sp-toggle="#file-table-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="18" cy="5" r="3"></circle>
<circle cx="6" cy="12" r="3"></circle>
<circle cx="18" cy="19" r="3"></circle>
<line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line>
<line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line></svg
>Share</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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
></path>
<path
d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
></path></svg
>Copy link</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="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
>Download
</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"
>
<path
d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1"
></path>
<path d="M2 13h10"></path>
<path d="m9 16 3-3-3-3"></path></svg
>Move to
</button>
<div class="dropdown-separator"></div>
<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
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer justify-between border-t">
<button
class="btn btn-outline btn-sm max-sm:btn-icon"
type="button"
disabled=""
>
<svg
class="icon-start max-sm:hidden"
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 19-7-7 7-7"></path>
<path d="M19 12H5"></path></svg
><svg
class="sm:hidden"
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 19-7-7 7-7"></path>
<path d="M19 12H5"></path></svg
><span class="max-sm:sr-only">Previous</span>
</button>
<nav
class="pagination pagination-sm max-sm:hidden"
aria-label="Files pages"
>
<a href="#" class="pagination-item active">1</a
><a href="#" class="pagination-item">2</a
><a href="#" class="pagination-item">3</a
><a href="#" class="pagination-item">4</a
><a href="#" class="pagination-item">5</a
><span class="pagination-ellipsis"
><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
><span class="sr-only">More pages</span></span
><a href="#" class="pagination-item">10</a>
</nav>
<span class="text-sm sm:hidden">Page 1 of 10</span
><button class="btn btn-outline btn-sm max-sm:btn-icon" type="button">
<span class="max-sm:sr-only">Next</span
><svg
class="icon-end max-sm:hidden"
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="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path></svg
><svg
class="sm:hidden"
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="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</button>
</div>
</div>