Hello,
I have persistentState enable, in a React.js project. Upon refreshing the page the change made to col width, sorting order etc… wont persist and the table is back to default state, although I can see the updated colwidths, sorting order etc inside of my local storage. below is the code for reference.
Current Versions:
@handsontable/react: ^12.1.2 & handsontable": ^12.1.2,
const MyHotTable = ({ data }) => {
const { elementRef, elementBounds } = useTableSize()
const hotSettings = {
data,
colHeaders: ['ID', 'COL1, 'COL2', 'COL3', 'COL4', 'COL5', 'COL6', 'COL7'],
colWidths: [50, 50, 50, 50, 300, 50, 100, 100],
autoRowSize: false,
autoColumnSize: false,
columnSorting: true,
height: elementBounds.fullWindowHeight,
manualColumnResize: true,
rowHeaders: false,
stretchH: 'all',
filters: true,
manualColumnMove: true,
dropdownMenu: ['filter_by_value', 'filter_action_bar'],
hiddenColumns: {
columns: [0],
},
disableVisualSelection: true,
persistentState: true,
}
const CustomRenderer = (props: any): any => {
const { value, row, cellProperties } = props
const id = cellProperties.instance.getDataAtRow(row)[0]
return <Link to={`/abc/${id}`}>{value}</Link>
}
return (
<HotTable ref={elementRef} settings={hotSettings}>
<HotColumn data={'id'} readOnly />
<HotColumn data={'col_1} readOnly />
<HotColumn data={'col_2'} readOnly />
<HotColumn data={'col_3'} readOnly />
<HotColumn data={'col_4'} readOnly>
<CustomRenderer hot-renderer />
</HotColumn>
<HotColumn data={'col_5'} readOnly />
<HotColumn data={'col_6'} readOnly />
<HotColumn data={'col_7'} readOnly />
</HotTable>
)
}