@sinoui/data-table v0.1.31

sinoui-data-table

sinoui 数据表格组件。

roadmap

next

• 100%单元测试
• 支持不分页渲染所有的数据
• 数据分组展示
• demo：添加<Toolbar>展示

v1.0.0

• 以<TableColumn/>组件的方式定义表格
• 支持分页
• 支持主题定制
• 支持排序
• 支持数据行选择
• 无数据时显示提示
• 可监听数据行单击和双击事件

使用教程

安装

sinoui-data-table 依赖sinoui-components，所以需要同时安装 sinoui-data-table 和 sinoui-components 以及 styled-components：

yarn add sinoui-components sinoui-data-table styled-components

例子

准备数据：

import moment from 'moment';

const users = [];

const begin = new Date(1980, 0, 18);

for (let i = 0; i < 100; i += 1) {
  users.push({
    id: i,
    userName: `张三${i + 1}`,
    age: 21,
    sex: '男',
    telephone: '13455555555',
    birthday: moment(begin)
      .add(i, 'month')
      .toDate(),
  });
}

function getSortedUsers(name, direction) {
  return name
    ? users
        .slice()
        .sort(
          (user1, user2) =>
            direction === 'desc'
              ? user2[name] - user1[name]
              : user1[name] - user2[name],
        )
    : users;
}

使用DataTable展示人员信息：

import DataTable, { TableColumn } from '@sinoui/data-table';
import { withState } from 'recompose';

const enhance = withState('sort', 'setSort', null);

const DataTableDemo = enhance(({ sort, setSort, ...props }) => (
  <DataTable
    selectable
    data={getSortedUsers(sort && sort.name, sort && sort.direction)}
    onChange={(pageNo, pageSize, _sort) => {
      setSort(_sort);
    }}
    onSelect={action('选择行事件')}
    onRowClick={action('单击一行数据')}
    onRowDblClick={action('双击一行数据')}
    keyName="id"
    {...props}
  >
    <TableColumn
      name="userName"
      title="姓名"
      sortable
      sortActive
      sortDirection="asc"
      width={150}
    />
    <TableColumn name="sex" title="性别" sortable width={80} />
    <TableColumn name="age" title="年龄" sortable numeric width={80} />
    <TableColumn
      name="birthday"
      title="出生日期"
      sortable
      render={(data) => moment(data).format('YYYY-MM-DD')}
      width={200}
      numeric
    />
    <TableColumn name="telephone" title="联系电话" width={200} numeric />
  </DataTable>
));