# fe-table

> demo链接：http://git.lianjia.com/react/Table

Latest version **0.0.5** (published 2016-08-31) · ISC license · 0 weekly downloads

## Install

```sh
npm install fe-table
pnpm add fe-table
yarn add fe-table
bun add fe-table
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2016-08-31 |
| First published | 2016-05-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | G freeman |
| Maintainers | leecade, wangcong |

## Links

- npm: https://www.npmjs.com/package/fe-table
- Repository: https://github.com/fe-components/fe-pagination
- Homepage: https://github.com/fe-components/fe-pagination#readme
- Issues: https://github.com/fe-components/fe-pagination/issues
- npm.io page: https://npm.io/package/fe-table

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^15.0.2
- [fe-reset](https://npm.io/package/fe-reset.md) ^1.0.5
- [fe-select](https://npm.io/package/fe-select.md) ^1.0.7
- [react-dom](https://npm.io/package/react-dom.md) ^15.0.2

## Recent versions

- 0.0.5 (latest) — 2016-08-31
- 0.0.4 — 2016-08-29
- 0.0.3 — 2016-08-29
- 0.0.2 — 2016-08-29
- 0.0.1 — 2016-05-24

## README

# Editable table

demo链接：http://git.lianjia.com/react/Table

***

### 概览

- **data**    [`Object<Object>`] 表格的数据结构，作为表格的渲染依据，主要逻辑
- **onChange** [`Function`](event, map, 'head'/'body',x, y)表格在编辑状态发生改变时触发的函数（表头没有x，head和body的坐标是独立的）
- **onClick** [`Function`](event, map, 'head'/'body',x, y)|表格在被点击时触发的函数
- **map** [`String`] 作为onChange/onClick的参数，可不设置，通过bind传

***

### data


- **editing**  [`Bool`] |false| 表格是否处于编辑状态
- **loading**    [`Bool`]  |false|表格是否处于加载中状态（可作为浮层显示在已有数据上）
- **error** [`Bool`]false|表格是否显示错误信息
- **errorMsg**[`String`]|undefined|错误信息，可用于动态请求数据后error处理
- **title** [`String`]|undefined|表格标题
- **head** [`Array<Object>`]  |[]| 表头，一维数组，是一组对象的集合，每个对象作为表头的一个cell（具体对象格式在cell中给出）
- **body**  [`Array<Obejct>`]|[]|表格主体，一维数组，父数组决定表格有几行，每个对象的data为子数组，决定每个cell的具体内容(具体对象格式在cell中给出)，对象的isShow决定子数组是否显示

***

### cell

`object`

表格每个单元的数据结构

- **editable** [`Bool`]|false|此单元是否是可编辑的，若为可编辑的，将在表格处于编辑状态时渲染为可编辑组件
- **fastEdit** [`Bool`]|false|当为true，无论表格处于什么状态，此单元格将被置为可编辑状态|
- **value/text** [`String/Array/Object`]  |''|表格单元显示的内容，优先取value，同时若是在editable为true时，value作为值传给`input`或`select`
- **key** [`String`]|''|可以作为单元的标识
- **props** [`Object`]|undefined|传给editable为true的cell的props，可以灵活运用，可以传任何属性给可editable为true的组件，样式等，甚至是onClick，onChange，onBlur这类的函数
- **renderCell** [`Function`]|undefined|返回值必须是组件，可替代原有的渲染方式，有两个默认的参数，`arg1`为此cell，`arg2(bool)`为表格是否处于编辑状态，可用此方法灵活更改单元格的渲染方式

`注：cell中可以自定义key用来保存后端数据，此对象将作为data传给底层的单元`

***

### event

表格暴露给外部两个事件：`onClick` 和`onChange`
两个事件的参数一样onChange函数主要可以用于表格处于可编辑状态时，进行状态更新（使用renderCell渲染的组件没有这两个事件）。
参数如下：

1.`event`：默认的event事件，可以从event.target中取得input和select改变的值；

2.`map`： 传给组件的map属性的值，可用来标识表格；

3.`type`：'caption'或'head'或'body'区分事件源为标题或表头和表格主体；

4.`arg4`：若type为表头，表示点击的是第几列，若type为表格body，表示事件源处于是第几行（0表示head中的第一列或body中的第一行）

5.`arg5`：只有当type是'body'时，才有值，为事件源处于第几列

`注：click事件是在整个table上捕获的，change事件是在具体单元上捕获的`

#### 附1

数据结构实例：

    let data = {
      editing: false,
    loading: false,
    error: false,
    errorMsg: '异常',
    title: '表格1',
    head: [
      {
        value: '头1',
        key: 'head1',
        props: {
          style: {
            color: 'lightblue'
          }
        }
      },{
        value: 'tou2',
        key: 'head2',
        renderCell: (data, editing) => <span>{data.value}</span>
      }
    ],
    body: [
      {
        isShow: true,
        data: [
          {value: '0行0列', key: 'head1'},
          {value: '0行1列', key: 'head2'}
        ]
      },
      {
        isShow: false,
        data: [
          {value: '1行0列', key: 'head1'},
          {value: '1行1列', key: 'head2'}
        ]
      },
    ]
  }

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