交互式表格准备就绪 Storybook
该表格用于高效地显示和选择数据。表格组件允许显示和修改详细信息。通过附加功能，它还可以根据您的功能用户的需要进行批量编辑。
用法
加载中...
实时编辑器
const data = [ { size: 'Small', width: '24px', fontSize: '12px' }, { size: 'Medium', width: '32px', fontSize: '14px' }, { size: 'Large', width: '48px', fontSize: '18px' }, ]; const columns = [ { id: 'size', header: 'Size' }, { id: 'width', header: 'Width' }, { id: 'fontSize', header: 'Font Size' }, ]; render(<InteractiveTable columns={columns} data={data} />);
建议做法
- 将表格用于以管理员用户角色为中心的工作流程。
- 使用表格进行数据的批量选择和对多行数据的操作/编辑。
- 当用户搜索特定内容时，分页效果最佳。无限滚动更适合内容探索。
- 当主要工作流程涉及探索时，使用无限滚动。
- 进行用例分析，确定哪些信息应放在主表中，哪些可以移至展开部分以简化整体用户界面。
不建议做法
- 请勿在仪表板或面板中使用交互式表格。
- 避免在需要移动端或响应式的情况下使用表格。考虑替代模式，即向用户呈现摘要列表，用户可以点击/轻触以访问列表中每行的独立页面。
- 不要在展开行部分重复批量编辑控件。
注意事项
交互式表格组件支持用户需要处理潜在的大数据集的工作流程。在其最简单的形式中，它允许批量选择现有数据，以便在更大的工作流程中进行进一步处理。其功能可以扩展以实现数据集创建和批量编辑。
表格通常会由上方的一个部分进行补充，以支持只读和编辑工作流程。只读表格通常会包含数据集的特定属性或计算属性的摘要。根据设计中的功能，可能还有导入/导出选项。对于编辑工作流程，用户将在下方的表格中添加新行。头部部分还将提供现有行的批量编辑选项。
可以展开单个行以显示附加详细信息，或重新配置创建该行时先前定义的属性。在编辑行的情况下，显示的 UI 应是表格上方用于创建行的头部部分的复制。如果某个属性不再可编辑，则仍应显示该属性，但应禁用/灰化。应使用展开行区域来简化数据的主要呈现方式。仔细考虑用户需要一目了然地了解哪些信息，以及哪些信息可以隐藏在“行展开”按钮后面。通常，在所有数据集中一致的数据类型位于主表中，差异则推送到每个单独行的展开部分。
理解和定义这些作为设计中功能的需求非常重要，因为交互式表格不是响应式的，在小型或触摸屏上无法提供良好的用户体验。
内容
| 元素 | 详情 |
|---|---|
| 三态批量选择器 | 三态复选框可以被选中、未选中或部分选中。部分选中的条件取决于子元素的选中情况。如果所有子元素都被选中，则父复选框被选中。如果部分子元素被选中，则父复选框被部分选中。 |
| 行选择器 | 选择，取消选择行 |
| 行展开/折叠 | 展开控件用于显示和隐藏附加详细信息以及可能的控件/修饰符，从而简化您的应用程序。 |
| 行详情 | 本部分用于显示附加详细信息或为用户提供行特定的控件或修饰符。通常不应在此处重复表格外部的批量编辑控件。 |
| 列标签 | 分配给列的描述性标识符或标题 |
| 列排序 | 按字母、数字等排序 |
| 行级别只读操作 | 复制 |
| 行级别编辑操作 | 复制，删除 |
典型工作流程
混合只读和编辑
当表格包含只读和可编辑元素的混合时，当用户选择只读元素时，表格上方的编辑批量操作将变为禁用。考虑添加一列来指示哪些行是可编辑的，哪些是只读的。