81 lines
1.8 KiB
TypeScript
81 lines
1.8 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCaption,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@konobangu/design-system/components/ui/table';
|
|
|
|
const invoices = [
|
|
{
|
|
invoice: 'INV001',
|
|
paymentStatus: 'Paid',
|
|
totalAmount: '$250.00',
|
|
paymentMethod: 'Credit Card',
|
|
},
|
|
{
|
|
invoice: 'INV002',
|
|
paymentStatus: 'Pending',
|
|
totalAmount: '$150.00',
|
|
paymentMethod: 'PayPal',
|
|
},
|
|
{
|
|
invoice: 'INV003',
|
|
paymentStatus: 'Unpaid',
|
|
totalAmount: '$350.00',
|
|
paymentMethod: 'Bank Transfer',
|
|
},
|
|
{
|
|
invoice: 'INV004',
|
|
paymentStatus: 'Paid',
|
|
totalAmount: '$450.00',
|
|
paymentMethod: 'Credit Card',
|
|
},
|
|
];
|
|
|
|
/**
|
|
* Powerful table and datagrids built using TanStack Table.
|
|
*/
|
|
const meta = {
|
|
title: 'ui/Table',
|
|
component: Table,
|
|
tags: ['autodocs'],
|
|
argTypes: {},
|
|
render: (args) => (
|
|
<Table {...args}>
|
|
<TableCaption>A list of your recent invoices.</TableCaption>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-[100px]">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.paymentStatus}</TableCell>
|
|
<TableCell>{invoice.paymentMethod}</TableCell>
|
|
<TableCell className="text-right">{invoice.totalAmount}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
),
|
|
} satisfies Meta<typeof Table>;
|
|
|
|
export default meta;
|
|
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
/**
|
|
* The default form of the table.
|
|
*/
|
|
export const Default: Story = {};
|