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 = ""; tbody.innerHTML = "";
mobileBody.innerHTML = ""; mobileBody.innerHTML = "";
dataset.forEach((row, i) => { if (dataset.length > 0) {
const rowCls = resolveClasses(classNames?.row, row, i); dataset.forEach((row, i) => {
const rowCls = resolveClasses(classNames?.row, row, i);
// 🖥️ Desktop // 🖥️ Desktop
let tr = `<tr data-row-idx="${i}" class="${[ 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", "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" : "", dataset.length - 1 != i ? "wr:border-b" : "",
"wr:border-gray-300 wr:dark:border-neutral-800", "wr:border-gray-300 wr:dark:border-neutral-800",
rowCls, rowCls,
rowClickFn ? "wr:cursor-pointer" : "", rowClickFn ? "wr:cursor-pointer" : "",
] ]
.filter(Boolean) .filter(Boolean)
.join(" ")}">`; .join(" ")}">`;
columns.forEach((col, colIndex) => { columns.forEach((col, colIndex) => {
let value = row[col.key] ?? ""; let value = row[col.key] ?? "";
const renderers = columnsRendererKey const renderers = columnsRendererKey
? window[columnsRendererKey] ? window[columnsRendererKey]
: {}; : {};
columns.forEach((col) => { columns.forEach((col) => {
if (renderers[col.key]) col.render = renderers[col.key]; 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) { tbody.onclick = (e) => {
value = col.render(value, row); 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( // 📱 Mobile
classNames?.column, 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" : ""}">`;
col, columns.forEach((col, colIndex) => {
colIndex, let value = row[col.key] ?? "";
);
const cellCls = resolveClasses(classNames?.cell, {
row,
value,
col,
i,
colIndex,
});
tr += `<td class="wr:px-4 wr:py-3 ${columnCls} ${cellCls}">${value}</td>`; const renderers = columnsRendererKey
}); ? window[columnsRendererKey]
tr += `</tr>`; : {};
tbody.insertAdjacentHTML("beforeend", tr); columns.forEach((c) => {
if (renderers[c.key]) c.render = renderers[c.key];
});
tbody.onclick = (e) => { if (col.render) value = col.render(value, row);
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);
};
// 📱 Mobile const columnCls = resolveClasses(
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" : ""}">`; classNames?.column,
columns.forEach((col, colIndex) => { col,
let value = row[col.key] ?? ""; colIndex,
);
const cellCls = resolveClasses(classNames?.cell, {
row,
value,
col,
i,
colIndex,
});
const renderers = columnsRendererKey card += `
? 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 += `
<div class="wr:flex wr:justify-between wr:items-start wr:gap-4"> <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: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 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>`; </div>`;
}); });
card += `</div>`; card += `</div>`;
mobileBody.insertAdjacentHTML("beforeend", card); mobileBody.insertAdjacentHTML("beforeend", card);
mobileBody.onclick = (e) => { mobileBody.onclick = (e) => {
if (!rowClickFn) return; if (!rowClickFn) return;
const tr = e.target.closest("div[data-row-idx]"); const tr = e.target.closest("div[data-row-idx]");
if (!tr) return; if (!tr) return;
const idx = Number(tr.dataset.rowIdx); const idx = Number(tr.dataset.rowIdx);
const row = dataset[idx]; const row = dataset[idx];
rowClickFn(row); 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() { async function loadData() {
src/pages/table.astro
+8
View File
@@ -255,6 +255,14 @@ const studentColumns = [
<ComponentLayout> <ComponentLayout>
<div class="wr:p-4"> <div class="wr:p-4">
<Table
columns={columns}
data={[]}
columnsRendererKey="columnsRenderer"
/>
<br />
<Table <Table
columns={columns} columns={columns}
data={data} data={data}