Sticky tables

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.

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.

PlantLight RequirementsWater
FernPartial shadeWeekly
Snake PlantLow to bright indirectBi-weekly
MonsteraBright indirectWeekly
PothosLow to bright indirectWeekly
Fiddle Leaf FigBright indirectWeekly
Peace LilyLow to medium indirectWeekly
Rubber PlantBright indirectWeekly
ZZ PlantLow to bright indirectBi-weekly
PhilodendronMedium to bright indirectWeekly
Aloe VeraBright directBi-weekly
Boston FernPartial shade2-3x weekly
Spider PlantMedium to bright indirectWeekly
DracaenaMedium indirectWeekly
Bird of ParadiseBright indirect to directWeekly
CalatheaMedium indirectWeekly

Below is an example of a sticky table. As you scroll down the page, the header row remains frozen at the top of the table.

PlantLight RequirementsWater
FernPartial shadeWeekly
Snake PlantLow to bright indirectBi-weekly
MonsteraBright indirectWeekly
PothosLow to bright indirectWeekly
Fiddle Leaf FigBright indirectWeekly
Peace LilyLow to medium indirectWeekly
Rubber PlantBright indirectWeekly
ZZ PlantLow to bright indirectBi-weekly
PhilodendronMedium to bright indirectWeekly
Aloe VeraBright directBi-weekly
Boston FernPartial shade2-3x weekly
Spider PlantMedium to bright indirectWeekly
DracaenaMedium indirectWeekly
Bird of ParadiseBright indirect to directWeekly
CalatheaMedium indirectWeekly

Create a sticky table

Using Markdown

Simply wrap any Markdown table with <StickyTable> tags to make the header sticky. No changes to your table syntax are needed.

1<StickyTable>
2
3| Plant | Light Requirements | Water |
4|-------|-------------------|-------|
5| Fern | Partial shade | Weekly |
6| Snake Plant | Low to bright indirect | Bi-weekly |
7
8</StickyTable>

Using HTML

Simply add the sticky attribute to the opening <table> tag. No further changes to your table syntax are needed.

1<table sticky className="fern-table">
2 <thead>
3 <tr>
4 <th>Plant</th>
5 <th>Light Requirements</th>
6 <th>Water</th>
7 </tr>
8 </thead>
9 <tbody>
10 <tr>
11 <td>Fern</td>
12 <td>Partial shade</td>
13 <td>Weekly</td>
14 </tr>
15 <tr>
16 <td>Snake Plant</td>
17 <td>Low to bright indirect</td>
18 <td>Bi-weekly</td>
19 </tr>
20 </tbody>
21</table>

Style a sticky table

Sticky tables can be styled independently from regular tables. To add custom styling, target the .fern-table.sticky selector:

1.fern-table.sticky {
2 //custom css here
3}