> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

# Table

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

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

**`Markdown`**

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

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

**`Markdown`**

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

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

**`Markdown`**

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

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

**`Markdown`**

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

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

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

**`Markdown`**

```jsx Markdown maxLines=10
<PaginatedTable pageSize={6}>
| 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 |
</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`.

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

**`Markdown`**

```jsx Markdown maxLines=10
<PaginatedTable pageSize={6} expandable>
| 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 |
</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.

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

**`Markdown`**

```jsx Markdown maxLines=10
<PaginatedSearchableTable pageSize={6}>
| 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 |
</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).

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

**`Markdown`**

```jsx Markdown maxLines=10
<table sticky searchable paginate expandable pageSize={6} 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>
```

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

**`children`** `markdown table` — required

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

---

### `<SearchableTable>` properties

**`children`** `markdown table` — required

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 table` — required

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 table` — required

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

---

**`pageSize`** `number` — default: 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 table` — required

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

---

**`pageSize`** `number` — default: 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`** `number` — default: 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.

---

> Display data in rows and columns using markdown tables with optional sticky headers.