From 83b552ebbadb6127b4380026afd1ab8032f0dc8c Mon Sep 17 00:00:00 2001 From: Devin Logan Date: Thu, 21 Aug 2025 14:13:21 -0400 Subject: [PATCH 1/3] new page on sticky tables --- fern/products/docs/docs.yml | 3 + .../default-components/sticky-tables.mdx | 81 +++++++++++++++++++ 2 files changed, 84 insertions(+) create mode 100644 fern/products/docs/pages/component-library/default-components/sticky-tables.mdx diff --git a/fern/products/docs/docs.yml b/fern/products/docs/docs.yml index dee42a94..2625237b 100644 --- a/fern/products/docs/docs.yml +++ b/fern/products/docs/docs.yml @@ -84,6 +84,9 @@ navigation: - page: Steps path: ./pages/component-library/default-components/steps.mdx icon: fa-duotone fa-list-ol + - page: Sticky tables + path: ./pages/component-library/default-components/sticky-tables.mdx + icon: fa-duotone fa-table - page: Tabs path: ./pages/component-library/default-components/tabs.mdx icon: fa-duotone fa-folder-open diff --git a/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx b/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx new file mode 100644 index 00000000..9cdd791b --- /dev/null +++ b/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx @@ -0,0 +1,81 @@ +--- +title: Sticky tables +description: +--- + +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. + +When you scroll in a **normal Markdown table**, the entire table including the header scrolls too. Long tables take up a lot of space. + +| Plant | Light Requirements | Water | +|-------|-------------------|-------| +| Fern | Partial shade | Weekly | +| Snake Plant | Low to bright indirect | Bi-weekly | +| Monstera | Bright indirect | Weekly | +| Pothos | Low to bright indirect | Weekly | +| Fiddle Leaf Fig | Bright indirect | Weekly | +| Peace Lily | Low to medium indirect | Weekly | +| Rubber Plant | Bright indirect | Weekly | +| ZZ Plant | Low to bright indirect | Bi-weekly | +| Philodendron | Medium to bright indirect | Weekly | +| Aloe Vera | Bright direct | Bi-weekly | +| Boston Fern | Partial shade | 2-3x weekly | +| Spider Plant | Medium to bright indirect | Weekly | +| Dracaena | Medium indirect | Weekly | +| Bird of Paradise | Bright indirect to direct | Weekly | +| Calathea | Medium indirect | Weekly | + + +When you scroll in a **sticky table**, only the table data scrolls while the header row remains frozen at the top. Long tables take up less space on the page. + + + +| Plant | Light Requirements | Water | +|-------|-------------------|-------| +| Fern | Partial shade | Weekly | +| Snake Plant | Low to bright indirect | Bi-weekly | +| Monstera | Bright indirect | Weekly | +| Pothos | Low to bright indirect | Weekly | +| Fiddle Leaf Fig | Bright indirect | Weekly | +| Peace Lily | Low to medium indirect | Weekly | +| Rubber Plant | Bright indirect | Weekly | +| ZZ Plant | Low to bright indirect | Bi-weekly | +| Philodendron | Medium to bright indirect | Weekly | +| Aloe Vera | Bright direct | Bi-weekly | +| Boston Fern | Partial shade | 2-3x weekly | +| Spider Plant | Medium to bright indirect | Weekly | +| Dracaena | Medium indirect | Weekly | +| Bird of Paradise | Bright indirect to direct | Weekly | +| Calathea | Medium indirect | Weekly | + + + +## Create a sticky table + +Simply wrap any Markdown table with `` tags to make the header sticky. No changes to your table syntax are needed. + + + + +```markdown + + +| Plant | Light Requirements | Water | +|-------|-------------------|-------| +| Fern | Partial shade | Weekly | +| Snake Plant | Low to bright indirect | Bi-weekly | + + +``` + + + +| Plant | Light Requirements | Water | +|-------|-------------------|-------| +| Fern | Partial shade | Weekly | +| Snake Plant | Low to bright indirect | Bi-weekly | + + + + +The styling on a `StickyTable` is different from a regular Markdown table. \ No newline at end of file From 4b3cd73767c817311e89be1fd95260b69ffaab98 Mon Sep 17 00:00:00 2001 From: Devin Logan Date: Fri, 22 Aug 2025 15:04:36 -0400 Subject: [PATCH 2/3] update example text --- .../default-components/sticky-tables.mdx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx b/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx index 9cdd791b..7360f52d 100644 --- a/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx +++ b/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx @@ -1,11 +1,11 @@ --- title: Sticky tables -description: +description: Display tables with sticky headers that remain visible while scrolling through table data. --- 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. -When you scroll in a **normal Markdown table**, the entire table including the header scrolls too. Long tables take up a lot of space. +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. | Plant | Light Requirements | Water | |-------|-------------------|-------| @@ -26,10 +26,9 @@ When you scroll in a **normal Markdown table**, the entire table including the h | Calathea | Medium indirect | Weekly | -When you scroll in a **sticky table**, only the table data scrolls while the header row remains frozen at the top. Long tables take up less space on the page. +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. - | Plant | Light Requirements | Water | |-------|-------------------|-------| | Fern | Partial shade | Weekly | @@ -47,7 +46,6 @@ When you scroll in a **sticky table**, only the table data scrolls while the hea | Dracaena | Medium indirect | Weekly | | Bird of Paradise | Bright indirect to direct | Weekly | | Calathea | Medium indirect | Weekly | - ## Create a sticky table @@ -75,7 +73,4 @@ Simply wrap any Markdown table with `` tags to make the header stic | Fern | Partial shade | Weekly | | Snake Plant | Low to bright indirect | Bi-weekly | - - - -The styling on a `StickyTable` is different from a regular Markdown table. \ No newline at end of file + \ No newline at end of file From 7441d9d89b26e6d84f402481b194fb94a17f52a0 Mon Sep 17 00:00:00 2001 From: Devin Logan Date: Fri, 22 Aug 2025 15:13:47 -0400 Subject: [PATCH 3/3] add info on custom css --- .../default-components/sticky-tables.mdx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx b/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx index 7360f52d..041abd38 100644 --- a/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx +++ b/fern/products/docs/pages/component-library/default-components/sticky-tables.mdx @@ -73,4 +73,14 @@ Simply wrap any Markdown table with `` tags to make the header stic | Fern | Partial shade | Weekly | | Snake Plant | Low to bright indirect | Bi-weekly | - \ No newline at end of file + + +### Style a sticky table + +Sticky tables can be styled independently from regular tables. To add custom styling, target the `.fern-table.sticky` selector: + +```css +.fern-table.sticky { + //custom css here +} +``` \ No newline at end of file