Writing contentComponents

Table

View as Markdown

Tables display data in rows and columns using standard markdown syntax. For longer datasets, you can make headers sticky, add in-table search, and paginate rows so the table stays easy to scan.

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>

Searchable tables

The <SearchableTable> component enables client-side filtering for large tables. A search input appears above the table that filters rows in real-time using case-insensitive substring matching. Use the placeholder prop to customize the search input placeholder text.

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<SearchableTable>
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</SearchableTable>

Sticky searchable tables

The <StickySearchableTable> component combines both sticky headers and search functionality:

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<StickySearchableTable>
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</StickySearchableTable>

Paginated tables

The <PaginatedTable> component splits long tables into pages with a previous/next footer. Set pageSize to control how many rows appear per page. It defaults to 10.

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
1–6 of 15
Markdown
1<PaginatedTable pageSize={6}>
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</PaginatedTable>

Expandable tables

Add the expandable prop to a <PaginatedTable> to replace the previous/next footer with Show all and Show fewer controls that expand or collapse the full dataset in place. expandable requires pagination, so it applies alongside pageSize.

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
1–6 of 15
Markdown
1<PaginatedTable pageSize={6} expandable>
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</PaginatedTable>

Paginated searchable tables

The <PaginatedSearchableTable> component combines search with pagination. Search filters the full dataset first, then pagination operates on the matching rows. Use the placeholder prop to customize the search input, and add expandable to swap the previous/next footer for Show all / Show fewer.

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
1–6 of 15
Markdown
1<PaginatedSearchableTable pageSize={6}>
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</PaginatedSearchableTable>

HTML table attributes

Any table with className="fern-table" accepts the same behaviors as attributes on the opening <table> tag: sticky for a fixed header, searchable for a search input, and paginate with pageSize for pagination. Add expandable to swap the page footer for Show all / Show fewer controls. The attributes combine freely, and this is the only way to get a table that is both sticky and paginated (the wrapper components don’t include that variant).

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
No results
Markdown
1<table sticky searchable paginate expandable pageSize={6} 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    ...
16  </tbody>
17</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.

<SearchableTable> properties

children
markdown tableRequired

The markdown table to display with search functionality. The table must be formatted using standard markdown table syntax.

placeholder
string

Custom placeholder text for the search input. Defaults to "Search...".

<StickySearchableTable> properties

children
markdown tableRequired

The markdown table to display with both sticky headers and search functionality. The table must be formatted using standard markdown table syntax.

placeholder
string

Custom placeholder text for the search input. Defaults to "Search...".

<PaginatedTable> properties

children
markdown tableRequired

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

pageSize
numberDefaults to 10

The number of rows to display per page.

expandable
boolean

Replaces the previous/next footer with Show all / Show fewer controls that expand or collapse the full dataset in place.

<PaginatedSearchableTable> properties

children
markdown tableRequired

The markdown table to display with both search and pagination. The table must be formatted using standard markdown table syntax.

pageSize
numberDefaults to 10

The number of rows to display per page. Pagination applies to the rows matching the current search.

expandable
boolean

Replaces the previous/next footer with Show all / Show fewer controls that expand or collapse the matching rows in place.

placeholder
string

Custom placeholder text for the search input. Defaults to "Search...".

HTML <table> attributes

sticky
boolean

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

searchable
boolean

When set on an HTML table element, adds a search input above the table that filters rows in real-time using case-insensitive substring matching.

paginate
boolean

When set on an HTML table element, splits rows across pages with a previous/next footer.

pageSize
numberDefaults to 10

The number of rows to display per page. Applies only when paginate is set.

expandable
boolean

Replaces the previous/next footer with Show all / Show fewer controls. Requires paginate.

placeholder
string

Custom placeholder text for the search input when searchable is enabled. Defaults to "Search...".

className
string

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