# ex-table-column

> Extended to element table column, supports column width to be automatically adjusted according to content, supports all attributes of el-table-column, compatible el-table-column.

Latest version **1.1.2** (published 2020-06-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install ex-table-column
pnpm add ex-table-column
yarn add ex-table-column
bun add ex-table-column
```

## 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.1.2 |
| Published | 2020-06-09 |
| First published | 2020-03-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 142.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 24 |
| Author | li jie |
| Maintainers | mnm001 |
| Keywords | vue, element-ui, el-table-column, auto-fit |

## Links

- npm: https://www.npmjs.com/package/ex-table-column
- Repository: https://github.com/mnm1001/ex-table-column
- Homepage: https://github.com/mnm1001/ex-table-column#readme
- Issues: https://github.com/mnm1001/ex-table-column/issues
- npm.io page: https://npm.io/package/ex-table-column

## Dependencies (1)

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

## 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.1.2 (latest) — 2020-06-09
- 1.1.1 — 2020-06-09
- 1.1.0 — 2020-06-08
- 1.0.8 — 2020-05-18
- 1.0.7 — 2020-04-01
- 1.0.6 — 2020-03-20
- 1.0.5 — 2020-03-09
- 1.0.4 — 2020-03-09
- 1.0.3 — 2020-03-09
- 1.0.2 — 2020-03-08
- 1.0.1 — 2020-03-08

## README

# ex-table-column
Extended from el-table-column. Automatically adjust column width according to content. Keep all features of el-table-column.

## Features
- Automatically adjust column width according to content.
- Extended from el-table-column, keep all features of el-table-column.

## Using npm or yarn
```bash
$ npm install ex-table-column --save
```

```bash
$ yarn add ex-table-column
```
## Demo
Clone repository and run:
```bash
$ yarn && yarn serve
```
## Required
- [element-ui](https://github.com/ElemeFE/element)
## Quick Start
``` javascript
import Vue from 'vue'
import Element from 'element-ui'
import ExTableColumn from 'ex-table-column';

Vue.use(Element)
Vue.component(ExTableColumn.name, ExTableColumn);
```
### Simple use
Replace `<el-table-column />` to `<ex-table-column>`, add prop `:autoFit='true'`:
``` javascript
<el-table>
  <ex-table-column
    :autoFit='true'
  />
</el-table>
```
And add style:
``` css
.el-table .cell {
  white-space: nowrap;
  width: fit-content;
}
```
### Complicated slot
Add prop `fitByClass` to specify a class of the element, which is in slot component, and use to calculate the column width:
``` javascript
<el-table>
  <ex-table-column
    :autoFit='true'
    fitByClass="auto-fit-target"
    :fitGap="20"
  >
    <div class="column-wrapper" slot-scope="scope">
      <div class="column-content auto-fit-target">
        {{scope.row[scope.column.property]}}
      </div>
    </div>
  </ex-table-column>
</el-table>
```
Make sure that the element choosed by `fitByClass`, the width of the element is correct, maybe you should add `white-space: nowrap;
  width: fit-content;` for the element.

### Fit header
Calculating the column width does not consider the header width by default, if you want to include the header, you can add prop `:fitHeader='true'`:
``` javascript
<el-table>
  <ex-table-column
    :autoFit='true'
    :fitHeader='true'
  />
</el-table>
```
And add style:
``` css
.el-table .cell,
.el-table th>.cell
{
  white-space: nowrap;
  width: fit-content;
}
```
## Extend prop

| Prop | Description | Type | Accepted Values | Default | 
| --- | --- | --- | --- | --- |
| autoFit | whether column width to be automatically adjusted according to content. | boolean | - | false
| fitByClass | Specify the class of the element that determines the width | string | - | cell
| fitGap | The content right margin | number | - | 0
| fitHeader | Whether to include the header width when calculating the column width | boolean | - | false

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