I have been trying everything I have found on here but I am looking for an easier way to get the selected cell(s) data.
I have been trying out
afterSelectionEnd={(r, c, r2, c2) => {
console.log(hotTableComponent.current.hotInstance.getSelected());
console.log(hotTableComponent.current.hotInstance.getData(r, c, r2, c2));
// eslint-disable-next-line no-plusplus
for (let i = r; i < (r2 + 1); i++) {
console.log(hotTableComponent.current.hotInstance.getDataAtRow(i));
}
// eslint-disable-next-line no-plusplus
for (let i = c; i < (c2 + 1); i++) {
console.log(hotTableComponent.current.hotInstance.getColHeader(i));
}
}}
I basically need a combination of these methods. I need the cell header and rowId. I need to be able to query a dataset and make changes to the correct nodes. I have to be missing something or overthinking this. Is there some type of calculation I need to do with the from & to values?
const columnWidths = useSelector(selectors.getColumnWidths);
const data = useSelector(selectors.getData);
const hotTableComponent = React.createRef();
function outputsRowRenderer(instance, td) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.color = 'black';
td.style.textAlign = 'left';
td.style.background = 'rgba(255, 211, 190, 0.64)';
}
function textAlignLeft(instance, td) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.textAlign = 'left';
}
function numericValueRenderer(instance, td, row, col, prop, value) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
if (parseInt(value, 10) < 0) td.className = 'color-red';
td.style.textAlign = 'right';
}
Handsontable.renderers.registerRenderer('textAlignLeft', textAlignLeft);
Handsontable.renderers.registerRenderer('numericValueRenderer', numericValueRenderer);
Handsontable.renderers.registerRenderer('outputsRowRenderer', outputsRowRenderer);
return (
<HotTable
ref={hotTableComponent}
id="hot"
data={data}
dataSchema={config.DATA_SCHEMA}
stretchH="all"
manualColumnResize
rowHeaders={false}
dropdownMenu
filters
selectionMode="multiple"
fixedColumnsLeft={1}
fixedRowsBottom={15}
colHeaders={config.COLUMN_HEADERS}
colWidths={columnWidths.slice(0, -1)}
columns={config.COLUMNS}
width={props.windowWidth - 20}
currentRowClassName="currentRow"
currentColClassName="currentCol"
licenseKey="non-commercial-and-evaluation"
height={utils.getPerc(props.windowHeight, props.inputsOffset)}
cells={(row, col) => {
let outputs = data.slice(-15);
if (outputs) outputs = outputs.map(x => x.id);
const cellProperties = {};
if (col === 0) cellProperties.renderer = textAlignLeft;
if (col !== 0) cellProperties.renderer = numericValueRenderer;
if (outputs.includes(row)) cellProperties.renderer = outputsRowRenderer;
return cellProperties;
}}
afterChange={(changes) => {
if (!changes) return;
changes.forEach(([row, prop, oldValue, newValue]) => {
console.log(row, prop, oldValue, newValue);
});
}}
afterSelectionEnd={(r, c, r2, c2) => {
console.log(hotTableComponent.current.hotInstance.getSelected());
console.log(hotTableComponent.current.hotInstance.getData(r, c, r2, c2));
// eslint-disable-next-line no-plusplus
for (let i = r; i < (r2 + 1); i++) {
console.log(hotTableComponent.current.hotInstance.getDataAtRow(i));
}
// eslint-disable-next-line no-plusplus
for (let i = c; i < (c2 + 1); i++) {
console.log(hotTableComponent.current.hotInstance.getColHeader(i));
}
}}
/>
);
Do I need to display the id of my table row in order for it to be available? If so do I create a column and just hide it?
export const DATA_SCHEMA = {
id: null,
wellName: '',
Jan: null,
Feb: null,
Mar: null,
Apr: null,
May: null,
Jun: null,
Jul: null,
Aug: null,
Sep: null,
Oct: null,
Nov: null,
Dec: null,
};
export const COLUMNS = [
{ data: 'wellName' },
{ data: 'jan', type: 'numeric' },
{ data: 'feb', type: 'numeric' },
{ data: 'mar', type: 'numeric' },
{ data: 'apr', type: 'numeric' },
{ data: 'may', type: 'numeric' },
{ data: 'jun', type: 'numeric' },
{ data: 'jul', type: 'numeric' },
{ data: 'aug', type: 'numeric' },
{ data: 'sep', type: 'numeric' },
{ data: 'oct', type: 'numeric' },
{ data: 'nov', type: 'numeric' },
{ data: 'dec', type: 'numeric' },
];
export const COLUMN_HEADERS = ['Wells', 'Jan-20', 'Feb-20', 'Mar-20', 'Apr-20', 'May-20', 'Jun-20', 'Jul-20', 'Aug-20', 'Sep-20', 'Oct-20', 'Nov-20', 'Dec-20'];
Also another issue is when I load new data to the table I lose my custom styling. Can you help with that as well?
Thank you
here is some sample data
[{
wellName: 'uuuuuuuu',
entityId: 1319596,
eventNumber: 0,
jan: -852.07,
feb: -1104.26,
mar: null,
apr: null,
may: null,
jun: null,
jul: null,
aug: null,
sep: null,
oct: null,
nov: null,
dec: null,
}, {
wellName: 'ggggggggg',
entityId: 2522794,
eventNumber: 0,
jan: null,
feb: -1147.97,
mar: null,
apr: null,
may: null,
jun: null,
jul: null,
aug: null,
sep: null,
oct: null,
nov: null,
dec: null,
}, {
wellName: '2222222',
entityId: 1005378,
eventNumber: 0,
jan: null,
feb: -152.4,
mar: -83.98,
apr: null,
may: null,
jun: null,
jul: null,
aug: null,
sep: null,
oct: null,
nov: null,
dec: null,
}]