Table style disappears in afterChange

Tags: #<Tag:0x00007efc647bc908> #<Tag:0x00007efc647bc778>
#1

Hello,

I have a problem regarding the styling of my Handsontable.

I am using the setCellMeta method to apply some styles (changing the background color of the cells, to be more specific) if some conditions apply.

Some more information, maybe it’s relevant: I have an endpoint that loads the data that I wish to display inside the table, and I call it inside the useEffect hook of React. After that, I call this styleTable method, that applies styles to certain cells. So my component looks (roughly) something like this:

const [tableData, setTableData] = useState([])

 useEffect(() => {
    loadDataFromServer()
    }, [])

useEffect(() => {
   tableData.forEach(item => {
        styleTable(item);
      });
   hot.render();
}, [tableData])


const loadDataFromServer = async () => {
    const payload = {
      //…
    };
    const response = await getData(payload);
    if (response && response.data) {
      setTableData(response.data);
    }
  };


const styleTable = item => {
    if (item.something === true) {
          hot.setCellMeta(rowIndex, i, "className", “my-class”);
          hot.setCellMeta(rowIndex, i, "readOnly", true);
    }
  };

Now, inside the afterChange hook I call a method that sends the new data to the server:

const hotSettings = {
   // …
   afterChange: (changes, source) => handleSave(changes)
}

const handleSave = async changes => {
    const payload = {
      //…
    };
    const response = await sendToServer(payload);
    //…
  };

The problem I am facing is that whenever there are changes, my style disappears, so “my-class” is removed and the table is again all white with no readOnly cells.

Can you please tell me if I am missing something here? Should I do this another way?

Thank you!

#2

Hi @vitorialipan

It seems that the formatting you are setting through setCellMeta is applied once, at the initialization, but any data related operation done within afterChange resets it. Here’s my simplified example where I tested it: https://jsfiddle.net/handsoncode/3cq5e6nL/

Can you please update it with your logic for data saving in the afterChange hook?

#3

Hello,

Sorry for the late reply!

In fact, I am not doing much inside the afterChange hook, I am just creating a payload object and then send the data to the server, so it just looks like this:

const hotSettings = {
    id: id,
    columns: columns,
    width: "auto",
    ref: hotRef,
    //…
    afterChange: (changes, source) => {
      if (changes) {
        handleSave();
      }
    },
  };

and

const handleSave = async () => {
    const data = hot.getSourceData();
    const headers = hot.getColHeader();
    const payload = {
      rawData: data,
      presentHeaders: headers,
    };
    await handleUpload(payload);
  };


const handleUpload = (payload) => {
	const requestOptions = {
    		method: 'PUT',
    		headers: { 'Content-Type': 'application/json' },
    		body: JSON.stringify(payload)
	};
	return fetch(‘my-url’, requestOptions)
    		.then(response => response.json())
		.then(//…)
}

I tried to reproduce this inside the jsfiddle you provided, but I can’t, somehow here it works, so there’s clearly something going on inside my project.

Anyway, I fixed this by using a workaround and changing the code inside the useEffect hooks a little bit, but can you tell me if there is something wrong with this approach? Would you suggest something else?

You can close this thread seeing I managed to fix it.

Thank you so much!

#4

Hi @vitorialipan

I’m glad that you were able to solve the problem. If that solution works I believe it’s a good way to achieve your requirements. If you would need help with anything else, feel free to open a new thread.

#5