# @sinoui/data-table

> sinoui数据表格

Latest version **0.1.31** (published 2020-04-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sinoui/data-table
pnpm add @sinoui/data-table
yarn add @sinoui/data-table
bun add @sinoui/data-table
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.31 |
| Published | 2020-04-27 |
| First published | 2019-03-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 245.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | JackingLiu |
| Maintainers | chenaihua, jackingliu, tianyanqiu |

## Links

- npm: https://www.npmjs.com/package/@sinoui/data-table
- npm.io page: https://npm.io/package/@sinoui/data-table

## Dependencies (7)

- [tslib](https://npm.io/package/tslib.md) 1.9.3
- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [react-dnd](https://npm.io/package/react-dnd.md) ^3.0.2
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [react-icons](https://npm.io/package/react-icons.md) ^3.2.2
- [sinoui-components](https://npm.io/package/sinoui-components.md) ^0.1.31
- [immutability-helper](https://npm.io/package/immutability-helper.md) ^3.0.0

## Recent versions

- 0.1.31 (latest) — 2020-04-27
- 0.2.22 — 2020-04-17
- 0.2.22-alpha.0 — 2020-04-02
- 0.2.21 — 2020-02-21
- 0.2.19 — 2020-02-18
- 0.2.18 — 2020-02-18
- 0.2.17 — 2020-02-18
- 0.2.16 — 2020-02-14
- 0.2.15 — 2020-02-14
- 0.2.14 — 2020-02-14
- 0.2.13 — 2020-02-03
- 0.2.11 — 2020-01-31
- 0.2.10 — 2020-01-16
- 0.2.9 — 2020-01-09
- 0.2.7 — 2019-12-20
- … 45 more at https://npm.io/package/@sinoui/data-table/versions

## README

# sinoui-data-table

> sinoui 数据表格组件。

## roadmap

### next

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

### v1.0.0

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

## 使用教程

### 安装

sinoui-data-table 依赖[sinoui-components](http://218.240.159.110:10080/newoa/sinoui-components)，所以需要同时安装 sinoui-data-table 和 sinoui-components 以及 styled-components：

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

### 例子

准备数据：

```javascript
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`展示人员信息：

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

---
_Source: https://npm.io/package/@sinoui/data-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._