All Prompts
All Prompts
tabledata tablesortablepaginationtailwinddark modestats panelcsv exportresponsive
Interactive Data Table with Sorting & Stats
Интерактивная таблица данных с сортировкой, пагинацией, экспортом CSV и панелью статистики. Темная тема, Tailwind CSS. Идеально для дашбордов.
Prompt
<div class="dark:border-neutral-800 overflow-hidden border rounded-md bg-black border-neutral-800/70">
<!-- Header -->
<div class="flex dark:border-neutral-800 border-b pt-2 pr-3 pb-2 pl-3 items-center justify-between border-neutral-800/70">
<div class="flex items-center gap-2">
<span class="text-[13px] font-medium tracking-tight">
Results
</span>
<span id="resultRowsBadge" class="rounded-sm px-1.5 py-0.5 text-[11px] dark:bg-neutral-800 dark:text-neutral-400 bg-neutral-900 text-neutral-400">15 rows</span>
<span id="resultColsBadge" class="rounded-sm px-1.5 py-0.5 text-[11px] dark:bg-neutral-800 dark:text-neutral-400 bg-neutral-900 text-neutral-400">3 columns</span>
<span id="resultLatency" class="rounded-sm px-1.5 py-0.5 text-[11px] dark:bg-neutral-800 dark:text-neutral-400 bg-neutral-900 text-neutral-400">
— ms
</span>
</div>
<div class="flex items-center gap-2">
<button id="statsBtnSecondary" class="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800 border-neutral-800/70 bg-black text-neutral-200 hover:bg-neutral-950">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path>
<path d="M18 17V9" class=""></path>
<path d="M13 17V5" class=""></path>
<path d="M8 17v-3" class=""></path>
</svg>
Stats
</button>
<button class="inline-flex gap-1 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-800 text-xs border rounded-md pt-1 pr-2 pb-1 pl-2 gap-x-1 gap-y-1 items-center hover:bg-neutral-950 text-neutral-200 bg-black border-neutral-800/70" id="exportBtn">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<path d="M7 10l5 5 5-5" class=""></path>
<path d="M12 15V3" class=""></path>
</svg>
Export CSV
</button>
</div>
</div>
<!-- Grid layout -->
<div class="lg:flex">
<!-- Table region -->
<div class="flex-1 min-w-0">
<div class="overflow-auto">
<table id="resultsTable" class="min-w-full w-full table-fixed divide-y dark:divide-neutral-800 divide-neutral-800/70" style="font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;">
<tbody class="">
<tr class="">
<th class="whitespace-nowrap px-2 py-1.5 text-right text-[10px] font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400 dark:bg-neutral-900/50 border-r dark:border-neutral-800 w-12 sticky top-0 z-10 bg-neutral-950 border-neutral-800/70">
<span class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M5 3h14v4H5z" class=""></path>
<path d="M5 10h14v4H5z" class=""></path>
<path d="M5 17h14v4H5z" class=""></path>
</svg>
Row
<span class="rounded-sm px-1 py-0.5 text-[9px] text-neutral-500 dark:bg-neutral-900 dark:text-neutral-400 bg-neutral-900">
calc
</span>
</span>
</th>
<th data-col="specialty" class="sortable whitespace-nowrap px-2 py-1.5 text-left text-[10px] font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400 cursor-pointer sticky top-0 z-10 bg-black" aria-sort="none">
<div class="flex flex-col gap-1">
<div class="flex items-center gap-2 min-w-0">
<span class="inline-flex items-center gap-1 flex-1 min-w-0 truncate">
<span class="text-[9px] dark:bg-neutral-900 dark:text-neutral-400 text-neutral-500 rounded-sm pt-0.5 pr-1 pb-0.5 pl-1 bg-neutral-900">
T
</span>
<span class="">specialty</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="">
<path d="m7 15 5 5 5-5" class=""></path>
<path d="M7 9l5-5 5 5" class=""></path>
</svg>
</div>
<div id="pop-specialty" class="shrink-0 cursor-pointer" title="Click for column stats">
<div class="flex h-3 w-[56px] items-end gap-px overflow-hidden rounded-[2px] p-[1px] dark:bg-neutral-900 bg-neutral-900">
<div style="height: 18px;" class="w-[6px] rounded-[1px] bg-emerald-500/70 dark:bg-emerald-400/60">
</div>
<div style="height: 22px;" class="w-[6px] rounded-[1px] bg-emerald-500/70 dark:bg-emerald-400/60">
</div>
<div style="height: 16px;" class="w-[6px] rounded-[1px] bg-emerald-500/70 dark:bg-emerald-400/60">
</div>
<div style="height: 20px;" class="w-[6px] rounded-[1px] bg-emerald-500/70 dark:bg-emerald-400/60">
</div>
</div>
</div>
<span id="meta-specialty" class="text-[10px] dark:text-neutral-500 text-neutral-600">4 unique</span>
</div>
</th>
<th data-col="zip_code" class="sortable whitespace-nowrap px-2 py-1.5 text-left text-[10px] font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400 cursor-pointer sticky top-0 z-10 bg-black" aria-sort="none">
<div class="flex flex-col gap-1">
<div class="flex items-center gap-2">
<span class="inline-flex items-center gap-1">
<span class="rounded-sm px-1 py-0.5 text-[9px] text-neutral-500 dark:bg-neutral-900 dark:text-neutral-400 bg-neutral-900">
T
</span>
<span class="">zip_code</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="">
<path d="m7 15 5 5 5-5" class=""></path>
<path d="M7 9l5-5 5 5" class=""></path>
</svg>
</div>
<div id="pop-zip_code" class="shrink-0 cursor-pointer" title="Click for column stats">
<div class="flex h-3 w-[56px] items-end gap-px overflow-hidden rounded-[2px] p-[1px] dark:bg-neutral-900 bg-neutral-900">
<div style="height: 14px;" class="w-[6px] rounded-[1px] bg-emerald-500/70 dark:bg-emerald-400/60">
</div>
<div style="height: 22px;" class="w-[6px] rounded-[1px] bg-emerald-500/70 dark:bg-emerald-400/60">
</div>
<div style="height: 12px;" class="w-[6px] rounded-[1px] bg-emerald-500/70 dark:bg-emerald-400/60">
</div>
<div style="height: 20px;" class="w-[6px] rounded-[1px] bg-emerald-500/70 dark:bg-emerald-400/60">
</div>
</div>
</div>
<span id="meta-zip_code" class="text-[10px] dark:text-neutral-500 text-neutral-600">6 unique</span>
</div>
</th>
<th data-col="provider_count" class="sortable whitespace-nowrap px-2 py-1.5 text-left text-[10px] font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400 cursor-pointer sticky top-0 z-10 bg-black" aria-sort="descending">
<div class="flex flex-col gap-1">
<div class="flex items-center gap-2">
<span class="inline-flex items-center gap-1">
<span class="rounded-sm px-1 py-0.5 text-[9px] text-neutral-500 dark:bg-neutral-900 dark:text-neutral-400 bg-neutral-900">
1
</span>
<span class="">provider_count</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="">
<path d="m7 15 5 5 5-5" class=""></path>
<path d="M7 9l5-5 5 5" class=""></path>
</svg>
</div>
<div id="pop-provider_count" class="shrink-0 cursor-pointer" title="Click for column stats">
<div class="flex h-3 w-[56px] items-end gap-px overflow-hidden rounded-[2px] p-[1px] dark:bg-neutral-900 bg-neutral-900">
<div style="height: 24px;" class="w-[6px] rounded-[1px] bg-sky-500/70"></div>
<div style="height: 16px;" class="w-[6px] rounded-[1px] bg-sky-500/70"></div>
<div style="height: 8px;" class="w-[6px] rounded-[1px] bg-sky-500/70"></div>
<div style="height: 4px;" class="w-[6px] rounded-[1px] bg-sky-500/70"></div>
<div style="height: 2px;" class="w-[6px] rounded-[1px] bg-sky-500/70"></div>
<div style="height: 2px;" class="w-[6px] rounded-[1px] bg-sky-500/70"></div>
</div>
</div>
<span id="meta-provider_count" class="text-[10px] dark:text-neutral-500 text-neutral-600">min 6 • max 42</span>
</div>
</th>
</tr>
</tbody>
<tbody id="resultsBody" class="divide-y dark:divide-neutral-800 divide-neutral-800/70">
<tr class="hover:bg-neutral-950/60">
<td class="whitespace-nowrap px-2 py-1.5 text-right text-[11px] dark:text-neutral-500 text-neutral-500 border-r dark:border-neutral-800 border-neutral-800/70">
1</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">Cardiology</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">10001</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px] text-right tabular-nums">42</td>
</tr>
<tr class="hover:bg-neutral-950/60">
<td class="whitespace-nowrap px-2 py-1.5 text-right text-[11px] dark:text-neutral-500 text-neutral-500 border-r dark:border-neutral-800 border-neutral-800/70">
2</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">Cardiology</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">10002</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px] text-right tabular-nums">38</td>
</tr>
<tr class="hover:bg-neutral-950/60">
<td class="whitespace-nowrap px-2 py-1.5 text-right text-[11px] dark:text-neutral-500 text-neutral-500 border-r dark:border-neutral-800 border-neutral-800/70">
3</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">Pediatrics</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">10001</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px] text-right tabular-nums">33</td>
</tr>
<tr class="hover:bg-neutral-950/60">
<td class="whitespace-nowrap px-2 py-1.5 text-right text-[11px] dark:text-neutral-500 text-neutral-500 border-r dark:border-neutral-800 border-neutral-800/70">
4</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">Pediatrics</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">10003</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px] text-right tabular-nums">29</td>
</tr>
<tr class="hover:bg-neutral-950/60">
<td class="whitespace-nowrap px-2 py-1.5 text-right text-[11px] dark:text-neutral-500 text-neutral-500 border-r dark:border-neutral-800 border-neutral-800/70">
5</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">Orthopedics</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">10002</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px] text-right tabular-nums">27</td>
</tr>
<tr class="hover:bg-neutral-950/60">
<td class="whitespace-nowrap px-2 py-1.5 text-right text-[11px] dark:text-neutral-500 text-neutral-500 border-r dark:border-neutral-800 border-neutral-800/70">
6</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">Neurology</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">10002</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px] text-right tabular-nums">25</td>
</tr>
<tr class="hover:bg-neutral-950/60">
<td class="whitespace-nowrap px-2 py-1.5 text-right text-[11px] dark:text-neutral-500 text-neutral-500 border-r dark:border-neutral-800 border-neutral-800/70">
7</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">Cardiology</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">10003</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px] text-right tabular-nums">21</td>
</tr>
<tr class="hover:bg-neutral-950/60">
<td class="whitespace-nowrap px-2 py-1.5 text-right text-[11px] dark:text-neutral-500 text-neutral-500 border-r dark:border-neutral-800 border-neutral-800/70">
8</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">Orthopedics</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">10003</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px] text-right tabular-nums">19</td>
</tr>
<tr class="hover:bg-neutral-950/60">
<td class="whitespace-nowrap px-2 py-1.5 text-right text-[11px] dark:text-neutral-500 text-neutral-500 border-r dark:border-neutral-800 border-neutral-800/70">
9</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">Neurology</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">10001</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px] text-right tabular-nums">17</td>
</tr>
<tr class="hover:bg-neutral-950/60">
<td class="whitespace-nowrap px-2 py-1.5 text-right text-[11px] dark:text-neutral-500 text-neutral-500 border-r dark:border-neutral-800 border-neutral-800/70">
10</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">Cardiology</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px]">10004</td>
<td class="whitespace-nowrap px-2 py-1.5 text-[12px] text-right tabular-nums">15</td>
</tr>
</tbody>
</table>
</div>
<!-- Table footer -->
<div class="flex flex-col gap-2 border-t px-2.5 py-2 text-xs dark:border-neutral-800 dark:text-neutral-400 sm:flex-row sm:items-center sm:justify-between border-neutral-800/70 text-neutral-400">
<div class="inline-flex items-center gap-2">
<div>
Total rows:
<span id="totalRows" class="dark:text-neutral-100 text-neutral-100">15</span>
</div>
<div class="hidden sm:block text-neutral-600">•</div>
<div>
Page
<span id="pageIndex">1</span>
of
<span id="pageCount">2</span>
</div>
</div>
<div class="flex items-center gap-2">
<label for="pageSize" class="text-neutral-500 dark:text-neutral-400">
Rows per page
</label>
<select id="pageSize" class="rounded-md border px-2 py-1 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-100 border-neutral-800/70 bg-black text-neutral-100">
<option>10</option>
<option>25</option>
<option>50</option>
</select>
<div class="ml-2 inline-flex items-center gap-1">
<button id="prevPage" class="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs disabled:opacity-50 dark:border-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-800 border-neutral-800/70 text-neutral-200 hover:bg-neutral-950" disabled="">
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="">
<path d="m15 18-6-6 6-6" class=""></path>
</svg>
Prev
</button>
<button id="nextPage" class="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs disabled:opacity-50 dark:border-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-800 border-neutral-800/70 text-neutral-200 hover:bg-neutral-950">
Next
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="">
<path d="m9 18 6-6-6-6" class=""></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Stats side panel -->
<aside class="hidden dark:border-neutral-800 lg:block lg:w-80 lg:border-l lg:border-t-0 w-full border-t pt-3 pr-3 pb-3 pl-3 border-neutral-800/70" id="statsInlinePanel">
<div class="flex items-center justify-between">
<div class="inline-flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="">
<path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path>
<path d="M18 17V9" class=""></path>
<path d="M13 17V5" class=""></path>
<path d="M8 17v-3" class=""></path>
</svg>
<span class="text-[13px] font-medium tracking-tight">
Column Statistics
</span>
</div>
<button id="statsInlineClose" type="button" onclick="document.getElementById('statsInlinePanel').classList.add('hidden')" class="rounded-md p-1 dark:hover:bg-neutral-800 hover:bg-neutral-950">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="">
<path d="M18 6 6 18" class=""></path>
<path d="m6 6 12 12" class=""></path>
</svg>
</button>
</div>
<!-- Current column -->
<div class="mt-2 flex items-center justify-between rounded-md px-2 py-1.5 dark:bg-neutral-900/80 bg-black/80">
<div class="inline-flex items-center gap-2">
<span id="statsCurrentIcon" class="inline-flex h-5 w-5 items-center justify-center rounded-sm dark:bg-neutral-800 dark:text-neutral-300 bg-neutral-900 text-neutral-400">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="">
<rect x="3" y="3" width="18" height="18" rx="2" class="dark:text-neutral-700 text-neutral-700" stroke="currentColor" fill="none"></rect>
<path d="M7 7h10M7 12h10M7 17h6" stroke="currentColor" class=""></path>
</svg>
</span>
<div class="flex items-center gap-2">
<span id="statsCurrentName" class="text-[13px] font-medium tracking-tight">provider_count</span>
<span id="statsCurrentType" class="rounded-sm px-1 py-0.5 text-[10px] dark:bg-neutral-800 dark:text-neutral-400 text-neutral-text-neutral-400 bg-neutral-900">int</span>
</div>
</div>
</div>
<!-- KPI datalist (dense) -->
<div class="mt-3">
<dl class="divide-y dark:divide-neutral-800 divide-neutral-800/70">
<div class="flex items-center justify-between py-1.5">
<dt class="text-[11px] uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
Count
</dt>
<dd id="statCount" class="text-[13px] font-medium tracking-tight">15</dd>
</div>
<div class="flex items-center justify-between py-1.5">
<dt class="text-[11px] uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
Unique
</dt>
<dd id="statUnique" class="text-[13px] font-medium tracking-tight">15</dd>
</div>
<div class="flex items-center justify-between py-1.5">
<dt class="text-[11px] uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
Nulls
</dt>
<dd id="statNulls" class="text-[13px] font-medium tracking-tight">0</dd>
</div>
<div class="flex items-center justify-between py-1.5">
<dt class="text-[11px] uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
Cardinality
</dt>
<dd id="statCardinality" class="text-[13px] font-medium tracking-tight">100.0%</dd>
</div>
</dl>
</div>
<!-- Numeric specifics (dense) -->
<div id="numericBlock" class="mt-3 space-y-2">
<dl class="divide-y dark:divide-neutral-800 divide-neutral-800/70">
<div class="flex items-center justify-between py-1.5">
<dt class="text-[11px] uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
Min
</dt>
<dd id="statMin" class="text-[13px] font-medium tracking-tight">6</dd>
</div>
<div class="flex items-center justify-between py-1.5">
<dt class="text-[11px] uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
Max
</dt>
<dd id="statMax" class="text-[13px] font-medium tracking-tight">42</dd>
</div>
<div class="flex items-center justify-between py-1.5">
<dt class="text-[11px] uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
Average
</dt>
<dd id="statAvg" class="text-[13px] font-medium tracking-tight">20.93</dd>
</div>
<div class="flex items-center justify-between py-1.5">
<dt class="text-[11px] uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
Std Dev
</dt>
<dd id="statStd" class="text-[13px] font-medium tracking-tight">10.74</dd>
</div>
</dl>
<div>
<div class="mb-1 text-[11px] uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
Distribution
</div>
<div id="sparkline" class="flex h-16 items-end gap-0.5 rounded-md p-1 dark:bg-neutral-900 bg-neutral-900">
<div style="height:44px" class="w-[10px] rounded-sm bg-sky-500/70"></div>
<div style="height:58px" class="w-[10px] rounded-sm bg-sky-500/70"></div>
<div style="height:30px" class="w-[10px] rounded-sm bg-sky-500/70"></div>
<div style="height:44px" class="w-[10px] rounded-sm bg-sky-500/70"></div>
<div style="height:16px" class="w-[10px] rounded-sm bg-sky-500/70"></div>
<div style="height:30px" class="w-[10px] rounded-sm bg-sky-500/70"></div>
</div>
<div id="binLabels" class="mt-1 flex justify-between text-[10px] text-neutral-500 dark:text-neutral-500">
<span>6</span>
<span>42</span>
</div>
</div>
</div>
<!-- Categorical specifics -->
<div id="categoricalBlock" class="mt-3 hidden">
<div class="mb-1 text-[11px] uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
Top values
</div>
<div id="topValuesList" class="space-y-1"></div>
</div>
</aside>
</div>
<!-- /lg:flex -->
</div>