WorkRoot/Astro-Component
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New Changes with Table Component

Browse Source
This commit is contained in:
Clintchiz
2025-10-27 13:24:35 +05:30
parent db1063addd
commit 7013ec3d01
3 changed files with 49 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/make-dist.mjs
+1 -1
View File
@@ -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 WebRtcPlayer } from "../src/components/WebRtcPlayer.astro";
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) */
src/components/Table.astro
+28 -75
View File
@@ -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,79 +71,21 @@ 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"
>
{
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
>
<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
@@ -158,22 +101,30 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
<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-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>
<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] ?? "";
src/types/table/types.ts
+1
View File
@@ -15,6 +15,7 @@ export interface TableProps<T> {
selectable?: boolean;
search?: boolean;
striped?: boolean;
pagignations?: boolean;
pageSize?: number
columnsRendererKey?: string
}