160 lines
3.9 KiB
TypeScript
160 lines
3.9 KiB
TypeScript
import preview from "#.storybook/preview";
|
|
import { Component, createSignal } from "solid-js";
|
|
|
|
import {
|
|
DataTable,
|
|
DataTableColumnDef,
|
|
} from "../../src/ts/components/ui/table/DataTable";
|
|
|
|
type Person = {
|
|
name: string;
|
|
age: number;
|
|
email: string;
|
|
role: string;
|
|
};
|
|
|
|
const sampleData: Person[] = [
|
|
{ name: "Alice", age: 28, email: "alice@example.com", role: "Engineer" },
|
|
{ name: "Bob", age: 34, email: "bob@example.com", role: "Designer" },
|
|
{ name: "Charlie", age: 22, email: "charlie@example.com", role: "Manager" },
|
|
{ name: "Diana", age: 31, email: "diana@example.com", role: "Engineer" },
|
|
{ name: "Eve", age: 27, email: "eve@example.com", role: "Designer" },
|
|
];
|
|
|
|
const columns: DataTableColumnDef<Person>[] = [
|
|
{
|
|
accessorKey: "name",
|
|
header: "Name",
|
|
enableSorting: true,
|
|
},
|
|
{
|
|
accessorKey: "age",
|
|
header: "Age",
|
|
enableSorting: true,
|
|
meta: { align: "right" as const },
|
|
},
|
|
{
|
|
accessorKey: "email",
|
|
header: "Email",
|
|
enableSorting: false,
|
|
},
|
|
{
|
|
accessorKey: "role",
|
|
header: "Role",
|
|
enableSorting: true,
|
|
},
|
|
];
|
|
|
|
const meta = preview.meta({
|
|
title: "UI/DataTable",
|
|
component: DataTable as Component,
|
|
parameters: {
|
|
layout: "padded",
|
|
},
|
|
tags: ["autodocs"],
|
|
});
|
|
|
|
export const Default = meta.story({
|
|
render: () => (
|
|
<DataTable id="story-default" columns={columns} data={sampleData} />
|
|
),
|
|
});
|
|
|
|
export const WithRowSelection = meta.story({
|
|
render: () => {
|
|
const [activeRow, setActiveRow] = createSignal<string | null>(null);
|
|
return (
|
|
<div>
|
|
<p style={{ color: "var(--sub-color)", "margin-bottom": "8px" }}>
|
|
Click a row to select it. Active: {activeRow() ?? "none"}
|
|
</p>
|
|
<DataTable
|
|
id="story-selection"
|
|
columns={columns.map((col) => ({
|
|
...col,
|
|
meta: {
|
|
...col.meta,
|
|
cellMeta: () => ({
|
|
style: "cursor: pointer",
|
|
onClick: () => {
|
|
const key = (col as { accessorKey?: string }).accessorKey;
|
|
if (key === "name") return;
|
|
},
|
|
}),
|
|
},
|
|
}))}
|
|
data={sampleData}
|
|
rowSelection={{
|
|
getRowId: (row) => row.name,
|
|
class: "bg-main/10",
|
|
activeRow,
|
|
}}
|
|
/>
|
|
<div style={{ display: "flex", gap: "4px", "margin-top": "8px" }}>
|
|
{sampleData.map((p) => (
|
|
<button
|
|
style={{
|
|
padding: "4px 8px",
|
|
"background-color":
|
|
activeRow() === p.name
|
|
? "var(--main-color)"
|
|
: "var(--sub-alt-color)",
|
|
color:
|
|
activeRow() === p.name
|
|
? "var(--bg-color)"
|
|
: "var(--text-color)",
|
|
border: "none",
|
|
"border-radius": "4px",
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={() =>
|
|
setActiveRow((prev) => (prev === p.name ? null : p.name))
|
|
}
|
|
>
|
|
{p.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
});
|
|
|
|
export const Empty = meta.story({
|
|
render: () => <DataTable id="story-empty" columns={columns} data={[]} />,
|
|
});
|
|
|
|
export const EmptyWithNoDataRow = meta.story({
|
|
render: () => (
|
|
<DataTable id="story-nodata" columns={columns} data={[]} noDataRow />
|
|
),
|
|
});
|
|
|
|
export const EmptyWithCustomNoData = meta.story({
|
|
render: () => (
|
|
<DataTable
|
|
id="story-custom-nodata"
|
|
columns={columns}
|
|
data={[]}
|
|
noDataRow={{
|
|
content: (
|
|
<span style={{ color: "var(--error-color)" }}>
|
|
No results found. Try a different search.
|
|
</span>
|
|
),
|
|
}}
|
|
/>
|
|
),
|
|
});
|
|
|
|
export const HiddenHeader = meta.story({
|
|
render: () => (
|
|
<DataTable
|
|
id="story-no-header"
|
|
columns={columns}
|
|
data={sampleData}
|
|
hideHeader
|
|
/>
|
|
),
|
|
});
|