# bc-pivot-table

> 用div重构的一个透视表

Latest version **1.3.1** (published 2022-03-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install bc-pivot-table
pnpm add bc-pivot-table
yarn add bc-pivot-table
bun add bc-pivot-table
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2022-03-07 |
| First published | 2022-02-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 983.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | beckhayu |
| Maintainers | beckhayu |
| Keywords | vue3.x, vuejs, typescript, vuecli4.x |

## Links

- npm: https://www.npmjs.com/package/bc-pivot-table
- Repository: https://github.com/beckhayu888/bc-pivot-table
- Homepage: https://github.com/beckhayu888/bc-pivot-table.git
- Issues: https://github.com/beckhayu888/bc-pivot-table.git/issues
- npm.io page: https://npm.io/package/bc-pivot-table

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.0.0
- [core-js](https://npm.io/package/core-js.md) ^3.6.5

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.3.1 (latest) — 2022-03-07
- 1.3.0 — 2022-02-10
- 1.2.8 — 2022-02-10
- 1.2.3 — 2022-02-10
- 1.2.2 — 2022-02-10
- 1.2.1 — 2022-02-10
- 1.1.9 — 2022-02-10
- 1.1.8 — 2022-02-10
- 1.0.9 — 2022-02-10
- 1.0.8 — 2022-02-10
- 1.0.5 — 2022-02-10
- 1.0.3 — 2022-02-10
- 1.0.1 — 2022-02-10
- 1.0.0 — 2022-02-09
- 0.1.5 — 2022-02-09
- … 3 more at https://npm.io/package/bc-pivot-table/versions

## README

bc-pivot-table
===
一个用div重写table的透视表

  *支持虚拟滚动

  *支持左边和上面格子合并

  *支持大数据下开启webWorker进行计算

  *支持展示合计

  *支持冻结左边列

  *重写布局，用div代替不友好的table


![bc-pivot-table preview](https://github.com/beckhayu888/bc-pivot-table/blob/main/src/assets/preview.png)

## github
https://github.com/beckhayu888/bc-pivot-table
## 安装
  `npm install --save bc-pivot-table`

## 组件
BcBasePivotTable：不固定表左边列的透视表

BcFixedPivotTable：固定左边列的透视表
## 使用

### 全局引入
`import bcPivotTable from 'bc-pivot-table'`

`createApp(App).use(bcPivotTable)`

`<bc-base-pivot-table></bc-base-pivot-table>`

`<bc-fixed-pivot-table></bc-fixed-pivot-table>`


### 局部引入
`import { BcBasePivotTable, BcFixedPivotTable } from 'bc-pivot-table'`

`<bc-base-pivot-table></bc-base-pivot-table>`

`<bc-fixed-pivot-table></bc-fixed-pivot-table>`


### 参数说明

参数 | 类型 | 默认 | 备注
---------|------|---------|------------
`showSum` | `Boolean` | `true` | `是否展示合计`
`valueKey` | `String` | `value` | `data中值的使用字段`
`rowKey` | `Array` | `[]` | `左边列的配置数组`
`colKey` | `Array` | `[]` | `上面表头列的配置数组`
`dataList` | `Array` | `[]` | `data`
`cellStyleOps` | `Object` | `{}` | `透视表配置`

##### rowKey、colKey

参数 | 类型 | 默认 | 备注
---------|------|---------|------------
`label` | `String` | ` ` | `显示的label`
`value` | `String` | ` ` | `data中值的使用字段`

##### cellStyleOps

参数 | 类型 | 默认 | 备注
---------|------|---------|------------
`paddingLeft` | `Number` | ` 6` | `每一个格子的padding-left属性`
`paddingRight` | `Number` | ` 6` | `每一个格子的padding-right属性`
`height` | `Number` | ` 25` | `每一个格子的高度属性`
`fontSize` | `Number` | ` 12` | `字体大小`
`maxWidth` | `Number` | ` 150` | `每一个格子的最大宽度`
`workerAutoLimit` | `Number` | `1000 ` | `数据量到达多少条的时候启动webWorker去进行计算（多数据时的解决方案）`

### 重要remark!!!
切记！！！不能随意更改使格子宽度和高度变化的css属性，不然会造成格子样式错乱

更改颜色等不会改变宽高的样式可以使用深度选择器进行修改

当前版本仅支持vue3.x版本
### 例子
![效果](https://github.com/beckhayu888/bc-pivot-table/blob/main/src/assets/preview.png)
![例子代码](https://github.com/beckhayu888/bc-pivot-table/blob/main/src/assets/code1.png)
![例子代码](https://github.com/beckhayu888/bc-pivot-table/blob/main/src/assets/code2.png)
![例子代码](https://github.com/beckhayu888/bc-pivot-table/blob/main/src/assets/code3.png)

可以自行下载代码查看例子

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