react table add class cell with editTable - react-table

Question

I use react table v7 with editable as defaultColumn, I have a log that returns the index row and the column index.
Is it possible to add a class to the cell if the index row and index column crosses.
my log that returns the row and column index :
const log = {rowIndex:1, columnIndex:10}
The expected result :
editable component :
import React, { useEffect, useState } from 'react';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
const EditableCell = ({
value: initialValue,
row: { index },
column: { id },
updateMyData,
}: {
value: any;
row: any;
column: any;
updateMyData: any;
}) => {
const [value, setValue] = useState(initialValue);
const [textCount, setTextCount] = useState<number>(0);
const tooltipName = <Tooltip id="tooltipName">{value}</Tooltip>;
const onChange = (e: any) => {
setValue(e.target.value);
};
const onBlur = () => {
updateMyData(index, id, value);
};
useEffect(() => {
setValue(initialValue);
}, [initialValue]);
useEffect(() => {
if (value) {
setTextCount(value.length);
}
}, [value]);
return (
<>
{textCount > 15 ? (
<OverlayTrigger placement="top" overlay={tooltipName}>
<input value={value} onChange={onChange} onBlur={onBlur} />
</OverlayTrigger>
) : (
<>
<input value={value} onChange={onChange} onBlur={onBlur} />
</>
)}
</>
);
};
export default EditableCell;
grid :
import React from 'react';
import { Table } from 'react-bootstrap';
import { useSortBy, useTable } from 'react-table';
import GridRow from './grid-row';
import GridTfoot from './grid-tfoot';
import GridThead from './grid-thead';
import EditableCell from './grid-editable';
const SimpleGrid = (props: {
rows: any[];
columns: any;
extraCssClassName: string;
updateMyData?: any;
defaultSort?: any[];
editable?: boolean;
}) => {
const defaultColumn = {
Cell: EditableCell,
};
const {
getTableProps,
getTableBodyProps,
headerGroups,
footerGroups,
rows,
prepareRow,
} = useTable(
{
columns: props.columns,
data: props.rows,
initialState: {
sortBy: props.defaultSort,
},
defaultColumn: props.editable ? defaultColumn : undefined,
updateMyData: props.updateMyData,
},
useSortBy
);
return (
<Table
className={`table-nostriped grid-simple mb-0 ${props.extraCssClassName}`}
responsive
size="sm"
{...getTableProps()}
>
<GridThead headers={headerGroups} />
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);
return <GridRow row={row} key={i} />;
})}
</tbody>
<GridTfoot footerGroups={footerGroups} />
</Table>
);
};
SimpleGrid.defaultProps = { extraCssClassName: '', defaultSort: [] };
export default SimpleGrid;
updateMyData :
const updateMyData = (rowIndex: any, columnId: any, value: any) => {
setData((old: any) =>
old.map((row: any, index: any) => {
if (index === rowIndex) {
return {
...old[rowIndex],
[columnId]: value,
};
}
return row;
})
);
};