# custom-table-controller

> 控制表格列的显示隐藏，以及基于Vue.Draggable实现列排序。

Latest version **1.0.10** (published 2020-07-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install custom-table-controller
pnpm add custom-table-controller
yarn add custom-table-controller
bun add custom-table-controller
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2020-07-23 |
| First published | 2020-07-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 18.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | mlzhuo |
| Maintainers | mlzhuo |
| Keywords | drag, draggable, sort, table |

## Links

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

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.5.11
- [vuedraggable](https://npm.io/package/vuedraggable.md) ^2.24.0

## 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

- 1.0.10 (latest) — 2020-07-23
- 1.0.9 — 2020-07-23
- 1.0.8 — 2020-07-16
- 1.0.7 — 2020-07-16
- 1.0.6 — 2020-07-14
- 1.0.5 — 2020-07-11
- 1.0.4 — 2020-07-11
- 1.0.3 — 2020-07-11
- 1.0.2 — 2020-07-11
- 1.0.1 — 2020-07-10
- 1.0.0 — 2020-07-10

## README

# custom-table-controller

> 控制表格列数据的显示隐藏，以及基于Vue.Draggable实现列排序。
>
> github：https://github.com/mlzhuo/custom-table-controller



## ScreenShot

![](https://github.com/mlzhuo/custom-table-controller/blob/master/screenshot/example.gif)



## Install

``` bash
npm install custom-table-controller
```



## Attributes

|     参数      |           说明            |  类型  |  默认值  |
| :-----------: | :-----------------------: | :----: | :------: |
|   allProps    |      table所有列字段      | Array  |    []    |
|  checkProps   |      table选中列字段      | Array  |    []    |
| propsLabelKey |      table列名称字段      | String |  label   |
| propsValueKey |       table列值字段       | String |  value   |
|     width     |     展开拖动列表宽度      | Number |   200    |
|    height     |     展开拖动列表高度      | Number |   300    |
|   itemStyle   | 展开拖动列表item的css样式 | Object |    {}    |
|  activeColor  |      选中item的颜色       | String | \#409eff |



## Events

|     事件名称     |    说明    |        回调参数         |
| :--------------: | :--------: | :---------------------: |
| updateCheckProps | 更新选中列 |   选中的 table 列数据   |
|  updateAllProps  | 更新所有列 | 排序后的table所有列数据 |



## Slot

|    name     |                    说明                     |
| :---------: | :-----------------------------------------: |
|  click-btn  | 点击显示拖动列表的控件，默认 “设置齿轮icon” |
| active-icon |  拖动列表选中状态时，尾部的标志，默认 “√”   |
|  drag-icon  |       拖动列表首部拖动图标，默认 “≡”        |
| list-header | 拖动列表头部，默认“表头设置” & “X” 关闭按钮 |



## Example

```vue
<template>
  <div class="root">
    <div class="table">
      <table border>
        <tr>
          <th 
            v-for="(item,index) in checkProps" 
            :key="index">{{item.label}}</th>
        </tr>
        <tr v-for="(eachItem, eachIndex) in tableData" :key="eachIndex">
            <td 
              v-for="(item,index) in checkProps" 
              :key="index">{{eachItem[item.value]}}</td>
        </tr>
      </table>
    </div>

    <div class="controller-icon">
      <customTableController
        @updateCheckProps="updateCheckProps"
        @updateAllProps="updateAllProps"
        :allProps="allProps"
      ></customTableController>
    </div>
  </div>
</template>

<script>
import customTableController from "./components/customTableController";
export default {
  components: { customTableController },
  data() {
    return {
      tableData: [
          {
          career: "boss",
          buyNum: 100,
          city: "上海",
          dateOfBirth: "1996-04-06",
          lastOrderTime: "2019-05-05",
          firstOrderTime: "2019-05-05"
        }
      ],
      checkProps: [],
      allProps: []
    };
  },
  created() {
    this.allProps = [
      { label: "职业", value: "career" },
      { label: "总购物次数", value: "buyNum" },
      { label: "所在地", value: "city" },
      { label: "生日", value: "dateOfBirth" },
      { label: "最近一次购物时间", value: "lastOrderTime" },
      { label: "第一次购物时间", value: "firstOrderTime" }
    ];
  },
  methods: {
    updateCheckProps(checkProps) {
      this.checkProps = checkProps;
    },
    updateAllProps(allProps) {
      this.allProps = allProps;
    }
  }
};
</script>

<style>
.root {
  display: flex;
  flex-direction: column;
}
.table,
table {
  width: 100%;
}
.table {
  padding: 50px;
  box-sizing: border-box;
}
.controller-icon {
  margin: 0 auto;
}
</style>

```

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