Skip to content

Commit 2fee297

Browse files
SohamsigSohamsig
committed
Fix review comments for Table component documentation
1 parent 9b7a07a commit 2fee297

File tree

4 files changed

+333
-73
lines changed

4 files changed

+333
-73
lines changed

‎src/collections/sistent/components/table/code.mdx‎

Lines changed: 140 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,155 @@
11
---
2-
title: Code
2+
title: Table Code
3+
component: table
4+
description: Tables are used to organize and display structured data in rows and columns.
35
---
46

5-
# Table Examples
7+
Tables help display structured data in an organized and readable format.
68

7-
## Basic Table
9+
<a id="Basic Table">
10+
<h2>Basic Table</h2>
11+
</a>
812

9-
<ThemeWrapper>
10-
<CodeBlock>
13+
Basic tables are used to display simple structured data.
1114

12-
```jsx
13-
<Table>
14-
<thead>
15-
<tr>
16-
<th>Name</th>
17-
<th>Status</th>
18-
</tr>
19-
</thead>
20-
<tbody>
21-
<tr>
22-
<td>Example</td>
23-
<td>Active</td>
24-
</tr>
25-
</tbody>
26-
</Table>
27-
```
15+
<div className="showcase">
16+
<div className="items">
17+
<ThemeWrapper>
18+
<Table>
19+
<thead>
20+
<tr>
21+
<th>Name</th>
22+
<th>Role</th>
23+
<th>Status</th>
24+
</tr>
25+
</thead>
26+
<tbody>
27+
<tr>
28+
<td>User 1</td>
29+
<td>Contributor</td>
30+
<td>Active</td>
31+
</tr>
32+
</tbody>
33+
</Table>
34+
</ThemeWrapper>
35+
</div>
2836

29-
</CodeBlock>
30-
</ThemeWrapper>
37+
<CodeBlock
38+
name="basic-table"
39+
collapsible
40+
code={`<SistentThemeProvider>
41+
<Table>
42+
<thead>
43+
<tr>
44+
<th>Name</th>
45+
<th>Role</th>
46+
<th>Status</th>
47+
</tr>
48+
</thead>
49+
<tbody>
50+
<tr>
51+
<td>User 1</td>
52+
<td>Contributor</td>
53+
<td>Active</td>
54+
</tr>
55+
</tbody>
56+
</Table>
57+
</SistentThemeProvider>`}
58+
/>
59+
</div>
3160

32-
## Sortable Table
61+
<a id="Striped Table">
62+
<h2>Striped Table</h2>
63+
</a>
3364

34-
<ThemeWrapper>
35-
<CodeBlock>
65+
Striped tables improve readability by alternating row colors.
3666

37-
```jsx
38-
<Table sortable>
39-
...
40-
</Table>
41-
```
67+
<div className="showcase">
68+
<div className="items">
69+
<ThemeWrapper>
70+
<Table striped>
71+
<thead>
72+
<tr>
73+
<th>Name</th>
74+
<th>Role</th>
75+
</tr>
76+
</thead>
77+
<tbody>
78+
<tr>
79+
<td>User 1</td>
80+
<td>Contributor</td>
81+
</tr>
82+
</tbody>
83+
</Table>
84+
</ThemeWrapper>
85+
</div>
4286

43-
</CodeBlock>
44-
</ThemeWrapper>
87+
<CodeBlock
88+
name="striped-table"
89+
collapsible
90+
code={`<SistentThemeProvider>
91+
<Table striped>
92+
<thead>
93+
<tr>
94+
<th>Name</th>
95+
<th>Role</th>
96+
</tr>
97+
</thead>
98+
<tbody>
99+
<tr>
100+
<td>User 1</td>
101+
<td>Contributor</td>
102+
</tr>
103+
</tbody>
104+
</Table>
105+
</SistentThemeProvider>`}
106+
/>
107+
</div>
45108

46-
## Paginated Table
109+
<a id="Compact Table">
110+
<h2>Compact Table</h2>
111+
</a>
47112

48-
<ThemeWrapper>
49-
<CodeBlock>
113+
Compact tables are useful when displaying dense data.
50114

51-
```jsx
52-
<Table pagination>
53-
...
54-
</Table>
55-
```
115+
<div className="showcase">
116+
<div className="items">
117+
<ThemeWrapper>
118+
<Table size="small">
119+
<thead>
120+
<tr>
121+
<th>Name</th>
122+
<th>Role</th>
123+
</tr>
124+
</thead>
125+
<tbody>
126+
<tr>
127+
<td>User 1</td>
128+
<td>Contributor</td>
129+
</tr>
130+
</tbody>
131+
</Table>
132+
</ThemeWrapper>
133+
</div>
56134

57-
</CodeBlock>
58-
</ThemeWrapper>
135+
<CodeBlock
136+
name="compact-table"
137+
collapsible
138+
code={`<SistentThemeProvider>
139+
<Table size="small">
140+
<thead>
141+
<tr>
142+
<th>Name</th>
143+
<th>Role</th>
144+
</tr>
145+
</thead>
146+
<tbody>
147+
<tr>
148+
<td>User 1</td>
149+
<td>Contributor</td>
150+
</tr>
151+
</tbody>
152+
</Table>
153+
</SistentThemeProvider>`}
154+
/>
155+
</div>

‎src/collections/sistent/components/table/guidance.mdx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
---
2+
title: Table Guidance
3+
component: table
4+
description: Tables are used to organize and present structured data clearly and efficiently.
5+
---
6+
7+
Tables help users scan, compare, and understand structured data. Proper usage ensures readability, accessibility, and efficient information delivery.
8+
9+
<a id="Function">
10+
<h2>Function</h2>
11+
</a>
12+
13+
Tables are used when structured data needs to be displayed clearly. They help users compare values, understand relationships, and analyze information efficiently.
14+
15+
<h3>Data Table</h3>
16+
17+
Data tables are used to display structured information in rows and columns.
18+
19+
<Row className="image-container">
20+
<ThemeWrapper>
21+
<Table>
22+
<thead>
23+
<tr>
24+
<th>Name</th>
25+
<th>Role</th>
26+
<th>Status</th>
27+
</tr>
28+
</thead>
29+
<tbody>
30+
<tr>
31+
<td>User 1</td>
32+
<td>Contributor</td>
33+
<td>Active</td>
34+
</tr>
35+
</tbody>
36+
</Table>
37+
</ThemeWrapper>
38+
</Row>
39+
40+
<h3>Compact Table</h3>
41+
42+
Compact tables are used when space is limited or when displaying large datasets.
43+
44+
<Row className="image-container">
45+
<ThemeWrapper>
46+
<Table size="small">
47+
<thead>
48+
<tr>
49+
<th>Name</th>
50+
<th>Role</th>
51+
</tr>
52+
</thead>
53+
<tbody>
54+
<tr>
55+
<td>User 1</td>
56+
<td>Contributor</td>
57+
</tr>
58+
</tbody>
59+
</Table>
60+
</ThemeWrapper>
61+
</Row>
62+
63+
<a id="Layout">
64+
<h2>Layout</h2>
65+
</a>
66+
67+
Tables should maintain consistent spacing and alignment to improve readability.
68+
69+
### Column Alignment
70+
71+
- Left align text content
72+
- Right align numeric values
73+
- Center align status indicators
74+
75+
### Row Spacing
76+
77+
Maintain consistent row spacing to ensure clarity and readability.
78+
79+
<a id="Best Practices">
80+
<h2>Best Practices</h2>
81+
</a>
82+
83+
- Use headers for clarity
84+
- Avoid overcrowding columns
85+
- Keep rows readable
86+
- Use pagination for large datasets
87+
- Use sorting where applicable
88+
- Maintain consistent spacing
89+
90+
<a id="Accessibility">
91+
<h2>Accessibility</h2>
92+
</a>
93+
94+
- Use semantic table elements
95+
- Provide clear headers
96+
- Maintain contrast for readability
97+
- Ensure keyboard navigation support

‎src/collections/sistent/components/table/index.mdx‎

Lines changed: 75 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,84 @@
11
---
2+
name: "Table"
23
title: Table
4+
published: true
5+
component: table
6+
description: A table is used to organize and display structured data in rows and columns.
37
---
48

5-
# Table
9+
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.
610

7-
The Table component is used to display structured data in rows and columns in a clear and organized manner.
11+
<a id="Types">
12+
<h2>Types</h2>
13+
</a>
814

9-
## Overview
15+
Different types of tables help present information based on use cases and data complexity.
1016

11-
Tables are commonly used to present:
17+
<h3>Basic Table</h3>
1218

13-
- Lists of data
14-
- Metrics and statistics
15-
- Logs and records
16-
- Configuration details
19+
Basic tables are used to display structured data in rows and columns.
1720

18-
The Table component in Sistent supports features like sorting, pagination, and selectable rows, making it useful for handling structured datasets across Layer5 projects.
21+
<Row className="image-container">
22+
<ThemeWrapper>
23+
<Table>
24+
<thead>
25+
<tr>
26+
<th>Name</th>
27+
<th>Role</th>
28+
<th>Status</th>
29+
</tr>
30+
</thead>
31+
<tbody>
32+
<tr>
33+
<td>User 1</td>
34+
<td>Contributor</td>
35+
<td>Active</td>
36+
</tr>
37+
</tbody>
38+
</Table>
39+
</ThemeWrapper>
40+
</Row>
41+
42+
<h3>Striped Table</h3>
43+
44+
Striped tables improve readability by alternating row colors.
45+
46+
<Row className="image-container">
47+
<ThemeWrapper>
48+
<Table striped>
49+
<thead>
50+
<tr>
51+
<th>Name</th>
52+
<th>Role</th>
53+
</tr>
54+
</thead>
55+
<tbody>
56+
<tr>
57+
<td>User 1</td>
58+
<td>Contributor</td>
59+
</tr>
60+
</tbody>
61+
</Table>
62+
</ThemeWrapper>
63+
</Row>
64+
65+
<a id="Usage">
66+
<h2>Usage</h2>
67+
</a>
68+
69+
Tables should be used when:
70+
71+
- Displaying structured data
72+
- Comparing values
73+
- Showing logs or metrics
74+
- Listing users or resources
75+
76+
<a id="Best Practices">
77+
<h2>Best Practices</h2>
78+
</a>
79+
80+
- Use headers for clarity
81+
- Avoid too many columns
82+
- Keep rows readable
83+
- Use pagination for large datasets
84+
- Maintain consistent spacing

0 commit comments

Comments
 (0)