编写内容组件

表格

以 Markdown 格式查看

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

用法

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

PlantLight RequirementsWater
FernPartial shadeWeekly
Snake PlantLow to bright indirectBi-weekly
MonsteraBright indirectWeekly
Markdown
1| Plant | Light Requirements | Water |
2|-------|-------------------|-------|
3| Fern | Partial shade | Weekly |
4| Snake Plant | Low to bright indirect | Bi-weekly |
5| 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
1<StickyTable>
2| Plant | Light Requirements | Water |
3|-------|-------------------|-------|
4| Fern | Partial shade | Weekly |
5| Snake Plant | Low to bright indirect | Bi-weekly |
6| Monstera | Bright indirect | Weekly |
7| Pothos | Low to bright indirect | Weekly |
8| Fiddle Leaf Fig | Bright indirect | Weekly |
9| Peace Lily | Low to medium indirect | Weekly |
10| Rubber Plant | Bright indirect | Weekly |
11| ZZ Plant | Low to bright indirect | Bi-weekly |
12| Philodendron | Medium to bright indirect | Weekly |
13| Aloe Vera | Bright direct | Bi-weekly |
14| Boston Fern | Partial shade | 2-3x weekly |
15| Spider Plant | Medium to bright indirect | Weekly |
16| Dracaena | Medium indirect | Weekly |
17| Bird of Paradise | Bright indirect to direct | Weekly |
18| Calathea | Medium indirect | Weekly |
19</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
1<SearchableTable>
2| Plant | Light Requirements | Water |
3|-------|-------------------|-------|
4| Fern | Partial shade | Weekly |
5| Snake Plant | Low to bright indirect | Bi-weekly |
6| Monstera | Bright indirect | Weekly |
7| Pothos | Low to bright indirect | Weekly |
8| Fiddle Leaf Fig | Bright indirect | Weekly |
9| Peace Lily | Low to medium indirect | Weekly |
10| Rubber Plant | Bright indirect | Weekly |
11| ZZ Plant | Low to bright indirect | Bi-weekly |
12| Philodendron | Medium to bright indirect | Weekly |
13| Aloe Vera | Bright direct | Bi-weekly |
14| Boston Fern | Partial shade | 2-3x weekly |
15| Spider Plant | Medium to bright indirect | Weekly |
16| Dracaena | Medium indirect | Weekly |
17| Bird of Paradise | Bright indirect to direct | Weekly |
18| Calathea | Medium indirect | Weekly |
19</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
1<StickySearchableTable>
2| Plant | Light Requirements | Water |
3|-------|-------------------|-------|
4| Fern | Partial shade | Weekly |
5| Snake Plant | Low to bright indirect | Bi-weekly |
6| Monstera | Bright indirect | Weekly |
7| Pothos | Low to bright indirect | Weekly |
8| Fiddle Leaf Fig | Bright indirect | Weekly |
9| Peace Lily | Low to medium indirect | Weekly |
10| Rubber Plant | Bright indirect | Weekly |
11| ZZ Plant | Low to bright indirect | Bi-weekly |
12| Philodendron | Medium to bright indirect | Weekly |
13| Aloe Vera | Bright direct | Bi-weekly |
14| Boston Fern | Partial shade | 2-3x weekly |
15| Spider Plant | Medium to bright indirect | Weekly |
16| Dracaena | Medium indirect | Weekly |
17| Bird of Paradise | Bright indirect to direct | Weekly |
18| Calathea | Medium indirect | Weekly |
19</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
1<table searchable className="fern-table">
2  <thead>
3    <tr>
4      <th>Plant</th>
5      <th>Light Requirements</th>
6      <th>Water</th>
7    </tr>
8  </thead>
9  <tbody>
10    <tr>
11      <td>Fern</td>
12      <td>Partial shade</td>
13      <td>Weekly</td>
14    </tr>
15    ...
16  </tbody>
17</table>

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

Markdown
1<table searchable sticky className="fern-table">
2  ...
3</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
1<table sticky className="fern-table">
2  <thead>
3    <tr>
4      <th>Plant</th>
5      <th>Light Requirements</th>
6      <th>Water</th>
7    </tr>
8  </thead>
9  <tbody>
10    <tr>
11      <td>Fern</td>
12      <td>Partial shade</td>
13      <td>Weekly</td>
14    </tr>
15    <tr>
16      <td>Snake Plant</td>
17      <td>Low to bright indirect</td>
18      <td>Bi-weekly</td>
19    </tr>
20    <tr>
21      <td>Monstera</td>
22      <td>Bright indirect</td>
23      <td>Weekly</td>
24    </tr>
25    <tr>
26      <td>Pothos</td>
27      <td>Low to bright indirect</td>
28      <td>Weekly</td>
29    </tr>
30    <tr>
31      <td>Fiddle Leaf Fig</td>
32      <td>Bright indirect</td>
33      <td>Weekly</td>
34    </tr>
35    <tr>
36      <td>Peace Lily</td>
37      <td>Low to medium indirect</td>
38      <td>Weekly</td>
39    </tr>
40    <tr>
41      <td>Rubber Plant</td>
42      <td>Bright indirect</td>
43      <td>Weekly</td>
44    </tr>
45    <tr>
46      <td>ZZ Plant</td>
47      <td>Low to bright indirect</td>
48      <td>Bi-weekly</td>
49    </tr>
50    <tr>
51      <td>Philodendron</td>
52      <td>Medium to bright indirect</td>
53      <td>Weekly</td>
54    </tr>
55    <tr>
56      <td>Aloe Vera</td>
57      <td>Bright direct</td>
58      <td>Bi-weekly</td>
59    </tr>
60    <tr>
61      <td>Boston Fern</td>
62      <td>Partial shade</td>
63      <td>2-3x weekly</td>
64    </tr>
65    <tr>
66      <td>Spider Plant</td>
67      <td>Medium to bright indirect</td>
68      <td>Weekly</td>
69    </tr>
70    <tr>
71      <td>Dracaena</td>
72      <td>Medium indirect</td>
73      <td>Weekly</td>
74    </tr>
75    <tr>
76      <td>Bird of Paradise</td>
77      <td>Bright indirect to direct</td>
78      <td>Weekly</td>
79    </tr>
80    <tr>
81      <td>Calathea</td>
82      <td>Medium indirect</td>
83      <td>Weekly</td>
84    </tr>
85  </tbody>
86</table>

自定义样式

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

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

属性

<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 样式。