rsuite-table

rsuite-table

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

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

版本与状态

# 快速开始

安装：

npm i rsuite-table --save

示例：

import react from 'react';
import ReactDOM from 'react-dom';
import { Table, Column, HeaderCell, Cell } from 'rsuite-table';
import 'rsuite-table/lib/less/index.less';

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>
);

ReactDOM.render(

    <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> ,

    document.getElementById('mount')
);

Changelog

2.0.0

• 升级 React 版本 15.* ,同时兼容 0.14.9 版本
• 删除 Minxin, 改用高阶组件
• 改进表格许多性能问题
• 添加了对 loading 状态的支持
• 添加了 编辑的表格 的示例