You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: fern/products/docs/pages/component-library/default-components/sticky-tables.mdx
+62-3Lines changed: 62 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ description: Display tables with sticky headers that remain visible while scroll
5
5
6
6
The `StickyTable` component provides a way to display tabular data with a fixed header that remains visible while scrolling through table rows. This is particularly useful for longer tables where users need to reference column headers while viewing data further down the table.
7
7
8
-
Below is an example of a **normal Markdown table**. As you scroll down the page, the entire table including the header scrolls out of view.
8
+
Below is an example of a **normal Markdown table**. As you scroll down the page, the entire table, including the header, scrolls out of view.
9
9
10
10
| Plant | Light Requirements | Water |
11
11
|-------|-------------------|-------|
@@ -50,6 +50,8 @@ Below is an example of a **sticky table**. As you scroll down the page, the head
50
50
51
51
## Create a sticky table
52
52
53
+
### Using Markdown
54
+
53
55
Simply wrap any Markdown table with `<StickyTable>` tags to make the header sticky. No changes to your table syntax are needed.
54
56
55
57
<Tabs>
@@ -75,12 +77,69 @@ Simply wrap any Markdown table with `<StickyTable>` tags to make the header stic
75
77
</Tab>
76
78
</Tabs>
77
79
78
-
### Style a sticky table
80
+
### Using HTML
81
+
82
+
Simply add the `sticky` attribute to the opening `<table>` tag. No further changes to your table syntax are needed.
83
+
84
+
<Tabs>
85
+
<Tabtitle="Markdown">
86
+
<CodeBlock>
87
+
```markdown
88
+
<table sticky className="fern-table">
89
+
<thead>
90
+
<tr>
91
+
<th>Plant</th>
92
+
<th>Light Requirements</th>
93
+
<th>Water</th>
94
+
</tr>
95
+
</thead>
96
+
<tbody>
97
+
<tr>
98
+
<td>Fern</td>
99
+
<td>Partial shade</td>
100
+
<td>Weekly</td>
101
+
</tr>
102
+
<tr>
103
+
<td>Snake Plant</td>
104
+
<td>Low to bright indirect</td>
105
+
<td>Bi-weekly</td>
106
+
</tr>
107
+
</tbody>
108
+
</table>
109
+
```
110
+
</CodeBlock>
111
+
</Tab>
112
+
<Tabtitle="Preview">
113
+
<tablestickyclassName="fern-table">
114
+
<thead>
115
+
<tr>
116
+
<th>Plant</th>
117
+
<th>Light Requirements</th>
118
+
<th>Water</th>
119
+
</tr>
120
+
</thead>
121
+
<tbody>
122
+
<tr>
123
+
<td>Fern</td>
124
+
<td>Partial shade</td>
125
+
<td>Weekly</td>
126
+
</tr>
127
+
<tr>
128
+
<td>Snake Plant</td>
129
+
<td>Low to bright indirect</td>
130
+
<td>Bi-weekly</td>
131
+
</tr>
132
+
</tbody>
133
+
</table>
134
+
</Tab>
135
+
</Tabs>
136
+
137
+
## Style a sticky table
79
138
80
139
Sticky tables can be styled independently from regular tables. To add custom styling, target the `.fern-table.sticky` selector:
0 commit comments