图表

警报!

这是探索和验证阿特拉斯山地基的实验包 设计系统.

说明

表格用于显示和组织复杂数据.

使用量

import Table from '@atlaskit/table';

可找到详细的文件和示例使用 这里。 。 。 .

渲染道具

import '@atlaskit/css-reset';
import Table, { Row, Cell, TBody, THead, HeadCell } from '@atlaskit/table';

import { presidents } from './data';

type President = (typeof presidents)[number];

/**
 * Primary UI component for user interaction
 */
export const RenderProp = ({ isSelectable }) => {
    return (
        <Table isSelectable={isSelectable}>
            <THead>
                <HeadCell>Name</HeadCell>
                <HeadCell>Party</HeadCell>
                <HeadCell>Year</HeadCell>
            </THead>
            <TBody<President> rows={presidents}>
                {(row) => (
                    <Row key={row.id} {...row}>
                        <Cell>{row.nm}</Cell>
                        <Cell>{row.pp}</Cell>
                        <Cell>{row.tm}</Cell>
                    </Row>
                )}
            </TBody>
        </Table>
    );
};

组成

import '@atlaskit/css-reset';
import Table, { Row, Cell, TBody, THead, HeadCell } from '@atlaskit/table';

import { presidents } from './data';

/**
 * Primary UI component for user interaction
 */
export const CompositionExample = ({ isSelectable }) => {
    return (
        <Table isSelectable={isSelectable}>
            <THead>
                <HeadCell>Name</HeadCell>
                <HeadCell>Party</HeadCell>
                <HeadCell>Year</HeadCell>
            </THead>
            <TBody>
                {presidents.map((row) => (
                    <Row key={row.id}>
                        <Cell>{row.nm}</Cell>
                        <Cell>{row.pp}</Cell>
                        <Cell>{row.tm}</Cell>
                    </Row>
                ))}
            </TBody>
        </Table>
    );
};