# custom-table

> a custom table component for vue.

Latest version **0.1.0** (published 2018-04-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install custom-table
pnpm add custom-table
yarn add custom-table
bun add custom-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.1.0 |
| Published | 2018-04-30 |
| First published | 2018-04-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.11.5 |
| Dependencies | 0 |
| Unpacked size | 231.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ciwyaitd |
| Maintainers | ciwyaitd |
| Keywords | element, element-ui, element-table, custom-table, vue, vue table |

## Links

- npm: https://www.npmjs.com/package/custom-table
- Repository: https://github.com/ciwyaitd/custom-table
- Homepage: https://ciwyaitd.github.io/custom-table/
- Issues: https://github.com/ciwyaitd/custom-table/issues
- npm.io page: https://npm.io/package/custom-table

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2018-04-30
- 0.0.4 — 2018-04-14
- 0.0.3 — 2018-04-14
- 0.0.2 — 2018-04-10

## README

# custom-table
> A custom-table component for vue. --base element-ui 2.3.2  

## Installation
```shell
npm i custom-table -D

or
yarn add custom-table -D

# if you need
yarn add element-theme-chalk -D
```

## Usage
```javascript
import Vue from 'vue'
import CustomTable from 'custom-table'

Vue.use(CustomTable)

// or
// maybe you need to install element-theme-chalk as css style
import 'element-theme-chalk/lib/table.css'
import 'element-theme-chalk/lib/table-column.css'
import Vue from 'vue'
import {
    CustomTable,
    ExpendTable,
    CustomTableColumn,
    CustomTableWithSlot
} from 'custom-table'

Vue.component(CustomTable.name, CustomTable)
Vue.component(ExpendTable.name, ExpendTable)
Vue.component(CustomTableColumn.name, CustomTableColumn)
Vue.component(CustomTableWithSlot.name, CustomTableWithSlot)
```

### Custom Table Attributes

| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| data | 表格数据 | any[] | — | [] |
| props | 表头数据 | any[] | [传送门](https://github.com/ciwyaitd/element-table-column) | [] |
| propsKey | 指定 data 数据的字段 key | Object | [传送门](#propsKey) | — |
| 其他 | el-table 指定可用 attributes | — | [传送门](#Table) | — |

#### propsKey
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| label | 指定表格数据 label 字段为 data 的某个属性值 | string | — | 'label' |
| children | 指定表格数据 children 字段为 data 的某个属性值 | string | — | 'children' |

### Expand Table Attributes

| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| data | 表格数据 | any[] | — | [] |
| props | 表头数据 | any[] | [传送门](https://github.com/ciwyaitd/element-table-column) | [] |
| props-key | data 数据指定的字段 key | Object | [传送门](#propsKey) | — |
| expand-keys | 默认展开行的键值 | string[] | — | [] |
| left | 折叠按钮位置，列 | number | — | 1 |
| width | 表格默认最少宽度 | number | — | 80 |
| *row-key | 行数据的 key，保证唯一性 | string | — | 默认以 props 的第一个值的 prop 作为 key |
| 其他 | el-table 指定可用 attributes | — | [传送门](#Table) | — |

### Custom Table With Slot Attributes

| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| data | 表格数据 | any[] | — | [] |
| props | 表头数据 | any[] | [传送门](https://github.com/ciwyaitd/element-table-column) | [] |
| propsKey | 指定 data 数据的字段 key | Object | [传送门](#propsKey) | — |
| 其他 | el-table 指定可用 attributes | — | [传送门](#Table) | — |

##### Custom Table With Slot 注：
props 中 children 字段无效，slot 需配合 showSlot 字段使用。

## Table
### Table Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| data | 显示的数据 | array | — | — |
| height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。  | string/number | — | — |
| max-height | Table 的最大高度 | string/number | — | — |
| stripe | 是否为斑马纹 table | boolean | — | false |
| border | 是否带有纵向边框 | boolean | — | false |
| size | Table 的尺寸 | string | medium / small / mini | — |
| fit | 列的宽度是否自撑开 | boolean | — | true |
| show-header | 是否显示表头 | boolean | — | true |
| highlight-current-row | 是否要高亮当前行 | boolean | — | false |
| current-row-key | 当前行的 key，只写属性 | String,Number | — | — |
| row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |
| row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |
| cell-class-name | 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — |
| cell-style | 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | — | — |
| header-row-class-name | 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — |
| header-row-style | 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — |
| header-cell-class-name | 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — |
| header-cell-style | 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 | Function({row, rowIndex, rowIndex, columnIndex})/Object | — | — |
| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的。类型为 String 时，支持多层访问：`user.info.id`，但不支持 `user.info[0].id`，此种情况请使用 `Function`。 | Function(row)/String | — | — |
| empty-text | 空数据时显示的文本内容，也可以通过 `slot="empty"` 设置 | String | — | 暂无数据 |
| default-expand-all | 是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效 | Boolean | — | false |
| expand-row-keys | 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。| Array | — | |
| default-sort | 默认的排序列的prop和顺序。它的`prop`属性指定默认的排序的列，`order`指定默认排序的顺序| Object | `order`: ascending, descending | 如果只指定了`prop`, 没有指定`order`, 则默认顺序是ascending |
| tooltip-effect | tooltip `effect` 属性 | String | dark/light | | dark |
| show-summary | 是否在表尾显示合计行 | Boolean | — | false |
| sum-text | 合计行第一列的文本 | String | — | 合计 |
| summary-method | 自定义的合计计算方法 | Function({ columns, data }) | — | — |
| span-method | 合并行或列的计算方法 | Function({ row, column, rowIndex, columnIndex }) | — | — |
| select-on-indeterminate | 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 | Boolean | — | true |

### Table Events
| 事件名 | 说明 | 参数 |
| ---- | ---- | ---- |
| select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row |
| select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection |
| selection-change | 当选择项发生变化时会触发该事件 | selection |
| cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event |
| cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
| cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
| cell-dblclick | 当某个单元格被双击击时会触发该事件 | row, column, cell, event |
| row-click | 当某一行被点击时会触发该事件 | row, event, column |
| row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | row, event |
| row-dblclick | 当某一行被双击时会触发该事件 | row, event |
| header-click | 当某一列的表头被点击时会触发该事件 | column, event |
| header-contextmenu | 当某一列的表头被鼠标右键点击时触发该事件 | column, event |
| sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
| filter-change | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters |
| current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |
| header-dragend | 当拖动表头改变了列的宽度的时候会触发该事件 | newWidth, oldWidth, column, event |
| expand-change | 当用户对某一行展开或者关闭的时候会触发该事件 | row, expandedRows |

### Table Methods
| 方法名 | 说明 | 参数 |
| ---- | ---- | ---- |
| clearSelection | 用于多选表格，清空用户的选择 | — |
| toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected |
| toggleRowExpansion | 用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, expanded |
| setCurrentRow | 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 | row |
| clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | — |
| clearFilter | 用于清空过滤条件，数据会恢复成未过滤的状态 | — |
| doLayout | 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 | — |

# License
[MIT](https://opensource.org/licenses/MIT)

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