表格块
表格是一种以网格形式显示数据的简单方式。
表格默认是一种以网格形式显示数据的简单方式。但 BlockNote 也支持更多高级功能，比如：
- 拆分单元格
- 单元格背景色
- 单元格文本颜色
- 表头行和列
这些功能默认是关闭的，以保持默认表格体验的简洁易用。
你可以在创建编辑器时，通过传入 tables 选项启用更多高级功能。
const editor = new BlockNoteEditor({
tables: {
splitCells: true,
cellBackgroundColor: true,
cellTextColor: true,
headers: true,
},
});你可以选择只启用某些功能，也可以全部禁用。这样可以灵活地根据你的应用需求使用表格。
块的结构
以下描述了 BlockNote 中表格块的结构。
type TableBlock = {
id: string;
type: "table";
props: {
textColor: string;
};
content: TableContent;
children: Block[];
};
type TableContent = {
type: "tableContent";
columnWidths: (number | undefined)[];
headerRows?: number;
headerCols?: number;
rows: {
cells: TableCell[];
}[];
};
type TableCell = {
type: "tableCell";
props: {
backgroundColor: string;
textColor: string;
textAlignment: "left" | "center" | "right" | "justify";
colspan?: number;
rowspan?: number;
};
content: InlineContent[];
};textColor: 表格块的文本颜色。默认为 "default"。
选项
单元格背景色
要启用单元格背景色，需要在 tables 选项中传入 cellBackgroundColor: true。
const editor = new BlockNoteEditor({
tables: {
cellBackgroundColor: true,
},
});单元格文本颜色
要启用单元格文本颜色，需要在 tables 选项中传入 cellTextColor: true。
const editor = new BlockNoteEditor({
tables: {
cellTextColor: true,
},
});表头行和列
要启用该功能，需要在 tables 选项中传入 headers: true。
const editor = new BlockNoteEditor({
tables: {
headers: true,
},
});拆分单元格
拆分和合并单元格是更高级表格编辑器的常见功能。
要启用该功能，需要在 tables 选项中传入 splitCells: true。
const editor = new BlockNoteEditor({
tables: {
splitCells: true,
},
});