49 lines
1.2 KiB
Plaintext
49 lines
1.2 KiB
Plaintext
|
import { Canvas, Meta, Story } from "@storybook/addon-docs";
|
||
|
|
|
||
|
|
import {
|
||
|
|
Examples,
|
||
|
|
Example,
|
||
|
|
Title,
|
||
|
|
VariantsTable,
|
||
|
|
CustomArgsTable,
|
||
|
|
VariantRow,
|
||
|
|
} from "@calcom/storybook/components";
|
||
|
|
|
||
|
|
import { Table } from "./Table";
|
||
|
|
import { TableExampleComponent } from "./TableExamples";
|
||
|
|
|
||
|
|
<Meta title="UI/Table/Table" component={Table} />
|
||
|
|
|
||
|
|
<Title title="Table" suffix="Brief" subtitle="Version 1.0 — Last Update: 21 Aug 2023" />
|
||
|
|
|
||
|
|
## Definition
|
||
|
|
|
||
|
|
The `Table` component is a HTML table that utilizes Tailwind classes to enhance its styles.
|
||
|
|
|
||
|
|
## Structure
|
||
|
|
|
||
|
|
The `Table` component should be used with other table sub-components (present as object attributes) that follow the same pattern.
|
||
|
|
These components render common elements that are styled with Tailwind. These components include:
|
||
|
|
|
||
|
|
- `Body` -> (`tbody`)
|
||
|
|
- `Header` -> (`thead`)
|
||
|
|
- `Row` -> (`tr`)
|
||
|
|
- `ColumnTitle` -> (`th`)
|
||
|
|
- `Cell` -> (`td`)
|
||
|
|
|
||
|
|
<CustomArgsTable of={Table} />
|
||
|
|
|
||
|
|
<Title offset title="Table" suffix="Variants" />
|
||
|
|
|
||
|
|
<Canvas>
|
||
|
|
<Story name="Table">
|
||
|
|
{(props) => (
|
||
|
|
<VariantsTable titles={["Default"]} columnMinWidth={150}>
|
||
|
|
<VariantRow>
|
||
|
|
<TableExampleComponent />
|
||
|
|
</VariantRow>
|
||
|
|
</VariantsTable>
|
||
|
|
)}
|
||
|
|
</Story>
|
||
|
|
</Canvas>
|