61 lines
1.8 KiB
JavaScript
61 lines
1.8 KiB
JavaScript
import { $html, $for, $if } from "sigpro";
|
|
import { val, joinClass } from "../core/utils.js";
|
|
import { tt } from "../core/i18n.js";
|
|
|
|
/** TABLE */
|
|
export const Table = (props) => {
|
|
const {
|
|
items = [],
|
|
columns = [],
|
|
keyFn,
|
|
zebra = false,
|
|
pinRows = false,
|
|
empty = tt("nodata")(),
|
|
...rest
|
|
} = props;
|
|
|
|
const tableClass = () => joinClass(
|
|
"table",
|
|
`${val(zebra) ? "table-zebra" : ""} ${val(pinRows) ? "table-pin-rows" : ""} ${props.class || ""}`
|
|
);
|
|
|
|
return $html("div", { class: "overflow-x-auto w-full bg-base-100 rounded-box border border-base-300" }, [
|
|
$html("table", { ...rest, class: tableClass }, [
|
|
$html("thead", {}, [
|
|
$html("tr", {},
|
|
columns.map(col => $html("th", { class: col.class || "" }, col.label))
|
|
)
|
|
]),
|
|
$html("tbody", {}, [
|
|
$for(items, (item, index) => {
|
|
return $html("tr", { class: "hover" },
|
|
columns.map(col => {
|
|
const cellContent = () => {
|
|
if (col.render) return col.render(item, index);
|
|
const value = item[col.key];
|
|
return val(value);
|
|
};
|
|
return $html("td", { class: col.class || "" }, [cellContent]);
|
|
})
|
|
);
|
|
}, keyFn || ((item, idx) => item.id || idx)),
|
|
|
|
$if(() => val(items).length === 0, () =>
|
|
$html("tr", {}, [
|
|
$html("td", { colspan: columns.length, class: "text-center p-10 opacity-50" }, [
|
|
val(empty)
|
|
])
|
|
])
|
|
)
|
|
]),
|
|
$if(() => columns.some(c => c.footer), () =>
|
|
$html("tfoot", {}, [
|
|
$html("tr", {},
|
|
columns.map(col => $html("th", {}, col.footer || ""))
|
|
)
|
|
])
|
|
)
|
|
])
|
|
]);
|
|
};
|