82 lines
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
import { html, type TemplateResult } from "lit";
|
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
|
|
import "@/components/ui/table";
|
|
|
|
const columns = {
|
|
name: {
|
|
title: "Name",
|
|
},
|
|
email: {
|
|
title: "Email",
|
|
},
|
|
role: {
|
|
title: "Role",
|
|
},
|
|
remove: {
|
|
title: html`<span class="sr-only">Remove</span>`,
|
|
renderItem: () => html`<sl-icon name="trash3"></sl-icon>`,
|
|
},
|
|
} satisfies RenderProps["columns"];
|
|
const rows: { data: Omit<Record<keyof typeof columns, unknown>, "remove"> }[] =
|
|
[
|
|
{
|
|
data: {
|
|
name: "Alice",
|
|
email: "alice@example.com",
|
|
role: 40,
|
|
},
|
|
},
|
|
{
|
|
data: { name: "Bob", email: "bob@example.com", role: 20 },
|
|
},
|
|
] satisfies RenderProps["rows"];
|
|
|
|
export interface RenderProps {
|
|
columns: Record<
|
|
string,
|
|
{
|
|
title: string | TemplateResult;
|
|
classes?: string;
|
|
renderItem?: (data: Record<string, unknown>) => TemplateResult;
|
|
}
|
|
>;
|
|
rows: {
|
|
data: Record<string, unknown>;
|
|
classes?: string;
|
|
}[];
|
|
}
|
|
|
|
export const defaultArgs = { columns, rows } satisfies RenderProps;
|
|
|
|
export const renderTable = ({ columns: headers, rows: items }: RenderProps) => {
|
|
return html`
|
|
<btrix-table>
|
|
<btrix-table-head>
|
|
${Object.values(headers).map(
|
|
({ title, classes }) => html`
|
|
<btrix-table-header-cell class=${ifDefined(classes)}>
|
|
${title}
|
|
</btrix-table-header-cell>
|
|
`,
|
|
)}
|
|
</btrix-table-head>
|
|
<btrix-table-body>
|
|
${items.map(
|
|
({ classes, data }) => html`
|
|
<btrix-table-row class=${ifDefined(classes)}>
|
|
${Object.entries(headers).map(
|
|
([key, { renderItem }]) => html`
|
|
<btrix-table-cell class=${ifDefined(classes)}>
|
|
${renderItem ? renderItem(data) : data[key]}
|
|
</btrix-table-cell>
|
|
`,
|
|
)}
|
|
</btrix-table-row>
|
|
`,
|
|
)}
|
|
</btrix-table-body>
|
|
</btrix-table>
|
|
`;
|
|
};
|