import { ScrollingModule } from "@angular/cdk/scrolling";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { countries } from "../form/countries";
import { TableDataSource } from "./table-data-source";
import { TableModule } from "./table.module";
export default {
title: "Component Library/Table",
decorators: [
moduleMetadata({
imports: [TableModule, ScrollingModule],
}),
],
argTypes: {
alignRowContent: {
options: ["top", "middle", "bottom", "baseline"],
control: { type: "select" },
},
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=1881%3A18371",
},
},
} as Meta;
type Story = StoryObj;
export const Default: Story = {
render: (args) => ({
props: args,
template: `
Header 1 |
Header 2 |
Header 3 |
Cell 1 |
Cell 2 Multiline Cell |
Cell 3 |
Cell 4 |
Cell 5 |
Cell 6 |
Cell 7 Multiline Cell |
Cell 8 |
Cell 9 |
`,
}),
args: {
alignRowContent: "baseline",
},
};
const data = new TableDataSource<{ id: number; name: string; other: string }>();
data.data = [...Array(5).keys()].map((i) => ({
id: i,
name: `name-${i}`,
other: `other-${i}`,
}));
export const DataSource: Story = {
render: (args) => ({
props: {
dataSource: data,
sortFn: (a: any, b: any) => a.id - b.id,
},
template: `
Id |
Name |
Other |
{{ r.id }} |
{{ r.name }} |
{{ r.other }} |
`,
}),
};
const data2 = new TableDataSource<{ id: number; name: string; other: string }>();
data2.data = [...Array(100).keys()].map((i) => ({
id: i,
name: `name-${i}`,
other: `other-${i}`,
}));
export const Scrollable: Story = {
render: (args) => ({
props: {
dataSource: data2,
sortFn: (a: any, b: any) => a.id - b.id,
},
template: `
Id |
Name |
Other |
{{ r.id }} |
{{ r.name }} |
{{ r.other }} |
`,
}),
};
const data3 = new TableDataSource<{ value: string; name: string }>();
// Chromatic has a max page size, lowering the number of entries to ensure we don't hit it
data3.data = countries.slice(0, 100);
export const Filterable: Story = {
render: (args) => ({
props: {
dataSource: data3,
sortFn: (a: any, b: any) => a.id - b.id,
},
template: `
Name |
Value |
{{ r.name }} |
{{ r.value }} |
`,
}),
};
const data4 = new TableDataSource<{ name: string }>();
data4.data = [...Array(5).keys()].map((i) => ({
name: i % 2 == 0 ? `name-${i}`.toUpperCase() : `name-${i}`.toLowerCase(),
}));
export const VariableCase: Story = {
render: (args) => ({
props: {
dataSource: data4,
},
template: `
Name |
{{ r.name }} |
`,
}),
};