rsuite-table

rsuite-table

rsuite-table 是一个 React 实现的 <Table> 组件，主要特性有：

• 支持固定表头，固定列（固定在左侧）；
• 支持自定义调整列宽；
• 支持自定义单元格内容；
• 支持显示树状表格；
• 支持排序。

版本与状态

快速开始

安装

npm i rsuite-table --save

rsuite-table 中的组件依赖了 rsuite，所以需要安装一下 rsuite。

npm i rsuite --save

样式

在 less 文件中引入:

@import '~rsuite-table/lib/less/index.less';

示例代码

import { Table, Column, HeaderCell, Cell } from 'rsuite-table';

const dataList = [
    {id:1, name:'a', email:'[e-mail]',avartar:'...'},
    {id:2, name:'b', email:'[e-mail]',avartar:'...'},
    {id:3, name:'c', email:'[e-mail]',avartar:'...'}
];

const ImageCell = ({ rowData, dataKey, ...props }) => (
    <Cell {...props}>
        <img src={rowData[dataKey]} width="50" />
    </Cell>
);


<Table data = {dataList}  >
    <Column  width = {100} sort fixed resizable>
        <HeaderCell>ID</HeaderCell>
        <Cell dataKey="id"></Cell>
    </Column>

    <Column  width = {100} sort resizable>
        <HeaderCell>Name</HeaderCell>
        <Cell dataKey="name"></Cell>
    </Column>

    <Column  width = {100} sort resizable>
        <HeaderCell>Email</HeaderCell>
        <Cell dataKey="email"></Cell>
    </Column>

    <Column  width = {100} resizable>
        <HeaderCell>Avartar</HeaderCell>
        <ImageCell dataKey="avartar"></ImageCell>
    </Column>
</Table>

Changelog

3.0.3

2018-6-25

• Chore: Allowed header height can be 0 ([#25])
• Chore: Update style for loading ([#25])
• Bugfix: Set minimum height for table body ([#24])