跳到导航
编写内容组件

表格

以 Markdown 格式查看

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

用法

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

PlantLight RequirementsWater
FernPartial shadeWeekly
Snake PlantLow to bright indirectBi-weekly
MonsteraBright indirectWeekly
Markdown
| Plant | Light Requirements | Water |
|-------|-------------------|-------|
| Fern | Partial shade | Weekly |
| Snake Plant | Low to bright indirect | Bi-weekly |
| Monstera | Bright indirect | Weekly |

变体

粘性表头

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

PlantLight RequirementsWater
FernPartial shadeWeekly
Snake PlantLow to bright indirectBi-weekly
MonsteraBright indirectWeekly
PothosLow to bright indirectWeekly
Fiddle Leaf FigBright indirectWeekly
Peace LilyLow to medium indirectWeekly
Rubber PlantBright indirectWeekly
ZZ PlantLow to bright indirectBi-weekly
PhilodendronMedium to bright indirectWeekly
Aloe VeraBright directBi-weekly
Boston FernPartial shade2-3x weekly
Spider PlantMedium to bright indirectWeekly
DracaenaMedium indirectWeekly
Bird of ParadiseBright indirect to directWeekly
CalatheaMedium indirectWeekly
Markdown
<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 属性自定义搜索输入占位符文本。

PlantLight RequirementsWater
FernPartial shadeWeekly
Snake PlantLow to bright indirectBi-weekly
MonsteraBright indirectWeekly
PothosLow to bright indirectWeekly
Fiddle Leaf FigBright indirectWeekly
Peace LilyLow to medium indirectWeekly
Rubber PlantBright indirectWeekly
ZZ PlantLow to bright indirectBi-weekly
PhilodendronMedium to bright indirectWeekly
Aloe VeraBright directBi-weekly
Boston FernPartial shade2-3x weekly
Spider PlantMedium to bright indirectWeekly
DracaenaMedium indirectWeekly
Bird of ParadiseBright indirect to directWeekly
CalatheaMedium indirectWeekly
Markdown
<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> 组件结合了粘性表头和搜索功能：

PlantLight RequirementsWater
FernPartial shadeWeekly
Snake PlantLow to bright indirectBi-weekly
MonsteraBright indirectWeekly
PothosLow to bright indirectWeekly
Fiddle Leaf FigBright indirectWeekly
Peace LilyLow to medium indirectWeekly
Rubber PlantBright indirectWeekly
ZZ PlantLow to bright indirectBi-weekly
PhilodendronMedium to bright indirectWeekly
Aloe VeraBright directBi-weekly
Boston FernPartial shade2-3x weekly
Spider PlantMedium to bright indirectWeekly
DracaenaMedium indirectWeekly
Bird of ParadiseBright indirect to directWeekly
CalatheaMedium indirectWeekly
Markdown
<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 属性：

PlantLight RequirementsWater
FernPartial shadeWeekly
Snake PlantLow to bright indirectBi-weekly
MonsteraBright indirectWeekly
PothosLow to bright indirectWeekly
Fiddle Leaf FigBright indirectWeekly
Peace LilyLow to medium indirectWeekly
Rubber PlantBright indirectWeekly
ZZ PlantLow to bright indirectBi-weekly
PhilodendronMedium to bright indirectWeekly
Aloe VeraBright directBi-weekly
Boston FernPartial shade2-3x weekly
Spider PlantMedium to bright indirectWeekly
DracaenaMedium indirectWeekly
Bird of ParadiseBright indirect to directWeekly
CalatheaMedium indirectWeekly
Markdown
<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
<table searchable sticky className="fern-table">
  ...
</table>

带粘性表头的 HTML 表格

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

PlantLight RequirementsWater
FernPartial shadeWeekly
Snake PlantLow to bright indirectBi-weekly
MonsteraBright indirectWeekly
PothosLow to bright indirectWeekly
Fiddle Leaf FigBright indirectWeekly
Peace LilyLow to medium indirectWeekly
Rubber PlantBright indirectWeekly
ZZ PlantLow to bright indirectBi-weekly
PhilodendronMedium to bright indirectWeekly
Aloe VeraBright directBi-weekly
Boston FernPartial shade2-3x weekly
Spider PlantMedium to bright indirectWeekly
DracaenaMedium indirectWeekly
Bird of ParadiseBright indirect to directWeekly
CalatheaMedium indirectWeekly
Markdown
<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 选择器：

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

属性

<StickyTable> 属性

children
markdown tableRequired

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

<SearchableTable> 属性

children
markdown tableRequired

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

placeholder
string

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

<StickySearchableTable> 属性

children
markdown tableRequired

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

placeholder
string

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

HTML <table> 属性

sticky
boolean

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

searchable
boolean

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

placeholder
string

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

className
string

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