feat(sistent): add Table component documentation #7610
+354
−18
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,155 @@ | ||
| --- | ||
| title: Table Code | ||
| component: table | ||
| description: Tables are used to organize and display structured data in rows and columns. | ||
| --- | ||
|
|
||
| Tables help display structured data in an organized and readable format. | ||
|
|
||
| <a id="Basic Table"> | ||
| <h2>Basic Table</h2> | ||
| </a> | ||
|
|
||
| Basic tables are used to display simple structured data. | ||
|
|
||
| <div className="showcase"> | ||
| <div className="items"> | ||
| <ThemeWrapper> | ||
| <Table> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Role</th> | ||
| <th>Status</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>User 1</td> | ||
| <td>Contributor</td> | ||
| <td>Active</td> | ||
| </tr> | ||
| </tbody> | ||
| </Table> | ||
| </ThemeWrapper> | ||
| </div> | ||
|
|
||
| <CodeBlock | ||
| name="basic-table" | ||
| collapsible | ||
| code={`<SistentThemeProvider> | ||
| <Table> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Role</th> | ||
| <th>Status</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>User 1</td> | ||
| <td>Contributor</td> | ||
| <td>Active</td> | ||
| </tr> | ||
| </tbody> | ||
| </Table> | ||
| </SistentThemeProvider>`} | ||
| /> | ||
| </div> | ||
|
|
||
| <a id="Striped Table"> | ||
| <h2>Striped Table</h2> | ||
| </a> | ||
|
|
||
| Striped tables improve readability by alternating row colors. | ||
|
|
||
| <div className="showcase"> | ||
| <div className="items"> | ||
| <ThemeWrapper> | ||
| <Table striped> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Role</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>User 1</td> | ||
| <td>Contributor</td> | ||
| </tr> | ||
| </tbody> | ||
| </Table> | ||
| </ThemeWrapper> | ||
| </div> | ||
|
|
||
| <CodeBlock | ||
| name="striped-table" | ||
| collapsible | ||
| code={`<SistentThemeProvider> | ||
| <Table striped> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Role</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>User 1</td> | ||
| <td>Contributor</td> | ||
| </tr> | ||
| </tbody> | ||
| </Table> | ||
| </SistentThemeProvider>`} | ||
| /> | ||
| </div> | ||
|
|
||
| <a id="Compact Table"> | ||
| <h2>Compact Table</h2> | ||
| </a> | ||
|
|
||
| Compact tables are useful when displaying dense data. | ||
|
|
||
| <div className="showcase"> | ||
| <div className="items"> | ||
| <ThemeWrapper> | ||
| <Table size="small"> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Role</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>User 1</td> | ||
| <td>Contributor</td> | ||
| </tr> | ||
| </tbody> | ||
| </Table> | ||
| </ThemeWrapper> | ||
| </div> | ||
|
|
||
| <CodeBlock | ||
| name="compact-table" | ||
| collapsible | ||
| code={`<SistentThemeProvider> | ||
| <Table size="small"> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Role</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>User 1</td> | ||
| <td>Contributor</td> | ||
| </tr> | ||
| </tbody> | ||
| </Table> | ||
| </SistentThemeProvider>`} | ||
| /> | ||
| </div> |
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,99 @@ | ||
| --- | ||
| title: Table Guidance | ||
| component: table | ||
| description: Tables are used to organize and present structured data clearly and efficiently. | ||
| --- | ||
|
|
||
| import Table from "../../../../components/ConformanceTest-Table" | ||
|
|
||
| Tables help users scan, compare, and understand structured data. Proper usage ensures readability, accessibility, and efficient information delivery. | ||
|
|
||
| <a id="Function"> | ||
| <h2>Function</h2> | ||
| </a> | ||
|
|
||
| Tables are used when structured data needs to be displayed clearly. They help users compare values, understand relationships, and analyze information efficiently. | ||
|
|
||
| <h3>Data Table</h3> | ||
|
|
||
| Data tables are used to display structured information in rows and columns. | ||
|
|
||
| <Row className="image-container"> | ||
| <ThemeWrapper> | ||
| <Table> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Role</th> | ||
| <th>Status</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>User 1</td> | ||
| <td>Contributor</td> | ||
| <td>Active</td> | ||
| </tr> | ||
| </tbody> | ||
| </Table> | ||
| </ThemeWrapper> | ||
| </Row> | ||
|
|
||
| <h3>Compact Table</h3> | ||
|
|
||
| Compact tables are used when space is limited or when displaying large datasets. | ||
|
|
||
| <Row className="image-container"> | ||
| <ThemeWrapper> | ||
| <Table size="small"> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Role</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>User 1</td> | ||
| <td>Contributor</td> | ||
| </tr> | ||
| </tbody> | ||
| </Table> | ||
| </ThemeWrapper> | ||
| </Row> | ||
|
|
||
| <a id="Layout"> | ||
| <h2>Layout</h2> | ||
| </a> | ||
|
|
||
| Tables should maintain consistent spacing and alignment to improve readability. | ||
|
|
||
| ### Column Alignment | ||
|
|
||
| - Left align text content | ||
| - Right align numeric values | ||
| - Center align status indicators | ||
|
|
||
| ### Row Spacing | ||
|
|
||
| Maintain consistent row spacing to ensure clarity and readability. | ||
|
|
||
| <a id="Best Practices"> | ||
| <h2>Best Practices</h2> | ||
| </a> | ||
|
|
||
| - Use headers for clarity | ||
| - Avoid overcrowding columns | ||
| - Keep rows readable | ||
| - Use pagination for large datasets | ||
| - Use sorting where applicable | ||
| - Maintain consistent spacing | ||
|
|
||
| <a id="Accessibility"> | ||
| <h2>Accessibility</h2> | ||
| </a> | ||
|
|
||
| - Use semantic table elements | ||
| - Provide clear headers | ||
| - Maintain contrast for readability | ||
| - Ensure keyboard navigation support |
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,78 @@ | ||
| --- | ||
| name: "Table" | ||
| title: Table | ||
|
Member
There was a problem hiding this comment. This isn’t right; we have more fields here. |
||
| published: true | ||
| component: table | ||
| description: A table is used to organize and display structured data in rows and columns. | ||
| --- | ||
|
|
||
| Tables are used to present structured data in a clear and organized way. They help users scan information quickly, compare values, and understand relationships between data. | ||
|
|
||
| <a id="Types"></a> | ||
|
|
||
| ## Types | ||
|
|
||
| Different types of tables help present information based on use cases and data complexity. | ||
|
|
||
| ### Basic Table | ||
|
|
||
| Basic tables are used to display structured data in rows and columns. | ||
|
|
||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Role</th> | ||
| <th>Status</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>User 1</td> | ||
| <td>Contributor</td> | ||
| <td>Active</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| ### Striped Table | ||
|
|
||
| Striped tables improve readability by alternating row colors. | ||
|
|
||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Role</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>User 1</td> | ||
| <td>Contributor</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <a id="Usage"></a> | ||
|
|
||
| ## Usage | ||
|
|
||
| Tables should be used when: | ||
|
|
||
| - Displaying structured data | ||
| - Comparing values | ||
| - Showing logs or metrics | ||
| - Listing users or resources | ||
|
|
||
| <a id="Best Practices"></a> | ||
|
|
||
| ## Best Practices | ||
|
|
||
| Best practices for using tables: | ||
|
|
||
| - Use headers for clarity | ||
| - Avoid too many columns | ||
| - Keep rows readable | ||
| - Use pagination for large datasets | ||
| - Maintain consistent spacing | ||
|
Member
There was a problem hiding this comment. This navigation is also incorrect. |
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
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
where is the code ?