Column Toggle

react-bootstrap-table2 support a toggle list for user to toggle the column visibility.

Live Demo For Column Toggle

---

Prepare

Please check How to start with table toolkit

Enable Column Toggle

import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';

const { ToggleList } = ColumnToggle;
//...

<ToolkitProvider
  keyField="id"
  data={ products }
  columns={ columns }
  columnToggle
>
  {
    props => (
      <div>
        <ToggleList { ...props.columnToggleProps } />
        <hr />
        <BootstrapTable
          { ...props.baseProps }
        />
      </div>
    )
  }
</ToolkitProvider>

1. Enable column toggle via columnToggle prop on ToolkitProvider.

2. ToolkitProvider is a wrapper of react context, you should wrap the BootstrapTable and ToggleList as the child of ToolkitProvider.

3. Rendering ToggleList with columnToggleProps. The position of ToggleList is depends on you.

Customize ToggleList Component

So far we only have limited customization on ToggleList component, following props is available for you:

• btnClassName: Add custom class on toggle button.
• className: Add custom class on toggle list.
• contextual: config bootstrap contextual, default is primary.

However, you can custom the whole thing by yourself like following:

// This is my custom column toggle component

const CustomToggleList = ({
  columns,
  onColumnToggle,
  toggles
}) => (
  <div className="btn-group btn-group-toggle btn-group-vertical" data-toggle="buttons">
    {
      columns
        .map(column => ({
          ...column,
          toggle: toggles[column.dataField]
        }))
        .map(column => (
          <button
            type="button"
            key={ column.dataField }
            className={ `btn btn-warning ${column.toggle ? 'active' : ''}` }
            data-toggle="button"
            aria-pressed={ column.toggle ? 'true' : 'false' }
            onClick={ () => onColumnToggle(column.dataField) }
          >
            { column.text }
          </button>
        ))
    }
  </div>
);

export const MyTable = () => (
    <ToolkitProvider
      keyField="id"
      data={ products }
      columns={ columnsdt }
      columnToggle
    >
      {
        props => (
          <div>
            <CustomToggleList { ...props.columnToggleProps } />
            <hr />
            <BootstrapTable
              { ...props.baseProps }
            />
          </div>
        )
      }
    </ToolkitProvider>
);

Following, we just explain how it work:

ToolkitProvider will pass a props which have a property called columnToggleProps. columnToggleProps have following properties:

• columns: Column list
• toggles: An object which describe current column visibilities. true is on and false is off.
• onColumnToggle: Call this method when user toggle a column.