单元格
TableCell是表的字段呈现组件。它用于渲染不同类型的字段
何时使用
- 当你需要使用
Gitee Team
的某些字段组件功能时 - 当需要渲染业务表时
属性
属性 | 属性类型 | 属性说明 | 是否必填 |
---|---|---|---|
cellData | CellData | 单元格数据 | true |
column | Column | 单元格配置 | true |
rowData | RowData | 整行的数据 true | false |
readComponents | Record<string,React.FC> | 只读组件,可以通过getAllReadComponents获取 | true |
editComponents | Record<string,React.FC> | 编辑组件,可以通过 getStandardEditComponents获取 | false |
handleChange | function | value更新回调 | false |
列
interface Column {
cellType?: string; // 单元格类型
property?: Property; // 单元格属性,根据后端返回的column中的property
data?: any; // 列的选项数据
}
类型
- Actors: 用户角色
- Assignee: 负责人
- Checkbox: 复选框
- CreatedAt: 创建时间
- CreatedBy: 创建人
- DataQuote: 数据引用
- Date: 日期
- Dropdown: 下拉选项
- Editor: 富文本
- File: 文件
- Formula: 公式类型字段
- ItemType: 事项类型
- Key: matter key
- LongText:多行文本
- Name: 事项名称
- Number:数字类型
- Priority:优先级
- Radio:单选框
- Script: 脚本
- Sprint: Iteration
- Status: 状态
- Tag: 标签
- Team: 团队
- Text: 文本
- Tree: 树组件
- UpdatedAt: 更新时间
- UpdatedBy: 跟新人
- User: 用户
- UserGroup: 用户组
- Version: 版本
- Workspace: 空间
示例
import { Table, OverflowTooltip } from 'antd';
import { TableCell, getAllReadComponents } from '@giteeteam/apps-team-components';
const readComponents = getAllReadComponents();
const AgileBoardListPage = () => {
const columns = [
{
title: 'name',
dataIndex: 'name',
key: 'name',
width: '40%',
ellipsis: true,
render: text => (
<OverflowTooltip title={text} maxline={1}>
{text}
</OverflowTooltip>
),
},
{
title: 'Created By',
dataIndex: 'createdBy',
key: 'createdBy',
ellipsis: true,
render: (value, row) => (
<TableCell
rowData={row}
cellData={value}
column={column}
readComponents={readComponents}
/>
),
},
{
title: 'Workspace',
dataIndex: 'workspace',
key: 'workspace',
ellipsis: true,
render: (value, row) => (
<TableCell
rowData={row}
cellData={value}
column={column}
readComponents={readComponents}
/>
),
},
];
return (
<Table
rowKey="objectId"
columns={columns}
dataSource={[]}
/>
)
}