Adding current and highlight class to all the cells of particular index

Tags: #<Tag:0x00007efc6472cc40> #<Tag:0x00007efc6472cab0>
#1 
I am trying to add highlight and current class to all cells side of the cell in all the columns, basically particular row in all columns. I tried in below way but it is not applying can you please let me know any better approach.

Thank you.

In my styles I have overriden the classes and that is working on every click my cell have red background.

(row, column, row2) => {
const hotInstance = hotRef?.current?.hotInstance;

    if (row === -1 || !hotInstance) {
      return;
    }

    const hotTableData = hotInstance?.getData() || [];
    const data = hotTableData?.slice(row, (row2 || 0) + 1);

    data[0]?.forEach((rowValue, i) => {
      hotInstance.setCellMeta(row, i, 'className', 'current highlight');
    });
    hotInstance.render();
#2

Hi @gowthamdhanekula8

It would be best if you can share a code demo showing your current implementation. Meanwhile, I have an example showing how to apply a custom class on row highlight: https://jsfiddle.net/handsoncode/2m3up6ex/ Is this something you are looking for?

#3

Thank you for response. Can you please let me know how to import css file I tried but it is not working.

#4

@gowthamdhanekula8

I’m sorry but I’m not sure what do you mean. Can you please give me more details?

#5

In after selction ends I am trying to apply class but it is not applying can you please let me know what is stoppping class not to apply.

I tried on intial load by applying the class it applying. so the css import is working but class is not applying here in aftyer selection ends

I saw in dom myRow class is getting applied and remioving it immediately I want to know the reason why it is removing

Below is my afterselectionends

onAfterSelectionEnds: React.useCallback(
(row, column, row2) => {
const hotInstance = hotRef?.current?.hotInstance;

    if (row === -1 || !hotInstance) {
      return;
    }

    const hotTableData = hotInstance?.getData() || [];
    const data = hotTableData?.slice(row, (row2 || 0) + 1);

    data[0]?.forEach((rowValue, i) => {
      hotInstance.setCellMeta(row, i, 'className', 'myRow');
    });
    hotInstance.render();

    const colHeader = hotInstance?.getColHeader();
    const colIndex = colHeader?.findIndex((column) => column === 'Entity Id');
    const selectedRowIds = data?.map((d) => String(d[colIndex]));

    batch(() => {
      dispatch(drillingChartActions.setClickOnGrid(true));
      dispatch(drillingChartActions.setSelectedRows(selectedRowIds));
      dispatch(drillingChartActions.setCurrentClickedRowId(selectedRowIds[0]));
      dispatch(actions.setShouldNotAutoScrollOnly({ groupId: null, value: false }));
      combinedDispatch({
        isSyncOn,
        action: actions.setSelectedRows(selectedRowIds),
        ignoreSelf,
      });
      combinedDispatch({
        isSyncOn,
        action: actions.setShouldNotAutoScrollOnly({ groupId: null, value: false }),
        ignoreSelf,
      });
      combinedDispatch({
        isSyncOn,
        action: actions.setClickOnGrid(true),
        ignoreSelf,
      });
      combinedDispatch({
        isSyncOn,
        action: actions.setCurrentClickedRowId(selectedRowIds?.[0]),
        ignoreSelf,
      });
    });
  },
  [hotRef, tableData, dispatch],
),
#6

Hi @gowthamdhanekula8

Please share your implementation in a code demo. This way it will be easier to identify the problem.

#7

Hi @gowthamdhanekula8

We will need to close the report if there is no way to replicate the issue. Can we ask for a demo here?

#8