-
Notifications
You must be signed in to change notification settings - Fork 89
feat(prospect,client): table component and mobile version #1660
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
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 9718765
feat(look&feel,apollo): working arrays
pjbeaugendre 50e3a41
fix(look&feel,apollo): export and style builded
pjbeaugendre 3436d87
feat(look&feel,apollo): documentation with mdx
pjbeaugendre c3364cb
fix(look&feel,apollo): mdx files and presentation
pjbeaugendre 9790c97
fix(look&feel,apollo): merge branch 'main' into table-component
pjbeaugendre 6ee24a2
fix(look&feel,apollo): pr feedback, actions & controls
pjbeaugendre 7f3fa1c
fix(look&feel,apollo): merge 'origin/main' into table-component
pjbeaugendre 3d94468
fix(look&feel,apollo): back to previous type
pjbeaugendre 5425250
fix(look&feel,apollo): merge branch into table-component
pjbeaugendre 4808f04
fix(look&feel,apollo): merge 'origin/main' into table-component
pjbeaugendre 49c6cd4
fix(look&feel,apollo): complete example and clickicon
pjbeaugendre c81d5cf
fix(look&feel,apollo): pr feedback on id
pjbeaugendre 2e2e940
feat(look&feel,apollo): table card component (#1680)
pjbeaugendre e5fdbd8
feat(look&feel,apollo): css optimization & cell size modification
pjbeaugendre a8eb1e4
feat(look&feel,apollo): pr feedback on table mobile card
pjbeaugendre f1b1000
feat(look&feel,apollo): adaptative size & custom scroll
pjbeaugendre 72edaff
Merge 'origin/main' into table-component
pjbeaugendre a05a5a8
feat(look&feel,apollo): new tokens for tableCard and table
pjbeaugendre File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | ||
pjbeaugendre marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| <Canvas of={TableStories.CompactTable} /> | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.