# react-column-chooser

> It helps you to add, remove and reorder your table columns.

Latest version **0.0.12** (published 2018-02-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-column-chooser
pnpm add react-column-chooser
yarn add react-column-chooser
bun add react-column-chooser
```

## 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.12 |
| Published | 2018-02-11 |
| First published | 2018-01-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | yaoyao |
| Maintainers | yaoyao.ict |

## Links

- npm: https://www.npmjs.com/package/react-column-chooser
- npm.io page: https://npm.io/package/react-column-chooser

## Recent versions

- 0.0.12 (latest) — 2018-02-11
- 0.0.11 — 2018-02-11
- 0.0.10 — 2018-02-10
- 0.0.9 — 2018-02-10
- 0.0.8 — 2018-02-09
- 0.0.7 — 2018-02-09
- 0.0.4 — 2018-01-24
- 0.0.3 — 2018-01-15
- 0.0.2 — 2018-01-14
- 0.0.1 — 2018-01-14

## README

# react-column-chooser
[![npm](https://img.shields.io/npm/v/react-column-chooser.svg)](https://www.npmjs.com/package/react-column-chooser)
[![Build Status](https://travis-ci.org/yaoyao-ict/react-column-chooser.svg?branch=master)](https://travis-ci.org/yaoyao-ict/react-column-chooser)
[![Coveralls github](https://coveralls.io/repos/github/yaoyao-ict/react-column-chooser/badge.svg?branch=master)](https://coveralls.io/github/yaoyao-ict/react-column-chooser?branch=master)
[![npm](https://img.shields.io/npm/dt/react-column-chooser.svg)](https://www.npmjs.com/package/react-column-chooser)

>It helps you to add, remove and reorder your table columns

## Install
```bash
npm install --save react-column-chooser
```
## Build
```bash
npm run build
```
## Demo
```bash
npm run demo
```
Have a try at /demo/index.html

## Test
```bash
npm test
```

## Usage
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import ColumnChooser from 'react-column-chooser';

const columnChooserConfig = {
  categories: [
    {
      name: 'Basics',
      options: [
        {
          id: 'company',
          name: 'Company',
          // selectOption: 'locked' || 'mandatory' || 'optional'(default)
          selectOption: 'locked',
        },
        {
          id: 'id',
          name: 'Id',
          selectOption: 'locked',
        },
      ],
    },
    {
      name: 'Detailed Info',
      options: [
        {
          id: 'revenue',
          name: 'Revenue',
          selectOption: 'optional',
        },
        {
          id: 'budget',
          name: 'Budget',
        },
      ],
    },
  ],
  selected: [
    'company',
    'id',
    'revenue',
    'budget',
  ],
  // Apply the column settings with a string name is allowed
  allowSaveName: true,
  // In Demo page, string start with ColumnChooser_ can be localized
  i18n: {
    getString: _.identity,
  },
};

ReactDOM.render(
  <ColumnChooser 
    selected={columnChooserConfig.selected}
    categories={columnChooserConfig.categories}
    allowSaveName={columnChooserConfig.allowSaveName}
    i18n={columnChooserConfig.i18n}
    onSave={({
      name,
      selected,
    }) => console.log(name, selected)}
    onCancel={() => console.log('column chooser cancel')}
  />,
  document.getElementById('root')
);
```

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