Skip to content

Commit 33e2ed4

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

File tree

2 files changed

+263
-0
lines changed

2 files changed

+263
-0
lines changed

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

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
---
2+
title: Table Code
3+
component: table
4+
description: Tables are used to organize and display structured data in rows and columns.
5+
---
6+
7+
import {
8+
Table,
9+
TableBody,
10+
TableCell,
11+
TableContainer,
12+
TableHead,
13+
TableRow
14+
} from "@sistent/sistent"
15+
16+
Tables help display structured data in an organized and readable format.
17+
18+
<a id="Basic Table">
19+
<h2>Basic Table</h2>
20+
</a>
21+
22+
Basic tables are used to display simple structured data.
23+
24+
<div className="showcase">
25+
<div className="items">
26+
<TableContainer>
27+
<Table>
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>
42+
</Table>
43+
</TableContainer>
44+
</div>
45+
</div>
46+
47+
<a id="Striped Table">
48+
<h2>Striped Table</h2>
49+
</a>
50+
51+
Striped tables improve readability by alternating row colors.
52+
53+
<div className="showcase">
54+
<div className="items">
55+
<TableContainer>
56+
<Table striped>
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>
69+
</Table>
70+
</TableContainer>
71+
</div>
72+
</div>
73+
74+
<a id="Compact Table">
75+
<h2>Compact Table</h2>
76+
</a>
77+
78+
Compact tables are useful when displaying dense data.
79+
80+
<div className="showcase">
81+
<div className="items">
82+
<TableContainer>
83+
<Table size="small">
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>
96+
</Table>
97+
</TableContainer>
98+
</div>
99+
</div>

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

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
---
2+
name: "Table"
3+
title: Table
4+
published: true
5+
component: table
6+
description: A table is used to organize and display structured data in rows and columns.
7+
---
8+
9+
import {
10+
Table,
11+
TableBody,
12+
TableCell,
13+
TableContainer,
14+
TableHead,
15+
TableRow
16+
} from "@sistent/sistent"
17+
18+
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.
19+
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+
---
36+
37+
## Examples
38+
39+
### Basic Table
40+
41+
Basic tables are used to display structured data in rows and columns.
42+
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+
---
63+
64+
### Striped Table
65+
66+
Striped tables improve readability by alternating row colors.
67+
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>
84+
85+
---
86+
87+
## States
88+
89+
### Sortable Table
90+
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.
115+
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
159+
160+
- Use headers for clarity
161+
- Avoid too many columns
162+
- Keep rows readable
163+
- Use pagination for large datasets
164+
- Maintain consistent spacing

0 commit comments

Comments
 (0)