2026-02-06 10:22:47 +00:00
|
|
|
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' },
|
|
|
|
|
];
|
|
|
|
|
|
2026-02-12 23:32:08 +00:00
|
|
|
const meta: Meta = {
|
2026-02-06 10:22:47 +00:00
|
|
|
title: 'Data/Table',
|
|
|
|
|
component: Table,
|
|
|
|
|
tags: ['autodocs'],
|
|
|
|
|
parameters: {
|
|
|
|
|
layout: 'padded',
|
|
|
|
|
},
|
2026-02-12 23:32:08 +00:00
|
|
|
};
|
2026-02-06 10:22:47 +00:00
|
|
|
|
|
|
|
|
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',
|
|
|
|
|
},
|
|
|
|
|
};
|