> This page is for 文档.

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

# 表格

> 使用带有可选粘性表头的 markdown 表格以行和列的形式显示数据。

表格使用标准 markdown 语法以行和列的形式显示数据。对于较长的数据集，您可以使用在滚动时保持可见的粘性表头。

## 用法

使用标准 markdown 语法创建表格，使用管道符 (`|`) 和连字符 (`-`)：

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

## 变体

### 粘性表头

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

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

### 可搜索表格

`<SearchableTable>` 组件为大型表格启用客户端过滤。表格上方会出现一个搜索输入框，使用不区分大小写的子字符串匹配实时过滤行。使用 `placeholder` 属性自定义搜索输入占位符文本。

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

### 粘性可搜索表格

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

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

### HTML 可搜索表格

或者，为 HTML 表格元素添加 `searchable` 属性：

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

**`Markdown`**

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

您可以将 `searchable` 与 `sticky` 结合使用来创建同时具有两种功能的表格：

**`Markdown`**

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

### 带粘性表头的 HTML 表格

在开始的 `<table>` 标签中添加 `sticky` 属性。您的表格语法无需进一步更改。

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

**`Markdown`**

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

## 自定义样式

粘性表格可以独立于常规表格进行样式设置。要添加自定义样式，请使用 `.fern-table.sticky` 选择器：

```css
.fern-table.sticky {
  //自定义 css 在这里
}
```

## 属性

### `<StickyTable>` 属性

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

要显示带有粘性表头的 markdown 表格。表格必须使用标准 markdown 表格语法格式化。

---

### `<SearchableTable>` 属性

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

要显示带有搜索功能的 markdown 表格。表格必须使用标准 markdown 表格语法格式化。

---

**`placeholder`** `string`

搜索输入的自定义占位符文本。默认为 `"Search..."`。

---

### `<StickySearchableTable>` 属性

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

要显示同时具有粘性表头和搜索功能的 markdown 表格。表格必须使用标准 markdown 表格语法格式化。

---

**`placeholder`** `string`

搜索输入的自定义占位符文本。默认为 `"Search..."`。

---

### HTML `<table>` 属性

**`sticky`** `boolean`

当在 HTML 表格元素上设置时，使表格表头在滚动时保持粘性。

---

**`searchable`** `boolean`

当在 HTML 表格元素上设置时，在表格上方添加一个搜索输入框，使用不区分大小写的子字符串匹配实时过滤行。

---

**`placeholder`** `string`

当启用 `searchable` 时搜索输入的自定义占位符文本。默认为 `"Search..."`。

---

**`className`** `string`

应用于表格的 CSS 类名。使用 `fern-table` 获得默认的 Fern 样式。

---