New Changes with Table Component
This commit is contained in:
@@ -32,7 +32,7 @@ export { default as Table } from "../src/components/Table.astro";
|
|||||||
export { default as VideoPlayer } from "../src/components/VideoPlayer.astro";
|
export { default as VideoPlayer } from "../src/components/VideoPlayer.astro";
|
||||||
export { default as WebRtcPlayer } from "../src/components/WebRtcPlayer.astro";
|
export { default as WebRtcPlayer } from "../src/components/WebRtcPlayer.astro";
|
||||||
export { cn } from "../src/utils/cn.js";
|
export { cn } from "../src/utils/cn.js";
|
||||||
export type { Column, TableProps } from "../src/types/table/types.js";
|
export { Column, TableProps } from "../src/types/table/types.js";
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const indexDts = `/* Auto-generated types (lightweight) */
|
const indexDts = `/* Auto-generated types (lightweight) */
|
||||||
|
|||||||
+47
-94
@@ -7,6 +7,7 @@ const {
|
|||||||
selectable = false,
|
selectable = false,
|
||||||
search = false,
|
search = false,
|
||||||
striped = false,
|
striped = false,
|
||||||
|
pagignations = true,
|
||||||
pageSize = 10,
|
pageSize = 10,
|
||||||
fetchData,
|
fetchData,
|
||||||
columnsRendererKey,
|
columnsRendererKey,
|
||||||
@@ -31,7 +32,7 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
|
|||||||
|
|
||||||
<!-- 🖥️ Desktop Table -->
|
<!-- 🖥️ Desktop Table -->
|
||||||
<div
|
<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
|
<table
|
||||||
class={`wr:w-full wr:text-sm ${striped ? "wr:divide-y wr:divide-gray-200 wr:dark:divide-neutral-700" : ""}`}
|
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>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody data-body>
|
<tbody data-body> </tbody>
|
||||||
<!-- {
|
|
||||||
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>
|
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 📱 Mobile Cards -->
|
<!-- 📱 Mobile Cards -->
|
||||||
<div class="wr:space-y-4 wr:md:hidden" data-mobile-body>
|
<div class="wr:space-y-4 wr:md:hidden" data-mobile-body></div>
|
||||||
<!-- {
|
|
||||||
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>
|
|
||||||
|
|
||||||
<!-- 📄 Pagination -->
|
<!-- 📄 Pagination -->
|
||||||
<div
|
{
|
||||||
class="wr:flex wr:justify-between wr:items-center wr:gap-4 wr:flex-wrap wr:mt-4"
|
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">
|
<div class="wr:flex wr:items-center wr:gap-2 wr:text-sm">
|
||||||
<span class="wr:text-gray-600 wr:dark:text-gray-400"
|
<span class="wr:text-gray-600 wr:dark:text-gray-400">
|
||||||
>Rows per page:</span
|
Rows per page:
|
||||||
>
|
</span>
|
||||||
<select
|
<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"
|
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
|
data-page-size
|
||||||
>
|
>
|
||||||
<option value="10">10</option>
|
<option value="10">10</option>
|
||||||
<option value="25">25</option>
|
<option value="25">25</option>
|
||||||
<option value="50">50</option>
|
<option value="50">50</option>
|
||||||
<option value="100">100</option>
|
<option value="100">100</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="wr:flex wr:items-center wr:gap-3 wr:flex-wrap">
|
<div class="wr:flex wr:items-center wr:gap-3 wr:flex-wrap">
|
||||||
<div
|
<div
|
||||||
class="wr:text-sm wr:text-gray-600 wr:dark:text-gray-400"
|
class="wr:text-sm wr:text-gray-600 wr:dark:text-gray-400"
|
||||||
data-page-info
|
data-page-info
|
||||||
>
|
/>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
<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"
|
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
|
data-pagination
|
||||||
>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)
|
||||||
</div>
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script
|
<script
|
||||||
type="module"
|
type="module"
|
||||||
is:inline
|
is:inline
|
||||||
define:vars={{ id, pageSize, fetchData, columns, data, columnsRendererKey }}
|
define:vars={{
|
||||||
|
id,
|
||||||
|
pagignations,
|
||||||
|
pageSize,
|
||||||
|
fetchData,
|
||||||
|
columns,
|
||||||
|
data,
|
||||||
|
columnsRendererKey,
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
const start = () => {
|
const start = () => {
|
||||||
const table = document.getElementById(id);
|
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]");
|
const pageSizeSelector = table.querySelector("[data-page-size]");
|
||||||
|
|
||||||
let currentPage = 1;
|
let currentPage = 1;
|
||||||
let rowsPerPage = parseInt(pageSizeSelector.value);
|
let rowsPerPage = pagignations
|
||||||
|
? parseInt(pageSizeSelector.value)
|
||||||
|
: 9999;
|
||||||
let sortKey = null;
|
let sortKey = null;
|
||||||
let sortOrder = "asc";
|
let sortOrder = "asc";
|
||||||
let totalRows = data.length;
|
let totalRows = data.length;
|
||||||
@@ -212,7 +165,7 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
|
|||||||
|
|
||||||
dataset.forEach((row) => {
|
dataset.forEach((row) => {
|
||||||
// 🖥️ Desktop
|
// 🖥️ 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) => {
|
columns.forEach((col) => {
|
||||||
let value = row[col.key] ?? "";
|
let value = row[col.key] ?? "";
|
||||||
|
|
||||||
@@ -232,7 +185,7 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
|
|||||||
tbody.insertAdjacentHTML("beforeend", tr);
|
tbody.insertAdjacentHTML("beforeend", tr);
|
||||||
|
|
||||||
// 📱 Mobile
|
// 📱 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) => {
|
columns.forEach((col) => {
|
||||||
let value = row[col.key] ?? "";
|
let value = row[col.key] ?? "";
|
||||||
|
|
||||||
|
|||||||
@@ -15,6 +15,7 @@ export interface TableProps<T> {
|
|||||||
selectable?: boolean;
|
selectable?: boolean;
|
||||||
search?: boolean;
|
search?: boolean;
|
||||||
striped?: boolean;
|
striped?: boolean;
|
||||||
|
pagignations?: boolean;
|
||||||
pageSize?: number
|
pageSize?: number
|
||||||
columnsRendererKey?: string
|
columnsRendererKey?: string
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user