New Changes with Table Component
This commit is contained in:
+47
-94
@@ -7,6 +7,7 @@ const {
|
||||
selectable = false,
|
||||
search = false,
|
||||
striped = false,
|
||||
pagignations = true,
|
||||
pageSize = 10,
|
||||
fetchData,
|
||||
columnsRendererKey,
|
||||
@@ -31,7 +32,7 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
|
||||
|
||||
<!-- 🖥️ Desktop Table -->
|
||||
<div
|
||||
class="wr:overflow-x-auto wr:rounded-xl wr:border wr:dark:border-neutral-700 wr:hidden wr:md:block"
|
||||
class="wr:overflow-x-auto wr:rounded-xl wr:border wr:border-gray-300 wr:dark:border-neutral-700 wr:hidden wr:md:block"
|
||||
>
|
||||
<table
|
||||
class={`wr:w-full wr:text-sm ${striped ? "wr:divide-y wr:divide-gray-200 wr:dark:divide-neutral-700" : ""}`}
|
||||
@@ -70,110 +71,60 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-body>
|
||||
<!-- {
|
||||
data.map((row, i) => (
|
||||
<tr
|
||||
class={`wr:transition wr:bg-white wr:dark:bg-neutral-900 wr:hover:bg-gray-100 wr:dark:hover:bg-neutral-700 ${striped ? "wr:border-b wr:dark:border-neutral-800" : ""}`}
|
||||
>
|
||||
{selectable && (
|
||||
<td class="wr:px-4 wr:py-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
data-row-select
|
||||
data-index={i}
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
{columns.map((col) => (
|
||||
<td
|
||||
class={`wr:px-4 wr:py-3 ${col.align ? `wr:text-${col.align}` : "wr:text-left"} wr:whitespace-nowrap`}
|
||||
data-key={col.key}
|
||||
>
|
||||
{col.render ? (
|
||||
<Fragment
|
||||
set:html={col.render(
|
||||
row[col.key],
|
||||
row,
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
String(row[col.key] ?? "")
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
} -->
|
||||
</tbody>
|
||||
<tbody data-body> </tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 📱 Mobile Cards -->
|
||||
<div class="wr:space-y-4 wr:md:hidden" data-mobile-body>
|
||||
<!-- {
|
||||
data.map((row, i) => (
|
||||
<div class="wr:rounded-lg wr:border wr:border-gray-200 wr:dark:border-neutral-700 wr:p-4 wr:space-y-2 wr:bg-white wr:dark:bg-neutral-800">
|
||||
{columns.map((col) => (
|
||||
<div class="wr:flex wr:justify-between wr:items-start wr:gap-4">
|
||||
<div class="wr:text-sm wr:font-medium wr:text-gray-600 wr:dark:text-gray-300">
|
||||
{col.label}
|
||||
</div>
|
||||
<div class="wr:text-sm wr:text-gray-800 wr:dark:text-gray-100 wr:text-right wr:max-w-[60%] wr:break-words">
|
||||
{col.render ? (
|
||||
<Fragment
|
||||
set:html={col.render(row[col.key], row)}
|
||||
/>
|
||||
) : (
|
||||
String(row[col.key] ?? "")
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))
|
||||
} -->
|
||||
</div>
|
||||
<div class="wr:space-y-4 wr:md:hidden" data-mobile-body></div>
|
||||
|
||||
<!-- 📄 Pagination -->
|
||||
<div
|
||||
class="wr:flex wr:justify-between wr:items-center wr:gap-4 wr:flex-wrap wr:mt-4"
|
||||
>
|
||||
<div class="wr:flex wr:items-center wr:gap-2 wr:text-sm">
|
||||
<span class="wr:text-gray-600 wr:dark:text-gray-400"
|
||||
>Rows per page:</span
|
||||
>
|
||||
<select
|
||||
class="wr:w-[75px] wr:rounded-md wr:border wr:border-gray-300 wr:dark:border-neutral-600 wr:bg-white wr:dark:bg-neutral-800 wr:px-2 wr:py-1 wr:text-sm wr:focus:ring-2 wr:focus:ring-primary"
|
||||
data-page-size
|
||||
>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
</div>
|
||||
{
|
||||
pagignations && (
|
||||
<div class="wr:flex wr:justify-between wr:items-center wr:gap-4 wr:flex-wrap wr:mt-4">
|
||||
<div class="wr:flex wr:items-center wr:gap-2 wr:text-sm">
|
||||
<span class="wr:text-gray-600 wr:dark:text-gray-400">
|
||||
Rows per page:
|
||||
</span>
|
||||
<select
|
||||
class="wr:w-[75px] wr:rounded-md wr:border wr:border-gray-300 wr:dark:border-neutral-600 wr:bg-white wr:dark:bg-neutral-800 wr:px-2 wr:py-1 wr:text-sm wr:focus:ring-2 wr:focus:ring-primary"
|
||||
data-page-size
|
||||
>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="wr:flex wr:items-center wr:gap-3 wr:flex-wrap">
|
||||
<div
|
||||
class="wr:text-sm wr:text-gray-600 wr:dark:text-gray-400"
|
||||
data-page-info
|
||||
>
|
||||
</div>
|
||||
<div class="wr:flex wr:items-center wr:gap-3 wr:flex-wrap">
|
||||
<div
|
||||
class="wr:text-sm wr:text-gray-600 wr:dark:text-gray-400"
|
||||
data-page-info
|
||||
/>
|
||||
|
||||
<div
|
||||
class="wr:flex wr:items-center wr:gap-1 wr:bg-gray-50 wr:dark:bg-neutral-800 wr:rounded-full wr:px-2 wr:py-1 wr:shadow-sm"
|
||||
data-pagination
|
||||
>
|
||||
<div
|
||||
class="wr:flex wr:items-center wr:gap-1 wr:bg-gray-50 wr:dark:bg-neutral-800 wr:rounded-full wr:px-2 wr:py-1 wr:shadow-sm"
|
||||
data-pagination
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
<script
|
||||
type="module"
|
||||
is:inline
|
||||
define:vars={{ id, pageSize, fetchData, columns, data, columnsRendererKey }}
|
||||
define:vars={{
|
||||
id,
|
||||
pagignations,
|
||||
pageSize,
|
||||
fetchData,
|
||||
columns,
|
||||
data,
|
||||
columnsRendererKey,
|
||||
}}
|
||||
>
|
||||
const start = () => {
|
||||
const table = document.getElementById(id);
|
||||
@@ -187,7 +138,9 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
|
||||
const pageSizeSelector = table.querySelector("[data-page-size]");
|
||||
|
||||
let currentPage = 1;
|
||||
let rowsPerPage = parseInt(pageSizeSelector.value);
|
||||
let rowsPerPage = pagignations
|
||||
? parseInt(pageSizeSelector.value)
|
||||
: 9999;
|
||||
let sortKey = null;
|
||||
let sortOrder = "asc";
|
||||
let totalRows = data.length;
|
||||
@@ -212,7 +165,7 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
|
||||
|
||||
dataset.forEach((row) => {
|
||||
// 🖥️ Desktop
|
||||
let tr = `<tr class="wr:transition wr:bg-white wr:dark:bg-neutral-900 wr:hover:bg-gray-100 wr:dark:hover:bg-neutral-700 wr:border-b wr:dark:border-neutral-800">`;
|
||||
let tr = `<tr class="wr:transition wr:bg-white wr:dark:bg-neutral-900 wr:hover:bg-gray-100 wr:dark:hover:bg-neutral-700 wr:border-b wr:border-gray-300 wr:dark:border-neutral-800">`;
|
||||
columns.forEach((col) => {
|
||||
let value = row[col.key] ?? "";
|
||||
|
||||
@@ -232,7 +185,7 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
|
||||
tbody.insertAdjacentHTML("beforeend", tr);
|
||||
|
||||
// 📱 Mobile
|
||||
let card = `<div class="wr:rounded-lg wr:border wr:border-gray-200 wr:dark:border-neutral-700 wr:p-4 wr:space-y-2 wr:bg-white wr:dark:bg-neutral-800">`;
|
||||
let card = `<div class="wr:rounded-lg wr:border wr:border-gray-300 wr:dark:border-neutral-700 wr:p-4 wr:space-y-2 wr:bg-white wr:dark:bg-neutral-800">`;
|
||||
columns.forEach((col) => {
|
||||
let value = row[col.key] ?? "";
|
||||
|
||||
|
||||
Reference in New Issue
Block a user