用途
该技能用于指导在 Web Components 项目中配置 Ignite UI 数据表格，重点解决表格选型、主题设置、组件注册和布局适配等常见问题。技能提供一套必需的工作流程，建议先根据需求从表格中选择对应的表格类型；如选择不明确，应先询问用户。
表格选型
技能按需求列出五种表格类型：
- 只读表格、仅需排序/过滤：
<igc-grid-lite>，包为igniteui-grid-lite（MIT）。 - 需要编辑、选择、分页、分组、汇总、导出、工具栏：
<igc-grid>，包为igniteui-webcomponents-grids（试用）或@infragistics/igniteui-webcomponents-grids（授权）。 - 父子关系、单一 schema：
<igc-tree-grid>。 - 父子关系、每层 schema 不同：
<igc-hierarchical-grid>。 - 跨表/OLAP 分析：
<igc-pivot-grid>。
同一张表不要混用 Grid Lite 与高级表格类型。
主题设置
整个应用只能选一个设计系统（material、bootstrap、fluent、indigo）和一个变体（light、dark），不得同时加载两套设计系统或同时加载 light/dark 文件。高级表格需同时加载基础主题和表格主题，且设计系统与变体一致。主题为文档级导入，只作用于 light DOM；若表格渲染在 Shadow root 内，需将主题作为内联字符串导入并以 <style> 标签注入到 render() 中。示例中使用 Vite 的 ?inline 后缀，其他打包器需用等价的原始字符串 CSS 导入方式。
组件注册
高级表格只注册所选表格类型，例如 IgcGridComponent.register()；树形、层级、透视表格使用对应的 Igc*GridComponent.register()。仅当应用有意使用全部高级表格类型时才用 igniteui-webcomponents-grids/grids/combined.js。基础包按需注册所用组件，不使用 defineAllComponents()。内置表格图标（排序方向、过滤、展开/折叠）会自动渲染，无需图标字体或手动注册；仅自定义图标需要注册。
流体布局
表格应填满容器，不硬编码像素高度。通过 flex 布局配合 min-height: 0 让表格从有尺寸的祖先获得 100% 高度，以满足行虚拟化需要。列默认流体，除非需要固定宽度，否则不要设置列宽，并保留至少一列无宽度以填充剩余空间。
排序与过滤
在表格上设置 allow-filtering="true"，并在列上设置 sortable="true"、filterable="true"。仅设置列级 filterable 不会显示过滤界面。布尔属性需使用带引号的字符串值（如 sortable="true" 而非裸 sortable）。
验证与规则
清洁运行验证包括：无控制台错误/警告、表格按所选设计系统完整样式化、排序/过滤图标正确渲染、过滤界面可见且排序过滤可交互、表格在缩放时持续填充容器。关键规则强调：单一设计系统与变体；为高级表格同时加载基础与表格主题；向每个渲染高级表格的 Shadow root 注入表格主题；只注册所选表格类型和应用使用的组件；不猜测未经核实的深层导入路径或 API，应通过 MCP 工具查询；默认使用流体布局；修复根因（缺失主题/注册），不用回退 CSS 掩盖症状。