Skip to content

Commit 07af86f

Browse files
authored
feat(prospect,client): table component and mobile version
* feat(look&feel,apollo): nouveau composant table * feat(look&feel,apollo): documentation with mdx * fix(look&feel,apollo): pr feedback, actions & controls * fix(look&feel,apollo): complete example and clickicon * feat(look&feel,apollo): css optimization & cell size modification * feat(look&feel,apollo): pr feedback on table mobile card * feat(look&feel,apollo): adaptative size & custom scroll * feat(look&feel,apollo): new tokens for tableCard and table
1 parent 1db756f commit 07af86f

File tree

37 files changed

+3019
-4
lines changed

37 files changed

+3019
-4
lines changed
Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { Canvas, Controls, Meta } from "@storybook/addon-docs";
2+
import * as TableStories from "./Table.stories";
3+
4+
<Meta of={TableStories} name="Table" />
5+
6+
# Table
7+
8+
To use the table import it like that:
9+
10+
```tsx
11+
import { Table } from "@axa-fr/canopee-react/prospect";
12+
13+
const MyComponent = () => (
14+
<Table>
15+
<Table.THead variant="blue">
16+
<Table.Tr>
17+
<Table.Th>Nom</Table.Th>
18+
<Table.Th>Email</Table.Th>
19+
</Table.Tr>
20+
</Table.THead>
21+
<Table.TBody>
22+
<Table.Tr>
23+
<Table.Td>Jean Dupont</Table.Td>
24+
<Table.Td>jean.dupont@example.com</Table.Td>
25+
</Table.Tr>
26+
</Table.TBody>
27+
</Table>
28+
);
29+
```
30+
31+
## Usage
32+
33+
The Table component is a compound component with the following sub-components:
34+
35+
- `Table.THead` - Table header with optional `variant` prop
36+
- `Table.TBody` - Table body with optional `variant` prop
37+
- `Table.Tr` - Table row with optional `size` and variant props
38+
- `Table.Th` - Table header cell with optional `onSort`, `onCheck`, `checkboxPosition` props
39+
- `Table.Td` - Table data cell with optional `position`, `verticalAlign`, `variant` and `size` props
40+
41+
## Examples
42+
43+
### Basic Table
44+
45+
<Canvas of={TableStories.BasicTable} />
46+
47+
### Alternate Variants
48+
49+
Use `variant="alternate"` on `Table.TBody` to get zebra-striped rows.
50+
51+
<Canvas of={TableStories.AlternateVariantTable} />
52+
53+
### With Tags
54+
55+
Tables work great with other components like Tags for status indicators.
56+
57+
<Canvas of={TableStories.TableWithTags} />
58+
59+
### With Buttons
60+
61+
Tables can include interactive elements like buttons for actions.
62+
63+
<Canvas of={TableStories.TableWithButtons} />
64+
65+
### Different Sizes
66+
67+
Use the `size` prop on `Table.Tr` to control row height ("S", "M", "L").
68+
69+
<Canvas of={TableStories.TableWithDifferentSizes} />
70+
71+
### Text Alignment
72+
73+
Use the `position` prop on `Table.Td` to align cell content ("left", "center", "right").
74+
75+
<Canvas of={TableStories.TableWithAlignments} />
76+
77+
### Compact Table
78+
79+
<Canvas of={TableStories.CompactTable} />

0 commit comments

Comments
 (0)