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

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

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

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