Tables
Large padded table
<div class="table-card">
<div class="table-scroll">
<table>
<thead>
<tr>
<th>Row</th>
<th>URL</th>
<th>Crawl Status</th>
<th>Scheme</th>
<th>Host</th>
<th>Is Subdomain</th>
<th>HTTP Status Code</th>
<th>HTP Status</th>
<th>Content Type</th>
<th>Indexable Status</th>
<th>First Parent URL</th>
<th>Canonical URL</th>
<th>Crawl Depth</th>
<th>Crawl Source</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>2</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>3</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>4</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>5</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
</tbody>
</table>
</div>
</div>Tables require a wrapper to style for a couple of reasons:
- This allows us to add border-radius that you can not apply to tables
- It also allows for creating sticky and scrollable stables
- It allows us to add other features like search and sortable widgets, pagination inside the table container.
Compact table
<div class="table-card table-compact">
<div class="table-scroll">
<table>
<thead>
<tr>
<th>Row</th>
<th>URL</th>
<th>Crawl Status</th>
<th>Scheme</th>
<th>Host</th>
<th>Is Subdomain</th>
<th>HTTP Status Code</th>
<th>HTP Status</th>
<th>Content Type</th>
<th>Indexable Status</th>
<th>First Parent URL</th>
<th>Canonical URL</th>
<th>Crawl Depth</th>
<th>Crawl Source</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>2</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>3</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>4</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>5</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
</tbody>
</table>
</div>
</div>A compact table just needs one class of table-compact.
This will style the padding and table elements so that they are smaller.
Currently buttons will automatically default to size-sm if they are in compact table
Search table
<div class="table-card table-compact">
<div class="mx-auto transform divide-y divide-gray-100 overflow-hidden rounded-t bg-white-2xl shadow ring-1 ring-black ring-opacity-5 transition-all flex">
<div class="relative flex-1">
<i class="fa-light fa-magnifying-glass text-xl items-center text-gray-400 absolute left-4 top-3.5 h-5 w-5"></i>
<input type="text" class="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm" placeholder="Quick URL search (full or partial)" role="combobox" aria-expanded="false" aria-controls="options">
</div>
<button class="btn-color-export rounded-0 rounded-tr btn-size-md">Export <i class="fa-solid fa-caret-down text-sm items-center"></i></button>
</div>
<div class="table-scroll">
<table>
<thead>
<tr>
<th>Row</th>
<th>URL</th>
<th>Crawl Status</th>
<th>Scheme</th>
<th>Host</th>
<th>Is Subdomain</th>
<th>HTTP Status Code</th>
<th>HTP Status</th>
<th>Content Type</th>
<th>Indexable Status</th>
<th>First Parent URL</th>
<th>Canonical URL</th>
<th>Crawl Depth</th>
<th>Crawl Source</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>2</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>3</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>4</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>5</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
</tbody>
</table>
</div>
</div>Search table 2
<div class="table-card table-compact">
<div class="mx-auto transform divide-y divide-gray-100 overflow-hidden rounded-t bg-white-2xl shadow ring-1 ring-black ring-opacity-5 transition-all flex items-center">
<div class="relative flex-1">
<i class="fa-light fa-magnifying-glass text-xl items-center text-gray-400 absolute left-4 top-3.5 h-5 w-5"></i>
<input type="text" class="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm" placeholder="Quick URL search (full or partial)" role="combobox" aria-expanded="false" aria-controls="options">
</div>
<div class="p-2">
<button class="btn-color-green-600 btn-size-md">Export <i class="fa-solid fa-caret-down text-xs items-center"></i></button>
</div>
</div>
<div class="table-scroll">
<table>
<thead>
<tr>
<th>Row</th>
<th>URL</th>
<th>Crawl Status</th>
<th>Scheme</th>
<th>Host</th>
<th>Is Subdomain</th>
<th>HTTP Status Code</th>
<th>HTP Status</th>
<th>Content Type</th>
<th>Indexable Status</th>
<th>First Parent URL</th>
<th>Canonical URL</th>
<th>Crawl Depth</th>
<th>Crawl Source</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>2</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>3</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>4</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>5</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
</tbody>
</table>
</div>
</div>Search table 3
<div class="table-card table-compact">
<div class="mx-auto transform divide-y overflow-hidden rounded-t bg-white shadow ring-1 ring-black ring-opacity-5 transition-all flex items-center">
<div class="relative flex-1 flex divide-x divide-solid divide-border">
<i class="fa-light fa-magnifying-glass text-xl items-center text-gray-400 absolute left-4 top-3.5 h-5 w-5"></i>
<input type="text" class="h-12 w-lg border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm" placeholder="Quick URL search (full or partial)" role="combobox" aria-expanded="false" aria-controls="options">
<button class="self-stretch px-3 text-sm"><i class="fa-light fa-filter text-xs items-center"></i> Adv. Filter</button>
<button class="self-stretch px-3 text-sm"><i class="fa-solid fa-table-columns text-xs items-center"></i> Add/Remove Columns</button>
</div>
<div class="p-2">
<button class="btn-color-green-600 btn-size-md">Export <i class="fa-solid fa-caret-down text-xs items-center"></i></button>
</div>
</div>
<div class="table-scroll">
<table>
<thead>
<tr>
<th>Row</th>
<th>URL</th>
<th>Crawl Status</th>
<th>Scheme</th>
<th>Host</th>
<th>Is Subdomain</th>
<th>HTTP Status Code</th>
<th>HTP Status</th>
<th>Content Type</th>
<th>Indexable Status</th>
<th>First Parent URL</th>
<th>Canonical URL</th>
<th>Crawl Depth</th>
<th>Crawl Source</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>2</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>3</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>4</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>5</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
</tbody>
</table>
</div>
</div>Search table 4
<div class="table-card table-compact overflow-hidden">
<div class="rounded-t-lg bg-active-background shadow ring-1 ring-border ring-opacity-5 transition-all flex items-stretch transform">
<div class="flex items-center px-3">
<i class="fa-light fa-magnifying-glass text-md items-center text-body/50"></i>
<input type="text" class="w-lg border-0 bg-transparent text-header placeholder:text-body/50 focus:ring-0 sm:text-sm" placeholder="Quick URL search (full or partial)" role="combobox" aria-expanded="false" aria-controls="options">
</div>
<div class="divide-x divide-solid divide-border self-stretch flex border-border border-x-1">
<button class="self-stretch px-3 text-sm text-body"><i class="fa-light fa-filter text-xs items-center"></i> Adv. Filter</button>
<button class="self-stretch px-3 text-sm text-body"><i class="fa-solid fa-table-columns text-xs items-center"></i> Add/Remove Columns</button>
</div>
<button class="btn-color-green-600 btn-size-md rounded-0 rounded-tr-lg ml-auto">Export <i class="fa-solid fa-caret-down text-xs items-center"></i></button>
</div>
<div class="table-scroll">
<table>
<thead>
<tr>
<th>Row</th>
<th>URL</th>
<th>Crawl Status</th>
<th>Scheme</th>
<th>Host</th>
<th>Is Subdomain</th>
<th>HTTP Status Code</th>
<th>HTP Status</th>
<th>Content Type</th>
<th>Indexable Status</th>
<th>First Parent URL</th>
<th>Canonical URL</th>
<th>Crawl Depth</th>
<th>Crawl Source</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>2</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>3</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>4</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>5</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
</tbody>
</table>
</div>
</div>Search table 5
<div class="table-card overflow-hidden">
<div class="rounded-t-lg bg-active-background shadow ring-1 ring-border ring-opacity-5 transition-all flex items-stretch transform">
<div class="flex items-center px-3">
<i class="fa-light fa-magnifying-glass text-md items-center text-body/50"></i>
<input type="text" class="w-lg border-0 bg-transparent text-header placeholder:text-body/50 focus:ring-0 sm:text-sm" placeholder="Quick URL search (full or partial)" role="combobox" aria-expanded="false" aria-controls="options">
</div>
<div class="divide-x divide-solid divide-border self-stretch flex border-border border-x-1">
<button class="self-stretch px-3 text-sm text-body"><i class="fa-light fa-filter text-xs items-center"></i> Adv. Filter</button>
<button class="self-stretch px-3 text-sm text-body"><i class="fa-solid fa-table-columns text-xs items-center"></i> Add/Remove Columns</button>
</div>
<button class="btn-color-green-600 btn-size-md rounded-0 rounded-tr-lg ml-auto">Export <i class="fa-solid fa-caret-down text-xs items-center"></i></button>
</div>
<div class="table-scroll">
<table>
<thead>
<tr>
<th>Row</th>
<th>URL</th>
<th>Crawl Status</th>
<th>Scheme</th>
<th>Host</th>
<th>Is Subdomain</th>
<th>HTTP Status Code</th>
<th>HTP Status</th>
<th>Content Type</th>
<th>Indexable Status</th>
<th>First Parent URL</th>
<th>Canonical URL</th>
<th>Crawl Depth</th>
<th>Crawl Source</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>2</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>3</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>4</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>5</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
</tbody>
</table>
</div>
<div class="flex items-center justify-between border-t border-border bg-background px-4 py-3">
<div class="flex flex-1 justify-between sm:hidden">
<a href="#" class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Previous</a>
<a href="#" class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Next</a>
</div>
<div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
<div>
<p class="text-sm text-body">
Showing
<span class="font-medium">1</span>
to
<span class="font-medium">10</span>
of
<span class="font-medium">97</span>
results
</p>
</div>
<div>
<nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
<a href="#" class=" inline-flex items-center justify-center rounded-l-md px-2 py-2 text-body ring-1 ring-inset ring-border hover:active-background-hover focus:z-20 focus:outline-offset-0 w-9">
<i class="fa-light fa-chevron-left text-xs items-center "></i>
</a>
<a href="#" aria-current="page" class="relative z-10 inline-flex items-center bg-active-background-hover px-4 py-2 text-sm font-bold text-active-color focus:z-20 ring-1 ring-inset ring-border">1</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-header ring-1 ring-inset ring-border hover:bg-active-background-hover focus:z-20 focus:outline-offset-0">2</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-header ring-1 ring-inset ring-border hover:bg-active-background-hover focus:z-20 focus:outline-offset-0">3</a>
<span href="#" class="relative items-center px-4 py-2 text-sm font-semibold text-header ring-1 ring-inset ring-border hover:bg-active-background-hover focus:z-20 focus:outline-offset-0 md:inline-flex">...</span>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-header ring-1 ring-inset ring-border hover:bg-active-background-hover focus:z-20 focus:outline-offset-0">8</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-header ring-1 ring-inset ring-border hover:bg-active-background-hover focus:z-20 focus:outline-offset-0">9</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-header ring-1 ring-inset ring-border hover:bg-active-background-hover focus:z-20 focus:outline-offset-0">10</a>
<a href="#" class=" inline-flex items-center justify-center rounded-r-md px-2 py-2 text-body ring-1 ring-inset ring-border hover:active-background-hover focus:z-20 focus:outline-offset-0 w9">
<i class="fa-light fa-chevron-right text-xs items-center "></i>
</a>
</nav>
</div>
</div>
</div>
</div>Search table 6
<div class="table-card table-compact overflow-hidden">
<div class="rounded-t-lg bg-active-background shadow ring-1 ring-border ring-opacity-5 transition-all flex items-stretch transform">
<div class="flex items-center px-3">
<i class="fa-light fa-magnifying-glass text-md items-center text-body/50"></i>
<input type="text" class="w-lg border-0 bg-transparent text-header placeholder:text-body/50 focus:ring-0 sm:text-sm" placeholder="Quick URL search (full or partial)" role="combobox" aria-expanded="false" aria-controls="options">
</div>
<div class="divide-x divide-solid divide-border self-stretch flex border-border border-x-1">
<button class="self-stretch px-3 text-sm text-body"><i class="fa-light fa-filter text-xs items-center"></i> Adv. Filter</button>
<button class="self-stretch px-3 text-sm text-body"><i class="fa-solid fa-table-columns text-xs items-center"></i> Add/Remove Columns</button>
</div>
<button class="btn-color-green-600 btn-size-md rounded-0 rounded-tr-lg ml-auto">Export <i class="fa-solid fa-caret-down text-xs items-center"></i></button>
</div>
<div class="table-scroll">
<table>
<thead>
<tr>
<th>Row</th>
<th>URL</th>
<th>Crawl Status</th>
<th>Scheme</th>
<th>Host</th>
<th>Is Subdomain</th>
<th>HTTP Status Code</th>
<th>HTP Status</th>
<th>Content Type</th>
<th>Indexable Status</th>
<th>First Parent URL</th>
<th>Canonical URL</th>
<th>Crawl Depth</th>
<th>Crawl Source</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>2</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>3</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>4</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
<tr>
<td>5</td>
<td>https://localhost:56484/Sitebulb.CrawlerTest.Website.styles.css?v=6jEx2jzANUrU7a_vhDhW0kZ0JeGfqKMLOj4znVjkdnM </td>
<td>Success </td>
<td>https </td>
<td>localhost </td>
<td>No </td>
<td>200 </td>
<td>OK </td>
<td>CSS </td>
<td>Indexable </td>
<td>https://localhost:56484/Hints/MobileFriendly/ </td>
<td>--</td>
<td>1 </td>
<td>Crawler</td>
</tr>
</tbody>
</table>
</div>
<div class="flex items-center justify-between border-t border-border bg-background px-4 py-3">
<div class="flex flex-1 justify-between sm:hidden">
<a href="#" class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Previous</a>
<a href="#" class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Next</a>
</div>
<div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
<div>
<p class="text-sm text-body">
Showing
<span class="font-medium">1</span>
to
<span class="font-medium">10</span>
of
<span class="font-medium">97</span>
results
</p>
</div>
<div>
<nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
<a href="#" class=" inline-flex items-center justify-center rounded-l-md px-2 py-2 text-body ring-1 ring-inset ring-border hover:active-background-hover focus:z-20 focus:outline-offset-0 w-9">
<i class="fa-light fa-chevron-left text-xs items-center "></i>
</a>
<a href="#" aria-current="page" class="relative z-10 inline-flex items-center bg-active-background-hover px-4 py-2 text-sm font-bold text-active-color focus:z-20 ring-1 ring-inset ring-border">1</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-header ring-1 ring-inset ring-border hover:bg-active-background-hover focus:z-20 focus:outline-offset-0">2</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-header ring-1 ring-inset ring-border hover:bg-active-background-hover focus:z-20 focus:outline-offset-0">3</a>
<span href="#" class="relative items-center px-4 py-2 text-sm font-semibold text-header ring-1 ring-inset ring-border hover:bg-active-background-hover focus:z-20 focus:outline-offset-0 md:inline-flex">...</span>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-header ring-1 ring-inset ring-border hover:bg-active-background-hover focus:z-20 focus:outline-offset-0">8</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-header ring-1 ring-inset ring-border hover:bg-active-background-hover focus:z-20 focus:outline-offset-0">9</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-header ring-1 ring-inset ring-border hover:bg-active-background-hover focus:z-20 focus:outline-offset-0">10</a>
<a href="#" class=" inline-flex items-center justify-center rounded-r-md px-2 py-2 text-body ring-1 ring-inset ring-border hover:active-background-hover focus:z-20 focus:outline-offset-0 w9">
<i class="fa-light fa-chevron-right text-xs items-center "></i>
</a>
</nav>
</div>
</div>
</div>
</div>Todo
- Add search components to tables
- Show sticky and scrollable tables