***

title: Table
description: >-
Display data in rows and columns using markdown tables with optional sticky
headers.
--------

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 (`-`):

<div>
  <div>
    | Plant       | Light Requirements     | Water     |
    | ----------- | ---------------------- | --------- |
    | Fern        | Partial shade          | Weekly    |
    | Snake Plant | Low to bright indirect | Bi-weekly |
    | Monstera    | Bright indirect        | Weekly    |
  </div>
</div>

```jsx Markdown
| Plant | Light Requirements | Water |
|-------|-------------------|-------|
| Fern | Partial shade | Weekly |
| Snake Plant | Low to bright indirect | Bi-weekly |
| 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.

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

```jsx Markdown maxLines=10
<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>
```

### 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.

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

```jsx Markdown maxLines=10
<SearchableTable>
| 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 |
</SearchableTable>
```

### Sticky searchable tables

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

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

```jsx Markdown maxLines=10
<StickySearchableTable>
| 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 |
</StickySearchableTable>
```

### HTML searchable tables

Alternatively, add the `searchable` attribute to an HTML table element:

<div>
  <div>
    <table searchable>
      <thead>
        <tr>
          <th>
            Plant
          </th>

          <th>
            Light Requirements
          </th>

          <th>
            Water
          </th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            Fern
          </td>

          <td>
            Partial shade
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            Snake Plant
          </td>

          <td>
            Low to bright indirect
          </td>

          <td>
            Bi-weekly
          </td>
        </tr>

        <tr>
          <td>
            Monstera
          </td>

          <td>
            Bright indirect
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            Pothos
          </td>

          <td>
            Low to bright indirect
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            Fiddle Leaf Fig
          </td>

          <td>
            Bright indirect
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            Peace Lily
          </td>

          <td>
            Low to medium indirect
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            Rubber Plant
          </td>

          <td>
            Bright indirect
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            ZZ Plant
          </td>

          <td>
            Low to bright indirect
          </td>

          <td>
            Bi-weekly
          </td>
        </tr>

        <tr>
          <td>
            Philodendron
          </td>

          <td>
            Medium to bright indirect
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            Aloe Vera
          </td>

          <td>
            Bright direct
          </td>

          <td>
            Bi-weekly
          </td>
        </tr>

        <tr>
          <td>
            Boston Fern
          </td>

          <td>
            Partial shade
          </td>

          <td>
            2-3x weekly
          </td>
        </tr>

        <tr>
          <td>
            Spider Plant
          </td>

          <td>
            Medium to bright indirect
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            Dracaena
          </td>

          <td>
            Medium indirect
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            Bird of Paradise
          </td>

          <td>
            Bright indirect to direct
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            Calathea
          </td>

          <td>
            Medium indirect
          </td>

          <td>
            Weekly
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

```jsx Markdown maxLines=10
<table searchable className="fern-table">
  <thead>
    <tr>
      <th>Plant</th>
      <th>Light Requirements</th>
      <th>Water</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Fern</td>
      <td>Partial shade</td>
      <td>Weekly</td>
    </tr>
    ...
  </tbody>
</table>
```

You can combine `searchable` with `sticky` to create a table with both features:

```jsx Markdown
<table searchable sticky className="fern-table">
  ...
</table>
```

### HTML tables with sticky headers

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

<div>
  <div>
    <table sticky>
      <thead>
        <tr>
          <th>
            Plant
          </th>

          <th>
            Light Requirements
          </th>

          <th>
            Water
          </th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            Fern
          </td>

          <td>
            Partial shade
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            Snake Plant
          </td>

          <td>
            Low to bright indirect
          </td>

          <td>
            Bi-weekly
          </td>
        </tr>

        <tr>
          <td>
            Monstera
          </td>

          <td>
            Bright indirect
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            Pothos
          </td>

          <td>
            Low to bright indirect
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            Fiddle Leaf Fig
          </td>

          <td>
            Bright indirect
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            Peace Lily
          </td>

          <td>
            Low to medium indirect
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            Rubber Plant
          </td>

          <td>
            Bright indirect
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            ZZ Plant
          </td>

          <td>
            Low to bright indirect
          </td>

          <td>
            Bi-weekly
          </td>
        </tr>

        <tr>
          <td>
            Philodendron
          </td>

          <td>
            Medium to bright indirect
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            Aloe Vera
          </td>

          <td>
            Bright direct
          </td>

          <td>
            Bi-weekly
          </td>
        </tr>

        <tr>
          <td>
            Boston Fern
          </td>

          <td>
            Partial shade
          </td>

          <td>
            2-3x weekly
          </td>
        </tr>

        <tr>
          <td>
            Spider Plant
          </td>

          <td>
            Medium to bright indirect
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            Dracaena
          </td>

          <td>
            Medium indirect
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            Bird of Paradise
          </td>

          <td>
            Bright indirect to direct
          </td>

          <td>
            Weekly
          </td>
        </tr>

        <tr>
          <td>
            Calathea
          </td>

          <td>
            Medium indirect
          </td>

          <td>
            Weekly
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

```jsx Markdown maxLines=10
<table sticky className="fern-table">
  <thead>
    <tr>
      <th>Plant</th>
      <th>Light Requirements</th>
      <th>Water</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Fern</td>
      <td>Partial shade</td>
      <td>Weekly</td>
    </tr>
    <tr>
      <td>Snake Plant</td>
      <td>Low to bright indirect</td>
      <td>Bi-weekly</td>
    </tr>
    <tr>
      <td>Monstera</td>
      <td>Bright indirect</td>
      <td>Weekly</td>
    </tr>
    <tr>
      <td>Pothos</td>
      <td>Low to bright indirect</td>
      <td>Weekly</td>
    </tr>
    <tr>
      <td>Fiddle Leaf Fig</td>
      <td>Bright indirect</td>
      <td>Weekly</td>
    </tr>
    <tr>
      <td>Peace Lily</td>
      <td>Low to medium indirect</td>
      <td>Weekly</td>
    </tr>
    <tr>
      <td>Rubber Plant</td>
      <td>Bright indirect</td>
      <td>Weekly</td>
    </tr>
    <tr>
      <td>ZZ Plant</td>
      <td>Low to bright indirect</td>
      <td>Bi-weekly</td>
    </tr>
    <tr>
      <td>Philodendron</td>
      <td>Medium to bright indirect</td>
      <td>Weekly</td>
    </tr>
    <tr>
      <td>Aloe Vera</td>
      <td>Bright direct</td>
      <td>Bi-weekly</td>
    </tr>
    <tr>
      <td>Boston Fern</td>
      <td>Partial shade</td>
      <td>2-3x weekly</td>
    </tr>
    <tr>
      <td>Spider Plant</td>
      <td>Medium to bright indirect</td>
      <td>Weekly</td>
    </tr>
    <tr>
      <td>Dracaena</td>
      <td>Medium indirect</td>
      <td>Weekly</td>
    </tr>
    <tr>
      <td>Bird of Paradise</td>
      <td>Bright indirect to direct</td>
      <td>Weekly</td>
    </tr>
    <tr>
      <td>Calathea</td>
      <td>Medium indirect</td>
      <td>Weekly</td>
    </tr>
  </tbody>
</table>
```

## Custom styling

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
}
```

## Properties

### `<StickyTable>` properties

<ParamField path="children" type="markdown table" required={true}>
  The markdown table to display with sticky headers. The table must be formatted using standard markdown table syntax.
</ParamField>

### `<SearchableTable>` properties

<ParamField path="children" type="markdown table" required={true}>
  The markdown table to display with search functionality. The table must be formatted using standard markdown table syntax.
</ParamField>

<ParamField path="placeholder" type="string" required={false}>
  Custom placeholder text for the search input. Defaults to `"Search..."`.
</ParamField>

### `<StickySearchableTable>` properties

<ParamField path="children" type="markdown table" required={true}>
  The markdown table to display with both sticky headers and search functionality. The table must be formatted using standard markdown table syntax.
</ParamField>

<ParamField path="placeholder" type="string" required={false}>
  Custom placeholder text for the search input. Defaults to `"Search..."`.
</ParamField>

### HTML `<table>` attributes

<ParamField path="sticky" type="boolean" required={false}>
  When set on an HTML table element, makes the table header sticky during scrolling.
</ParamField>

<ParamField path="searchable" type="boolean" required={false}>
  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.
</ParamField>

<ParamField path="placeholder" type="string" required={false}>
  Custom placeholder text for the search input when `searchable` is enabled. Defaults to `"Search..."`.
</ParamField>

<ParamField path="className" type="string" required={false}>
  CSS class name(s) to apply to the table. Use `fern-table` for default Fern styling.
</ParamField>