TableCell

TableCell is a field rendering component for tables. It is used to render different types of fields

When To Use

• When you need to use some of the field component capabilities of Gitee Team
• When a business table needs to be rendered

Properties

key	Value Type	Property Explanation	Required or Not
type	string	Type of the component (see below for specific enumeration values)	true
text	array / string	The value of the component. checkbox is array	true
id	string	Item ObjectId	false
dataIndex	string	The id of the component, as long as it is unique	false
readonly	boolean	Whether the component is read-only	false

Type

• Actors: the role user
• Annex: Attachment
• Assignee: the person in charge
• Checkbox: checkbox
• DataQuote: data reference
• Date: Date
• Dropdown: Dropdown option
• Editor: Rich Text Editor
• File: File
• Formula: Formula
• ItemType: Type
• Key: matter key
• LongText：Long Text
• Name: item title
• Number：Value
• Priority：priority
• Radio：Radio
• Script: Script
• Sprint: Iteration
• Status: Status
• Tag: Tag
• Text: Text
• Tree: Tree component
• User: user
• Version: Version

Example

import { Table, OverflowTooltip } from 'antd';
import { TableCell } from '@giteeteam/apps-team-components';

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
                    type={'User'}
                    text={[value]}
                    id={row.objectId}
                    dataIndex={'createdBy'}
                    readonly
                />
            ),
        },
        {
            title: 'Workspace',
            dataIndex: 'workspace',
            key: 'workspace',
            ellipsis: true,
            render: (value, row) => (
                <TableCell
                    type={'Workspace'}
                    text={value}
                    id={row.objectId}
                    dataIndex={'workspace'}
                    readonly
                />
            ),
        },
    ];

    return (
        <Table
            rowKey="objectId"
            columns={columns}
            dataSource={[]}
        />
    )
}