feat(sistent): add Table component documentation #7610
+290
−0
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,59 @@ | ||
| --- | ||
| title: Table Guidance | ||
| component: table | ||
| description: Guidelines and best practices for using tables effectively. | ||
| --- | ||
|
|
||
| ## Function | ||
|
|
||
| Tables are used to organize structured data into rows and columns. They help users quickly scan, compare, and understand information. | ||
|
|
||
| Tables are useful for: | ||
|
|
||
| - Presenting structured data | ||
| - Comparing multiple values | ||
| - Displaying logs and metrics | ||
| - Listing users or resources | ||
|
|
||
| --- | ||
|
|
||
| ## Usage | ||
|
|
||
| Use tables when: | ||
|
|
||
| - Data must be compared | ||
| - Information is structured | ||
| - Users need quick scanning | ||
| - Displaying rows and columns | ||
|
|
||
| Avoid using tables when: | ||
|
|
||
| - Content is mostly text | ||
| - Layout is simple | ||
| - Data does not require comparison | ||
|
|
||
| --- | ||
|
|
||
| ## Best Practices | ||
|
|
||
| Follow these best practices when using tables: | ||
|
|
||
| - Use clear headers | ||
| - Avoid too many columns | ||
| - Keep rows readable | ||
| - Use pagination for large datasets | ||
| - Maintain consistent spacing | ||
|
|
||
| ### Use Clear Headers | ||
|
|
||
| Always include headers for better readability. | ||
|
|
||
| ```html | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Role</th> | ||
| </tr> | ||
| </thead> | ||
| </table> |
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 | ||
|
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 ?