So I’m using Handsontable library in React to create excel like tables, where HotTable
is library component with some options, like contextMenu – modal window , and columns.
Issue is that if I specify columns
in HotTable component , in modal window insert/remove column functionality is disabled/grayed-out , not removed. How to enable it?
import { useMemo } from 'react'
import HotTable from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import { ColumnSettings, GridSettings } from "handsontable/settings";
import 'handsontable/dist/handsontable.full.min.css';
registerAllModules();
const MIN_COLS = 30;
const MIN_ROWS = 500;
const data = [
['', 'Tesla', 'Volvo', 'Toyota', 'Ford', 'Audi'],
['2019', 10, 11, 12, 13],
['2020', 20, 11, 14, 13],
['2021', 30, 15, 12, 13]
];
export const excelTables = () => {
const columns = [...new Array(MIN_COLS)].map(
() =>
({
// some key : value pairs -- super important
} as ColumnSettings)
);
return (
<HotTable
data={data}
rowHeaders={true}
colHeaders={true}
contextMenu={true}
columns={columns}
licenseKey={ "non-commercial-and-evaluation"}
/>
);
};
with columns
option in HotTable component
without columns
option in HotTable component
Columns – in docs said that this option overwrites the top-level grid options. This is just minimal reproducible example, in project I need to specify columns option.