persistentState not working when page refreshed, React.js

Tags: #<Tag:0x00007fee37d38998>


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 = {
        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 data={'col_5'} readOnly />
          <HotColumn data={'col_6'} readOnly />
          <HotColumn data={'col_7'} readOnly />

Hi @abdul.rehman.khan

I tried to recreate your issue basing on the code you sent but it looks like some parts of it are missing. Can you please send it as a code demo in jsFiddle (for example)?

Hi @adrian.szymanski,

The issue is resolved I actually forgot to provide a unique “id” to handsontable instance.

check this out for your reference.