> If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification.
>
> GET https://buildwithfern.com/learn/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiI0NTNkYTk5YS0yYjczLTRiOTktODVlNC02YTc0MzNkOGU3MzAiLCJleHAiOjE3NzgyNjQ5MTIsImlhdCI6MTc3ODI2NDYxMn0.8VP7JQfC1ulAgnDXVFcbBGjIfRPxNvhOp6Lgw8Mhpkg
>
> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. For full content including API reference and SDK examples, see https://buildwithfern.com/learn/llms-full.txt.

# 表格

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

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

## 用法

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

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

## 变体

### 粘性表头

`<StickyTable>` 组件添加了一个在滚动时保持可见的固定表头。对于需要用户在整个表格中参考列表头的较长数据集，请使用粘性表格。

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

### 可搜索表格

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

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

### 粘性可搜索表格

`<StickySearchableTable>` 组件结合了粘性表头和搜索功能：

<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 可搜索表格

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

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

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

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

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

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

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

## 自定义样式

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

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

## 属性

### `<StickyTable>` 属性

<ParamField path="children" type="markdown table" required={true}>
  要显示带有粘性表头的 markdown 表格。表格必须使用标准 markdown 表格语法格式化。
</ParamField>

### `<SearchableTable>` 属性

<ParamField path="children" type="markdown table" required={true}>
  要显示带有搜索功能的 markdown 表格。表格必须使用标准 markdown 表格语法格式化。
</ParamField>

<ParamField path="placeholder" type="string" required={false}>
  搜索输入的自定义占位符文本。默认为 `"Search..."`。
</ParamField>

### `<StickySearchableTable>` 属性

<ParamField path="children" type="markdown table" required={true}>
  要显示同时具有粘性表头和搜索功能的 markdown 表格。表格必须使用标准 markdown 表格语法格式化。
</ParamField>

<ParamField path="placeholder" type="string" required={false}>
  搜索输入的自定义占位符文本。默认为 `"Search..."`。
</ParamField>

### HTML `<table>` 属性

<ParamField path="sticky" type="boolean" required={false}>
  当在 HTML 表格元素上设置时，使表格表头在滚动时保持粘性。
</ParamField>

<ParamField path="searchable" type="boolean" required={false}>
  当在 HTML 表格元素上设置时，在表格上方添加一个搜索输入框，使用不区分大小写的子字符串匹配实时过滤行。
</ParamField>

<ParamField path="placeholder" type="string" required={false}>
  当启用 `searchable` 时搜索输入的自定义占位符文本。默认为 `"Search..."`。
</ParamField>

<ParamField path="className" type="string" required={false}>
  应用于表格的 CSS 类名。使用 `fern-table` 获得默认的 Fern 样式。
</ParamField>