React Data Grid Column menu

Table of contents

• Overview
• Quick setup
• Plugin configuration
• Related articles
  • Related guides
  • Related API reference

Overview

This plugin enables you to add a configurable dropdown menu to the table's column headers. The dropdown menu acts like the Context Menu but is triggered by clicking the button in the header.

Quick setup

To enable the plugin, set the dropdownMenu configuration option to true when initializing Handsontable.

import Handsontable from 'handsontable'; import ReactDOM from 'react-dom'; import { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import 'handsontable/dist/handsontable.full.min.css'; // register Handsontable's modules registerAllModules(); const ExampleComponent = () => { return ( <HotTable data={Handsontable.helper.createSpreadsheetData(3, 7)} colHeaders={true} dropdownMenu={true} height="auto" licenseKey="non-commercial-and-evaluation" /> ); }; ReactDOM.render(<ExampleComponent />, document.getElementById('example1')); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.1/dist/react-handsontable.js"></script> <script src="https://handsontable.com/docs/12.1/scripts/fixer.js"></script> <script src="https://handsontable.com/docs/12.1/scripts/helpers.js"></script> <div id="example1" class="hot "></div>

import Handsontable from 'handsontable';
import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={Handsontable.helper.createSpreadsheetData(3, 7)}
      colHeaders={true}
      dropdownMenu={true}
      height="auto"
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));

Plugin configuration

To use the default dropdown contents, set it to true, or to customize it by setting it to use a custom list of actions. For the available entry options reference, see the Context Menu demo.

import Handsontable from 'handsontable'; import ReactDOM from 'react-dom'; import { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import 'handsontable/dist/handsontable.full.min.css'; // register Handsontable's modules registerAllModules(); const ExampleComponent = () => { return ( <HotTable data={Handsontable.helper.createSpreadsheetData(3, 7)} colHeaders={true} licenseKey="non-commercial-and-evaluation" height="auto" dropdownMenu={[ 'remove_col', '---------', 'make_read_only', '---------', 'alignment' ]} /> ); }; ReactDOM.render(<ExampleComponent />, document.getElementById('example2')); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@handsontable/react@12.1/dist/react-handsontable.js"></script> <script src="https://handsontable.com/docs/12.1/scripts/fixer.js"></script> <script src="https://handsontable.com/docs/12.1/scripts/helpers.js"></script> <div id="example2" class="hot "></div>

import Handsontable from 'handsontable';
import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={Handsontable.helper.createSpreadsheetData(3, 7)}
      colHeaders={true}
      licenseKey="non-commercial-and-evaluation"
      height="auto"
      dropdownMenu={[
        'remove_col',
        '---------',
        'make_read_only',
        '---------',
        'alignment'
      ]}
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example2'));

Related articles

Related guides

• Context menu

Related API reference

• Configuration options:
  • dropdownMenu
• Hooks:
  • afterDropdownMenuDefaultOptions
  • afterDropdownMenuHide
  • afterDropdownMenuShow
  • beforeDropdownMenuSetItems
  • beforeDropdownMenuShow
• Plugins:
  • DropdownMenu