veza/apps/web/src/components/data/Table.stories.tsx

69 lines
1.6 KiB
TypeScript
Raw Normal View History

import type { Meta, StoryObj } from '@storybook/react';
import { Table, type TableColumn } from './Table';
type SampleRow = { id: string; name: string; age: number; email: string };
const sampleColumns: TableColumn<SampleRow>[] = [
{ key: 'name', header: 'Nom', sortable: true },
{ key: 'age', header: 'Âge', sortable: true },
{ key: 'email', header: 'Email', sortable: false },
];
const sampleData: SampleRow[] = [
{ id: '1', name: 'Alice', age: 28, email: 'alice@example.com' },
{ id: '2', name: 'Bob', age: 32, email: 'bob@example.com' },
{ id: '3', name: 'Charlie', age: 24, email: 'charlie@example.com' },
];
const meta: Meta = {
title: 'Data/Table',
component: Table,
tags: ['autodocs'],
parameters: {
layout: 'padded',
},
};
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
columns: sampleColumns,
data: sampleData,
emptyMessage: 'Aucune donnée disponible',
},
};
export const Empty: Story = {
args: {
columns: sampleColumns,
data: [],
emptyMessage: 'Aucune donnée disponible',
},
};
export const Paginated: Story = {
args: {
columns: sampleColumns,
data: Array.from({ length: 25 }, (_, i) => ({
id: String(i + 1),
name: `User ${i + 1}`,
age: 20 + i,
email: `user${i + 1}@example.com`,
})),
paginated: true,
itemsPerPage: 10,
emptyMessage: 'Aucune donnée disponible',
},
};
export const Selectable: Story = {
args: {
columns: sampleColumns,
data: sampleData,
selectable: true,
emptyMessage: 'Aucune donnée disponible',
},
};