svelte-gantt SvelteGanttTable实战3步搞定左侧表格区、列配置与自定义渲染【免费下载链接】svelte-gantt:calendar: Interactive JavaScript Gantt chart/resource booking component项目地址: https://gitcode.com/gh_mirrors/sv/svelte-gantt想为 svelte-gantt 甘特图配上信息完整的左侧表格吗SvelteGanttTable就是 svelte-gantt 内置的表格模块负责在甘特图左边渲染行信息列表。本文带你快速完成 SvelteGanttTable 的启用、列配置tableHeaders与自定义单元格渲染让左侧表格区成为甘特图的好搭档。一、认识 SvelteGanttTable 模块SvelteGanttTable 是 svelte-gantt 的可插拔模块之一源码位于 Table.svelte。它的核心职责 按tableHeaders配置渲染表头与数据列 支持树形行展开/折叠子任务️ 支持图标、头像资源信息列、HTML 富文本等自定义渲染 表头与表体横向滚动自动同步相关源码文件模块入口index.ts列定义类型tableHeader.ts行渲染TableRow.svelte树形单元格TableTreeCell.svelte二、最快启用步骤开启表格区只需两步导入模块并交给甘特图实例。import { SvelteGantt, SvelteGanttTable } from svelte-gantt; gantt.$set({ ganttTableModules: [SvelteGanttTable], tableHeaders: [ { title: Name, property: label, width: 150 }, { title: Age, property: age, width: 50 }, ], });ganttTableModules把 SvelteGanttTable 注册为甘特图模块左侧表格区才会出现tableHeaders列配置数组每列对应一行数据tableWidth表格区总宽度默认 240px且表格区右缘支持拖拽调整宽度三、列配置指南tableHeaders 的 5 个字段TableHeader类型定义见 tableHeader.ts每个字段用途一目了然字段说明title表头显示的文字property从行数据中取值的属性名如labelwidth列宽px所有列宽之和构成横向滚动宽度renderer自定义渲染函数返回 HTML 字符串type列类型可用tree或resourceInfo 小贴士最后一列会自动撑满剩余空间见 Table.svelte 中:global(.sg-table-cell:last-child)的flex-grow: 1样式。四、自定义渲染3 种玩法单元格内容的渲染优先级见 TableRow.svelte行级headerHtml 列级renderer 列类型type 默认属性值。1. 默认文本渲染什么都不配置时单元格直接显示row.model[property]的值最省事。2. 列级 renderer 函数式渲染renderer接收行对象、返回 HTML 字符串适合只针对某一列富文本的场景tableHeaders: [ { title: 任务, property: label, width: 200, renderer: (row) b${row.model.label}/b, }, ],3. 行级 headerHtml 与 iconClass针对单个行自定义直接在行数据里给两个字段见 row.tsheaderHtml该行的 HTML 内容优先级最高iconClass在单元格前显示一个小图标CSS 图标类名五、两种内置列类型树形列type: tree配合层级数据rows 的 children第一列设为type: tree即可得到带展开/折叠箭头的树形表格{ title: Name, property: label, width: 200, type: tree }子行会按层级自动缩进每级3em点击箭头触发rowExpanded/rowCollapsed事件Table.svelte 会递归显示/隐藏子行并更新布局资源头像列type: resourceInfo列设为resourceInfo时单元格会显示行数据的imageSrc圆形头像 标签文字非常适合人员排班 / 资源预订类甘特图。示例可参考 column-styles/page.svelte 中的tableHeaders配置。六、上手小贴士✅ 想先看效果最小配置只需一列{ title: Name, property: label, width: 150 }✅ 表格区宽度不满足时调整tableWidth默认 240px或直接拖拽分栏线✅ 树形数据展示可参考官方示例 tree/page.svelte其中表格区与依赖线、树形任务配合得很完整✅ 更多表格选项说明见官方文档页 docs/modules/table按以上配置你的 svelte-gantt 甘特图左侧表格区就完成了列配置清晰、渲染方式灵活从纯文本到树形、头像、富文本都能轻松应对。【免费下载链接】svelte-gantt:calendar: Interactive JavaScript Gantt chart/resource booking component项目地址: https://gitcode.com/gh_mirrors/sv/svelte-gantt创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 svelte-gantt SvelteGanttTable实战：3步搞定左侧表格区、列配置与自定义渲染
svelte-gantt SvelteGanttTable实战3步搞定左侧表格区、列配置与自定义渲染【免费下载链接】svelte-gantt:calendar: Interactive JavaScript Gantt chart/resource booking component项目地址: https://gitcode.com/gh_mirrors/sv/svelte-gantt想为 svelte-gantt 甘特图配上信息完整的左侧表格吗SvelteGanttTable就是 svelte-gantt 内置的表格模块负责在甘特图左边渲染行信息列表。本文带你快速完成 SvelteGanttTable 的启用、列配置tableHeaders与自定义单元格渲染让左侧表格区成为甘特图的好搭档。一、认识 SvelteGanttTable 模块SvelteGanttTable 是 svelte-gantt 的可插拔模块之一源码位于 Table.svelte。它的核心职责 按tableHeaders配置渲染表头与数据列 支持树形行展开/折叠子任务️ 支持图标、头像资源信息列、HTML 富文本等自定义渲染 表头与表体横向滚动自动同步相关源码文件模块入口index.ts列定义类型tableHeader.ts行渲染TableRow.svelte树形单元格TableTreeCell.svelte二、最快启用步骤开启表格区只需两步导入模块并交给甘特图实例。import { SvelteGantt, SvelteGanttTable } from svelte-gantt; gantt.$set({ ganttTableModules: [SvelteGanttTable], tableHeaders: [ { title: Name, property: label, width: 150 }, { title: Age, property: age, width: 50 }, ], });ganttTableModules把 SvelteGanttTable 注册为甘特图模块左侧表格区才会出现tableHeaders列配置数组每列对应一行数据tableWidth表格区总宽度默认 240px且表格区右缘支持拖拽调整宽度三、列配置指南tableHeaders 的 5 个字段TableHeader类型定义见 tableHeader.ts每个字段用途一目了然字段说明title表头显示的文字property从行数据中取值的属性名如labelwidth列宽px所有列宽之和构成横向滚动宽度renderer自定义渲染函数返回 HTML 字符串type列类型可用tree或resourceInfo 小贴士最后一列会自动撑满剩余空间见 Table.svelte 中:global(.sg-table-cell:last-child)的flex-grow: 1样式。四、自定义渲染3 种玩法单元格内容的渲染优先级见 TableRow.svelte行级headerHtml 列级renderer 列类型type 默认属性值。1. 默认文本渲染什么都不配置时单元格直接显示row.model[property]的值最省事。2. 列级 renderer 函数式渲染renderer接收行对象、返回 HTML 字符串适合只针对某一列富文本的场景tableHeaders: [ { title: 任务, property: label, width: 200, renderer: (row) b${row.model.label}/b, }, ],3. 行级 headerHtml 与 iconClass针对单个行自定义直接在行数据里给两个字段见 row.tsheaderHtml该行的 HTML 内容优先级最高iconClass在单元格前显示一个小图标CSS 图标类名五、两种内置列类型树形列type: tree配合层级数据rows 的 children第一列设为type: tree即可得到带展开/折叠箭头的树形表格{ title: Name, property: label, width: 200, type: tree }子行会按层级自动缩进每级3em点击箭头触发rowExpanded/rowCollapsed事件Table.svelte 会递归显示/隐藏子行并更新布局资源头像列type: resourceInfo列设为resourceInfo时单元格会显示行数据的imageSrc圆形头像 标签文字非常适合人员排班 / 资源预订类甘特图。示例可参考 column-styles/page.svelte 中的tableHeaders配置。六、上手小贴士✅ 想先看效果最小配置只需一列{ title: Name, property: label, width: 150 }✅ 表格区宽度不满足时调整tableWidth默认 240px或直接拖拽分栏线✅ 树形数据展示可参考官方示例 tree/page.svelte其中表格区与依赖线、树形任务配合得很完整✅ 更多表格选项说明见官方文档页 docs/modules/table按以上配置你的 svelte-gantt 甘特图左侧表格区就完成了列配置清晰、渲染方式灵活从纯文本到树形、头像、富文本都能轻松应对。【免费下载链接】svelte-gantt:calendar: Interactive JavaScript Gantt chart/resource booking component项目地址: https://gitcode.com/gh_mirrors/sv/svelte-gantt创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考