51 lines
1.3 KiB
Markdown
51 lines
1.3 KiB
Markdown
import { Canvas, Meta, Story } from "@storybook/addon-docs";
|
|
|
|
import {
|
|
Examples,
|
|
Example,
|
|
Title,
|
|
VariantsTable,
|
|
CustomArgsTable,
|
|
VariantRow,
|
|
} from "@calcom/storybook/components";
|
|
|
|
import { TableNewExampleComponent } from "./TableExamples";
|
|
import { Table } from "./TableNew";
|
|
|
|
<Meta title="UI/Table/TableNew" component={Table} />
|
|
|
|
<Title title="Table New" suffix="Brief" subtitle="Version 1.0 — Last Update: 21 Aug 2023" />
|
|
|
|
## Definition
|
|
|
|
The `Table` component (from TableNew.tsx) is a HTML table that utilizes Tailwind classes to enhance its styles.
|
|
|
|
## Structure
|
|
|
|
The `Table` component should be used with other table sub-components (exported in the same file) that follow the same pattern.
|
|
These components render common elements that are styled with Tailwind. These components include:
|
|
|
|
- `TableBody` -> (`tbody`)
|
|
- `TableHeader` -> (`thead`)
|
|
- `TableRow` -> (`tr`)
|
|
- `TableHead` -> (`th`)
|
|
- `TableCell` -> (`td`)
|
|
- `TableFooter` -> (`tfoot`)
|
|
- `TableCaption` -> (`caption`)
|
|
|
|
<CustomArgsTable of={Table} />
|
|
|
|
<Title offset title="Table New" suffix="Variants" />
|
|
|
|
<Canvas>
|
|
<Story name="Table New">
|
|
{(props) => (
|
|
<VariantsTable titles={["Default"]} columnMinWidth={150}>
|
|
<VariantRow>
|
|
<TableNewExampleComponent />
|
|
</VariantRow>
|
|
</VariantsTable>
|
|
)}
|
|
</Story>
|
|
</Canvas>
|