Add new page on StickyTables (Docs) (#555)

Author: devalog

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

fern/products/docs/pages/component-library/default-components/sticky-tables.mdx

@@ -0,0 +1,86 @@
+---
+title: Sticky tables
+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.
+
+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 |
+|-------|-------------------|-------|
+| 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 |
+
+
+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. 
+
+<StickyTable>
+| 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 |
+</StickyTable>
+
+## Create a sticky table
+
+Simply wrap any Markdown table with `<StickyTable>` tags to make the header sticky. No changes to your table syntax are needed.
+
+<Tabs>
+<Tab title="Markdown">
+<CodeBlock>
+```markdown
+<StickyTable>
+
+| Plant | Light Requirements | Water |
+|-------|-------------------|-------|
+| Fern | Partial shade | Weekly |
+| Snake Plant | Low to bright indirect | Bi-weekly |
+
+</StickyTable>
+```
+</CodeBlock>
+</Tab>
+<Tab title="Preview">
+| Plant | Light Requirements | Water |
+|-------|-------------------|-------|
+| Fern | Partial shade | Weekly |
+| Snake Plant | Low to bright indirect | Bi-weekly |
+</Tab>
+</Tabs>
+
+### 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 
+}
+```