Skip to content

Commit 0f9866f

Browse files
SohamsigSohamsig
committed
feat(sistent): update table docs structure and add states
Signed-off-by: Soham Babrekar <soham.babrekar@gmail.com>
1 parent 7eb7b39 commit 0f9866f

2 files changed

Lines changed: 184 additions & 152 deletions

File tree

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

Lines changed: 52 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,14 @@ component: table
44
description: Tables are used to organize and display structured data in rows and columns.
55
---
66

7-
import Table from "../../../../components/ConformanceTest-Table"
8-
import ThemeWrapper from "../../../../components/ThemeWrapper"
9-
import CodeBlock from "../../../../components/CodeBlock"
7+
import {
8+
Table,
9+
TableBody,
10+
TableCell,
11+
TableContainer,
12+
TableHead,
13+
TableRow
14+
} from "@sistent/sistent"
1015

1116
Tables help display structured data in an organized and readable format.
1217

@@ -18,48 +23,25 @@ Basic tables are used to display simple structured data.
1823

1924
<div className="showcase">
2025
<div className="items">
21-
<ThemeWrapper>
26+
<TableContainer>
2227
<Table>
23-
<thead>
24-
<tr>
25-
<th>Name</th>
26-
<th>Role</th>
27-
<th>Status</th>
28-
</tr>
29-
</thead>
30-
<tbody>
31-
<tr>
32-
<td>User 1</td>
33-
<td>Contributor</td>
34-
<td>Active</td>
35-
</tr>
36-
</tbody>
28+
<TableHead>
29+
<TableRow>
30+
<TableCell>Name</TableCell>
31+
<TableCell>Role</TableCell>
32+
<TableCell>Status</TableCell>
33+
</TableRow>
34+
</TableHead>
35+
<TableBody>
36+
<TableRow>
37+
<TableCell>User 1</TableCell>
38+
<TableCell>Contributor</TableCell>
39+
<TableCell>Active</TableCell>
40+
</TableRow>
41+
</TableBody>
3742
</Table>
38-
</ThemeWrapper>
43+
</TableContainer>
3944
</div>
40-
41-
<CodeBlock
42-
name="basic-table"
43-
collapsible
44-
code={`<SistentThemeProvider>
45-
<Table>
46-
<thead>
47-
<tr>
48-
<th>Name</th>
49-
<th>Role</th>
50-
<th>Status</th>
51-
</tr>
52-
</thead>
53-
<tbody>
54-
<tr>
55-
<td>User 1</td>
56-
<td>Contributor</td>
57-
<td>Active</td>
58-
</tr>
59-
</tbody>
60-
</Table>
61-
</SistentThemeProvider>`}
62-
/>
6345
</div>
6446

6547
<a id="Striped Table">
@@ -70,44 +52,23 @@ Striped tables improve readability by alternating row colors.
7052

7153
<div className="showcase">
7254
<div className="items">
73-
<ThemeWrapper>
55+
<TableContainer>
7456
<Table striped>
75-
<thead>
76-
<tr>
77-
<th>Name</th>
78-
<th>Role</th>
79-
</tr>
80-
</thead>
81-
<tbody>
82-
<tr>
83-
<td>User 1</td>
84-
<td>Contributor</td>
85-
</tr>
86-
</tbody>
57+
<TableHead>
58+
<TableRow>
59+
<TableCell>Name</TableCell>
60+
<TableCell>Role</TableCell>
61+
</TableRow>
62+
</TableHead>
63+
<TableBody>
64+
<TableRow>
65+
<TableCell>User 1</TableCell>
66+
<TableCell>Contributor</TableCell>
67+
</TableRow>
68+
</TableBody>
8769
</Table>
88-
</ThemeWrapper>
70+
</TableContainer>
8971
</div>
90-
91-
<CodeBlock
92-
name="striped-table"
93-
collapsible
94-
code={`<SistentThemeProvider>
95-
<Table striped>
96-
<thead>
97-
<tr>
98-
<th>Name</th>
99-
<th>Role</th>
100-
</tr>
101-
</thead>
102-
<tbody>
103-
<tr>
104-
<td>User 1</td>
105-
<td>Contributor</td>
106-
</tr>
107-
</tbody>
108-
</Table>
109-
</SistentThemeProvider>`}
110-
/>
11172
</div>
11273

11374
<a id="Compact Table">
@@ -118,42 +79,21 @@ Compact tables are useful when displaying dense data.
11879

11980
<div className="showcase">
12081
<div className="items">
121-
<ThemeWrapper>
82+
<TableContainer>
12283
<Table size="small">
123-
<thead>
124-
<tr>
125-
<th>Name</th>
126-
<th>Role</th>
127-
</tr>
128-
</thead>
129-
<tbody>
130-
<tr>
131-
<td>User 1</td>
132-
<td>Contributor</td>
133-
</tr>
134-
</tbody>
84+
<TableHead>
85+
<TableRow>
86+
<TableCell>Name</TableCell>
87+
<TableCell>Role</TableCell>
88+
</TableRow>
89+
</TableHead>
90+
<TableBody>
91+
<TableRow>
92+
<TableCell>User 1</TableCell>
93+
<TableCell>Contributor</TableCell>
94+
</TableRow>
95+
</TableBody>
13596
</Table>
136-
</ThemeWrapper>
97+
</TableContainer>
13798
</div>
138-
139-
<CodeBlock
140-
name="compact-table"
141-
collapsible
142-
code={`<SistentThemeProvider>
143-
<Table size="small">
144-
<thead>
145-
<tr>
146-
<th>Name</th>
147-
<th>Role</th>
148-
</tr>
149-
</thead>
150-
<tbody>
151-
<tr>
152-
<td>User 1</td>
153-
<td>Contributor</td>
154-
</tr>
155-
</tbody>
156-
</Table>
157-
</SistentThemeProvider>`}
158-
/>
15999
</div>

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

Lines changed: 132 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -6,64 +6,156 @@ component: table
66
description: A table is used to organize and display structured data in rows and columns.
77
---
88

9+
import {
10+
Table,
11+
TableBody,
12+
TableCell,
13+
TableContainer,
14+
TableHead,
15+
TableRow
16+
} from "@sistent/sistent"
17+
918
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.
1019

11-
## Types
20+
## Overview
21+
22+
Tables help organize data into rows and columns, making it easier to read and analyze information.
23+
24+
---
25+
26+
## Usage
27+
28+
Tables should be used when:
29+
30+
- Displaying structured data
31+
- Comparing values
32+
- Showing logs or metrics
33+
- Listing users or resources
34+
35+
---
1236

13-
Different types of tables help present information based on use cases and data complexity.
37+
## Examples
1438

1539
### Basic Table
1640

1741
Basic tables are used to display structured data in rows and columns.
1842

19-
<table>
20-
<thead>
21-
<tr>
22-
<th>Name</th>
23-
<th>Role</th>
24-
<th>Status</th>
25-
</tr>
26-
</thead>
27-
<tbody>
28-
<tr>
29-
<td>User 1</td>
30-
<td>Contributor</td>
31-
<td>Active</td>
32-
</tr>
33-
</tbody>
34-
</table>
43+
<TableContainer>
44+
<Table>
45+
<TableHead>
46+
<TableRow>
47+
<TableCell>Name</TableCell>
48+
<TableCell>Role</TableCell>
49+
<TableCell>Status</TableCell>
50+
</TableRow>
51+
</TableHead>
52+
<TableBody>
53+
<TableRow>
54+
<TableCell>User 1</TableCell>
55+
<TableCell>Contributor</TableCell>
56+
<TableCell>Active</TableCell>
57+
</TableRow>
58+
</TableBody>
59+
</Table>
60+
</TableContainer>
61+
62+
---
3563

3664
### Striped Table
3765

3866
Striped tables improve readability by alternating row colors.
3967

40-
<table>
41-
<thead>
42-
<tr>
43-
<th>Name</th>
44-
<th>Role</th>
45-
</tr>
46-
</thead>
47-
<tbody>
48-
<tr>
49-
<td>User 1</td>
50-
<td>Contributor</td>
51-
</tr>
52-
</tbody>
53-
</table>
68+
<TableContainer>
69+
<Table striped>
70+
<TableHead>
71+
<TableRow>
72+
<TableCell>Name</TableCell>
73+
<TableCell>Role</TableCell>
74+
</TableRow>
75+
</TableHead>
76+
<TableBody>
77+
<TableRow>
78+
<TableCell>User 1</TableCell>
79+
<TableCell>Contributor</TableCell>
80+
</TableRow>
81+
</TableBody>
82+
</Table>
83+
</TableContainer>
5484

55-
## Usage
85+
---
5686

57-
Tables should be used when:
87+
## States
5888

59-
- Displaying structured data
60-
- Comparing values
61-
- Showing logs or metrics
62-
- Listing users or resources
89+
### Sortable Table
6390

64-
## Best Practices
91+
Tables can support sorting to help users organize data.
92+
93+
<TableContainer>
94+
<Table>
95+
<TableHead>
96+
<TableRow>
97+
<TableCell>Name</TableCell>
98+
<TableCell>Role</TableCell>
99+
</TableRow>
100+
</TableHead>
101+
<TableBody>
102+
<TableRow>
103+
<TableCell>User 1</TableCell>
104+
<TableCell>Contributor</TableCell>
105+
</TableRow>
106+
</TableBody>
107+
</Table>
108+
</TableContainer>
109+
110+
---
111+
112+
### Selectable Rows
113+
114+
Tables can allow row selection.
65115

66-
Best practices for using tables:
116+
<TableContainer>
117+
<Table>
118+
<TableHead>
119+
<TableRow>
120+
<TableCell>Name</TableCell>
121+
<TableCell>Role</TableCell>
122+
</TableRow>
123+
</TableHead>
124+
<TableBody>
125+
<TableRow>
126+
<TableCell>User 1</TableCell>
127+
<TableCell>Contributor</TableCell>
128+
</TableRow>
129+
</TableBody>
130+
</Table>
131+
</TableContainer>
132+
133+
---
134+
135+
### Paginated Table
136+
137+
Tables can support pagination for large datasets.
138+
139+
<TableContainer>
140+
<Table>
141+
<TableHead>
142+
<TableRow>
143+
<TableCell>Name</TableCell>
144+
<TableCell>Role</TableCell>
145+
</TableRow>
146+
</TableHead>
147+
<TableBody>
148+
<TableRow>
149+
<TableCell>User 1</TableCell>
150+
<TableCell>Contributor</TableCell>
151+
</TableRow>
152+
</TableBody>
153+
</Table>
154+
</TableContainer>
155+
156+
---
157+
158+
## Best Practices
67159

68160
- Use headers for clarity
69161
- Avoid too many columns

0 commit comments

Comments
 (0)