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

New Changes with Table

Browse Source
This commit is contained in:
Clintchiz
2025-11-08 19:45:00 +05:30
parent 7ae8961d4a
commit 1b4f928bcd
2 changed files with 109 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Table.astro
+101 -85
View File
@@ -200,106 +200,122 @@ const id = `table-${Math.random().toString(36).slice(2, 9)}`;
tbody.innerHTML = "";
mobileBody.innerHTML = "";
dataset.forEach((row, i) => {
const rowCls = resolveClasses(classNames?.row, row, i);
if (dataset.length > 0) {
dataset.forEach((row, i) => {
const rowCls = resolveClasses(classNames?.row, row, i);
// 🖥️ Desktop
let tr = `<tr data-row-idx="${i}" class="${[
"wr:transition wr:bg-white wr:dark:bg-neutral-900 wr:hover:bg-gray-100 wr:dark:hover:bg-neutral-700",
dataset.length - 1 != i ? "wr:border-b" : "",
"wr:border-gray-300 wr:dark:border-neutral-800",
rowCls,
rowClickFn ? "wr:cursor-pointer" : "",
]
.filter(Boolean)
.join(" ")}">`;
// 🖥️ Desktop
let tr = `<tr data-row-idx="${i}" class="${[
"wr:transition wr:bg-white wr:dark:bg-neutral-900 wr:hover:bg-gray-100 wr:dark:hover:bg-neutral-700",
dataset.length - 1 != i ? "wr:border-b" : "",
"wr:border-gray-300 wr:dark:border-neutral-800",
rowCls,
rowClickFn ? "wr:cursor-pointer" : "",
]
.filter(Boolean)
.join(" ")}">`;
columns.forEach((col, colIndex) => {
let value = row[col.key] ?? "";
columns.forEach((col, colIndex) => {
let value = row[col.key] ?? "";
const renderers = columnsRendererKey
? window[columnsRendererKey]
: {};
columns.forEach((col) => {
if (renderers[col.key]) col.render = renderers[col.key];
const renderers = columnsRendererKey
? window[columnsRendererKey]
: {};
columns.forEach((col) => {
if (renderers[col.key])
col.render = renderers[col.key];
});
if (col.render) {
value = col.render(value, row);
}
const columnCls = resolveClasses(
classNames?.column,
col,
colIndex,
);
const cellCls = resolveClasses(classNames?.cell, {
row,
value,
col,
i,
colIndex,
});
tr += `<td class="wr:px-4 wr:py-3 ${columnCls} ${cellCls}">${value}</td>`;
});
tr += `</tr>`;
tbody.insertAdjacentHTML("beforeend", tr);
if (col.render) {
value = col.render(value, row);
}
tbody.onclick = (e) => {
if (!rowClickFn) return;
const tr = e.target.closest("tr[data-row-idx]");
if (!tr) return;
const idx = Number(tr.dataset.rowIdx);
const row = dataset[idx];
rowClickFn(row);
};
const columnCls = resolveClasses(
classNames?.column,
col,
colIndex,
);
const cellCls = resolveClasses(classNames?.cell, {
row,
value,
col,
i,
colIndex,
});
// 📱 Mobile
let card = `<div data-row-idx="${i}" 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 ${rowClickFn ? "wr:cursor-pointer" : ""}">`;
columns.forEach((col, colIndex) => {
let value = row[col.key] ?? "";
tr += `<td class="wr:px-4 wr:py-3 ${columnCls} ${cellCls}">${value}</td>`;
});
tr += `</tr>`;
tbody.insertAdjacentHTML("beforeend", tr);
const renderers = columnsRendererKey
? window[columnsRendererKey]
: {};
columns.forEach((c) => {
if (renderers[c.key]) c.render = renderers[c.key];
});
tbody.onclick = (e) => {
if (!rowClickFn) return;
const tr = e.target.closest("tr[data-row-idx]");
if (!tr) return;
const idx = Number(tr.dataset.rowIdx);
const row = dataset[idx];
rowClickFn(row);
};
if (col.render) value = col.render(value, row);
// 📱 Mobile
let card = `<div data-row-idx="${i}" 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 ${rowClickFn ? "wr:cursor-pointer" : ""}">`;
columns.forEach((col, colIndex) => {
let value = row[col.key] ?? "";
const columnCls = resolveClasses(
classNames?.column,
col,
colIndex,
);
const cellCls = resolveClasses(classNames?.cell, {
row,
value,
col,
i,
colIndex,
});
const renderers = columnsRendererKey
? window[columnsRendererKey]
: {};
columns.forEach((c) => {
if (renderers[c.key]) c.render = renderers[c.key];
});
if (col.render) value = col.render(value, row);
const columnCls = resolveClasses(
classNames?.column,
col,
colIndex,
);
const cellCls = resolveClasses(classNames?.cell, {
row,
value,
col,
i,
colIndex,
});
card += `
card += `
<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 ${cellCls}">${value}</div>
</div>`;
});
card += `</div>`;
mobileBody.insertAdjacentHTML("beforeend", card);
});
card += `</div>`;
mobileBody.insertAdjacentHTML("beforeend", card);
mobileBody.onclick = (e) => {
if (!rowClickFn) return;
const tr = e.target.closest("div[data-row-idx]");
if (!tr) return;
const idx = Number(tr.dataset.rowIdx);
const row = dataset[idx];
rowClickFn(row);
};
});
mobileBody.onclick = (e) => {
if (!rowClickFn) return;
const tr = e.target.closest("div[data-row-idx]");
if (!tr) return;
const idx = Number(tr.dataset.rowIdx);
const row = dataset[idx];
rowClickFn(row);
};
});
} else {
const noDataRow = `<tr><td class="${[
"wr:transition wr:bg-white wr:dark:bg-neutral-900 wr:p-4",
"wr:border-gray-300 wr:dark:border-neutral-800 wr:text-center",
]
.filter(Boolean)
.join(
" ",
)}" colspan="${columns.length}">No data available</td></tr>`;
tbody.insertAdjacentHTML("beforeend", noDataRow);
const noDataCard = `<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">No data available</div>`;
mobileBody.insertAdjacentHTML("beforeend", noDataCard);
}
}
async function loadData() {
src/pages/table.astro
+8
View File
@@ -255,6 +255,14 @@ const studentColumns = [
<ComponentLayout>
<div class="wr:p-4">
<Table
columns={columns}
data={[]}
columnsRendererKey="columnsRenderer"
/>
<br />
<Table
columns={columns}
data={data}