Column component

Configure your grid’s columns, using the props of the HotColumn component. Pass your component as a custom cell editor or a custom cell renderer.

Declare column settings

To declare column-specific settings, pass the settings as HotColumn props, exactly as you would with HotTable.

Source code

JavaScript

import { HotTable, HotColumn } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';

// register Handsontable's modules
registerAllModules();

const hotData = [
  ['A1', 'B1'],
  ['A2', 'B2'],
  ['A3', 'B3'],
  ['A4', 'B4'],
  ['A5', 'B5'],
  ['A6', 'B6'],
  ['A7', 'B7'],
  ['A8', 'B8'],
  ['A9', 'B9'],
  ['A10', 'B10'],
];

const secondColumnSettings = {
  title: 'Second column header',
  readOnly: true,
};

const ExampleComponent = () => {
  return (
    <HotTable
      data={hotData}
      autoWrapRow={true}
      autoWrapCol={true}
      height="auto"
      licenseKey="non-commercial-and-evaluation"
    >
      <HotColumn title="First column header" />
      <HotColumn settings={secondColumnSettings} />
    </HotTable>
  );
};

export default ExampleComponent;

TypeScript

import { HotTable, HotColumn } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';

// register Handsontable's modules
registerAllModules();

const hotData = [
  ['A1', 'B1'],
  ['A2', 'B2'],
  ['A3', 'B3'],
  ['A4', 'B4'],
  ['A5', 'B5'],
  ['A6', 'B6'],
  ['A7', 'B7'],
  ['A8', 'B8'],
  ['A9', 'B9'],
  ['A10', 'B10'],
];

const secondColumnSettings = {
  title: 'Second column header',
  readOnly: true,
};

const ExampleComponent = () => {
  return (
    <HotTable
      data={hotData}
      autoWrapRow={true}
      autoWrapCol={true}
      height="auto"
      licenseKey="non-commercial-and-evaluation"
    >
      <HotColumn title="First column header" />
      <HotColumn settings={secondColumnSettings} />
    </HotTable>
  );
};

export default ExampleComponent;

Object data source

When you use object data binding for <HotColumn/>, you need to provide precise information about the data structure for columns. To do so, refer to your object-based data property in HotColumn’s data prop, for example, <HotColumn data='id' />:

Source code

JavaScript

import { HotTable, HotColumn } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';

// register Handsontable's modules
registerAllModules();

// a renderer component
const ScoreRenderer = (props) => {
  const { value } = props;
  const color = value > 60 ? '#2ECC40' : '#FF4136';

  return <span style={{ color }}>{value}</span>;
};

// a renderer component
const PromotionRenderer = (props) => {
  const { value } = props;

  if (value) {
    return <span>&#10004;</span>;
  }

  return <span>&#10007;</span>;
};

// you can set `data` to an array of objects
const data = [
  {
    id: 1,
    name: 'Alex',
    score: 10,
    isPromoted: false,
  },
  {
    id: 2,
    name: 'Adam',
    score: 55,
    isPromoted: false,
  },
  {
    id: 3,
    name: 'Kate',
    score: 61,
    isPromoted: true,
  },
  {
    id: 4,
    name: 'Max',
    score: 98,
    isPromoted: true,
  },
  {
    id: 5,
    name: 'Lucy',
    score: 59,
    isPromoted: false,
  },
];

const ExampleComponent = () => {
  return (
    <HotTable
      data={data}
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      autoRowSize={false}
      autoColumnSize={false}
      height="auto"
    >
      {/* use the `data` prop to reference the column data */}
      <HotColumn data="id" />
      <HotColumn data="name" />
      <HotColumn data="score" renderer={ScoreRenderer} />
      <HotColumn data="isPromoted" renderer={PromotionRenderer} />
    </HotTable>
  );
};

export default ExampleComponent;

TypeScript

import { HotTable, HotColumn } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';

// register Handsontable's modules
registerAllModules();

// a renderer component
const ScoreRenderer = (props: { value?: any }) => {
  const { value } = props;
  const color = value > 60 ? '#2ECC40' : '#FF4136';

  return <span style={{ color }}>{value}</span>;
};

// a renderer component
const PromotionRenderer = (props: { value?: any }) => {
  const { value } = props;

  if (value) {
    return <span>&#10004;</span>;
  }

  return <span>&#10007;</span>;
};

// you can set `data` to an array of objects
const data = [
  {
    id: 1,
    name: 'Alex',
    score: 10,
    isPromoted: false,
  },
  {
    id: 2,
    name: 'Adam',
    score: 55,
    isPromoted: false,
  },
  {
    id: 3,
    name: 'Kate',
    score: 61,
    isPromoted: true,
  },
  {
    id: 4,
    name: 'Max',
    score: 98,
    isPromoted: true,
  },
  {
    id: 5,
    name: 'Lucy',
    score: 59,
    isPromoted: false,
  },
];

const ExampleComponent = () => {
  return (
    <HotTable
      data={data}
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
      autoRowSize={false}
      autoColumnSize={false}
      height="auto"
    >
      {/* use the `data` prop to reference the column data */}
      <HotColumn data="id" />
      <HotColumn data="name" />
      <HotColumn data="score" renderer={ScoreRenderer} />
      <HotColumn data="isPromoted" renderer={PromotionRenderer} />
    </HotTable>
  );
};

export default ExampleComponent;