Writing contentComponents

Table

View as Markdown

Tables display data in rows and columns using standard markdown syntax. For longer datasets, you can use sticky table headers that remain visible while scrolling.

Usage

Create tables using standard markdown syntax with pipes (|) and hyphens (-):

PlantLight RequirementsWater
FernPartial shadeWeekly
Snake PlantLow to bright indirectBi-weekly
MonsteraBright indirectWeekly
Markdown
1| Plant | Light Requirements | Water |
2|-------|-------------------|-------|
3| Fern | Partial shade | Weekly |
4| Snake Plant | Low to bright indirect | Bi-weekly |
5| Monstera | Bright indirect | Weekly |

Variants

Sticky headers

The <StickyTable> component adds a fixed header that remains visible while scrolling. Use sticky tables for longer datasets where users need to reference column headers throughout 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
Markdown
1<StickyTable>
2| Plant | Light Requirements | Water |
3|-------|-------------------|-------|
4| Fern | Partial shade | Weekly |
5| Snake Plant | Low to bright indirect | Bi-weekly |
6| Monstera | Bright indirect | Weekly |
7| Pothos | Low to bright indirect | Weekly |
8| Fiddle Leaf Fig | Bright indirect | Weekly |
9| Peace Lily | Low to medium indirect | Weekly |
10| Rubber Plant | Bright indirect | Weekly |
11| ZZ Plant | Low to bright indirect | Bi-weekly |
12| Philodendron | Medium to bright indirect | Weekly |
13| Aloe Vera | Bright direct | Bi-weekly |
14| Boston Fern | Partial shade | 2-3x weekly |
15| Spider Plant | Medium to bright indirect | Weekly |
16| Dracaena | Medium indirect | Weekly |
17| Bird of Paradise | Bright indirect to direct | Weekly |
18| Calathea | Medium indirect | Weekly |
19</StickyTable>

HTML tables with sticky headers

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

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
Markdown
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    <tr>
21      <td>Monstera</td>
22      <td>Bright indirect</td>
23      <td>Weekly</td>
24    </tr>
25    <tr>
26      <td>Pothos</td>
27      <td>Low to bright indirect</td>
28      <td>Weekly</td>
29    </tr>
30    <tr>
31      <td>Fiddle Leaf Fig</td>
32      <td>Bright indirect</td>
33      <td>Weekly</td>
34    </tr>
35    <tr>
36      <td>Peace Lily</td>
37      <td>Low to medium indirect</td>
38      <td>Weekly</td>
39    </tr>
40    <tr>
41      <td>Rubber Plant</td>
42      <td>Bright indirect</td>
43      <td>Weekly</td>
44    </tr>
45    <tr>
46      <td>ZZ Plant</td>
47      <td>Low to bright indirect</td>
48      <td>Bi-weekly</td>
49    </tr>
50    <tr>
51      <td>Philodendron</td>
52      <td>Medium to bright indirect</td>
53      <td>Weekly</td>
54    </tr>
55    <tr>
56      <td>Aloe Vera</td>
57      <td>Bright direct</td>
58      <td>Bi-weekly</td>
59    </tr>
60    <tr>
61      <td>Boston Fern</td>
62      <td>Partial shade</td>
63      <td>2-3x weekly</td>
64    </tr>
65    <tr>
66      <td>Spider Plant</td>
67      <td>Medium to bright indirect</td>
68      <td>Weekly</td>
69    </tr>
70    <tr>
71      <td>Dracaena</td>
72      <td>Medium indirect</td>
73      <td>Weekly</td>
74    </tr>
75    <tr>
76      <td>Bird of Paradise</td>
77      <td>Bright indirect to direct</td>
78      <td>Weekly</td>
79    </tr>
80    <tr>
81      <td>Calathea</td>
82      <td>Medium indirect</td>
83      <td>Weekly</td>
84    </tr>
85  </tbody>
86</table>

Custom styling

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}

Properties

<StickyTable> properties

children
markdown tableRequired

The markdown table to display with sticky headers. The table must be formatted using standard markdown table syntax.

HTML <table> attributes

sticky
boolean

When set on an HTML table element, makes the table header sticky during scrolling.

className
string

CSS class name(s) to apply to the table. Use fern-table for default Fern styling.