118 lines
3.2 KiB
TypeScript
118 lines
3.2 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
|
|
import {
|
|
Table,
|
|
TableHeader,
|
|
TableBody,
|
|
TableFooter,
|
|
TableHead,
|
|
TableRow,
|
|
TableCell,
|
|
TableCaption,
|
|
} from '@/components/ui/table'
|
|
|
|
const meta = {
|
|
title: 'Data/Table',
|
|
component: Table,
|
|
tags: ['autodocs'],
|
|
parameters: { layout: 'centered' },
|
|
} satisfies Meta<typeof Table>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
const invoices = [
|
|
{ invoice: 'INV001', status: 'Paid', method: 'Credit Card', amount: '$250.00' },
|
|
{ invoice: 'INV002', status: 'Pending', method: 'PayPal', amount: '$150.00' },
|
|
{ invoice: 'INV003', status: 'Unpaid', method: 'Bank Transfer', amount: '$350.00' },
|
|
{ invoice: 'INV004', status: 'Paid', method: 'Credit Card', amount: '$450.00' },
|
|
{ invoice: 'INV005', status: 'Paid', method: 'PayPal', amount: '$550.00' },
|
|
]
|
|
|
|
export const Default: Story = {
|
|
render: () => (
|
|
<div className="w-150">
|
|
<Table>
|
|
<TableCaption>A list of your recent invoices.</TableCaption>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-25">Invoice</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead>Method</TableHead>
|
|
<TableHead className="text-right">Amount</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{invoices.map((invoice) => (
|
|
<TableRow key={invoice.invoice}>
|
|
<TableCell className="font-medium">{invoice.invoice}</TableCell>
|
|
<TableCell>{invoice.status}</TableCell>
|
|
<TableCell>{invoice.method}</TableCell>
|
|
<TableCell className="text-right">{invoice.amount}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
<TableFooter>
|
|
<TableRow>
|
|
<TableCell colSpan={3}>Total</TableCell>
|
|
<TableCell className="text-right">$1,750.00</TableCell>
|
|
</TableRow>
|
|
</TableFooter>
|
|
</Table>
|
|
</div>
|
|
),
|
|
}
|
|
|
|
export const Simple: Story = {
|
|
render: () => (
|
|
<div className="w-100">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Name</TableHead>
|
|
<TableHead>Role</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell>Alice</TableCell>
|
|
<TableCell>Engineer</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>Bob</TableCell>
|
|
<TableCell>Designer</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>Charlie</TableCell>
|
|
<TableCell>Manager</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
),
|
|
}
|
|
|
|
export const Empty: Story = {
|
|
render: () => (
|
|
<div className="w-100">
|
|
<Table>
|
|
<TableCaption>No data available.</TableCaption>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Name</TableHead>
|
|
<TableHead>Email</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell colSpan={3} className="text-center text-muted-foreground h-24">
|
|
No results found.
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
),
|
|
}
|