react-column-chooser

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

Install

npm install --save react-column-chooser

Build

npm run build

Demo

npm run demo

Have a try at /demo/index.html

Test

npm test

Usage

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')
);