Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
589d86a
feat(look&feel,apollo): nouveau composant table
pjbeaugendre Jan 15, 2026
9718765
feat(look&feel,apollo): working arrays
pjbeaugendre Jan 21, 2026
50e3a41
fix(look&feel,apollo): export and style builded
pjbeaugendre Jan 22, 2026
3436d87
feat(look&feel,apollo): documentation with mdx
pjbeaugendre Jan 22, 2026
c3364cb
fix(look&feel,apollo): mdx files and presentation
pjbeaugendre Jan 22, 2026
9790c97
fix(look&feel,apollo): merge branch 'main' into table-component
pjbeaugendre Jan 22, 2026
6ee24a2
fix(look&feel,apollo): pr feedback, actions & controls
pjbeaugendre Jan 27, 2026
7f3fa1c
fix(look&feel,apollo): merge 'origin/main' into table-component
pjbeaugendre Jan 29, 2026
3d94468
fix(look&feel,apollo): back to previous type
pjbeaugendre Feb 2, 2026
5425250
fix(look&feel,apollo): merge branch into table-component
pjbeaugendre Feb 2, 2026
4808f04
fix(look&feel,apollo): merge 'origin/main' into table-component
pjbeaugendre Feb 2, 2026
49c6cd4
fix(look&feel,apollo): complete example and clickicon
pjbeaugendre Feb 2, 2026
c81d5cf
fix(look&feel,apollo): pr feedback on id
pjbeaugendre Feb 2, 2026
2e2e940
feat(look&feel,apollo): table card component (#1680)
pjbeaugendre Feb 5, 2026
e5fdbd8
feat(look&feel,apollo): css optimization & cell size modification
pjbeaugendre Feb 9, 2026
a8eb1e4
feat(look&feel,apollo): pr feedback on table mobile card
pjbeaugendre Feb 9, 2026
f1b1000
feat(look&feel,apollo): adaptative size & custom scroll
pjbeaugendre Feb 9, 2026
72edaff
Merge 'origin/main' into table-component
pjbeaugendre Feb 24, 2026
a05a5a8
feat(look&feel,apollo): new tokens for tableCard and table
pjbeaugendre Feb 24, 2026
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 79 additions & 0 deletions apps/apollo-stories/src/components/Table/Table.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import { Canvas, Controls, Meta } from "@storybook/addon-docs";
import * as TableStories from "./Table.stories";

<Meta of={TableStories} name="Table" />

# Table

To use the table import it like that:

```tsx
import { Table } from "@axa-fr/canopee-react/prospect";

const MyComponent = () => (
<Table>
<Table.THead variant="blue">
<Table.Tr>
<Table.Th>Nom</Table.Th>
<Table.Th>Email</Table.Th>
</Table.Tr>
</Table.THead>
<Table.TBody>
<Table.Tr>
<Table.Td>Jean Dupont</Table.Td>
<Table.Td>jean.dupont@example.com</Table.Td>
</Table.Tr>
</Table.TBody>
</Table>
);
```

## Usage

The Table component is a compound component with the following sub-components:

- `Table.THead` - Table header with optional `variant` prop
- `Table.TBody` - Table body with optional `variant` prop
- `Table.Tr` - Table row with optional `size` and variant props
- `Table.Th` - Table header cell with optional `onSort`, `onCheck`, `checkboxPosition` props
- `Table.Td` - Table data cell with optional `position`, `verticalAlign`, `variant` and `size` props

## Examples

### Basic Table

<Canvas of={TableStories.BasicTable} />

### Alternate Variants

Use `variant="alternate"` on `Table.TBody` to get zebra-striped rows.

<Canvas of={TableStories.AlternateVariantTable} />

### With Tags

Tables work great with other components like Tags for status indicators.

<Canvas of={TableStories.TableWithTags} />

### With Buttons

Tables can include interactive elements like buttons for actions.

<Canvas of={TableStories.TableWithButtons} />

### Different Sizes

Use the `size` prop on `Table.Tr` to control row height ("S", "M", "L").

<Canvas of={TableStories.TableWithDifferentSizes} />

### Text Alignment

Use the `position` prop on `Table.Td` to align cell content ("left", "center", "right").

<Canvas of={TableStories.TableWithAlignments} />

### Compact Table

<Canvas of={TableStories.CompactTable} />
Loading
Loading