I'm quite new to ReactJS and to coding at all and I'm trying to render a react data grid with "react-data-grid". Now this grid consists of two arrays, a row array and a column array. Now I've created functions to push and pop the arrays to add or remove columns and rows.
The problem is, it actually renders changes in rows but not in columns. I've asked a more experienced colleague of mine but he couldn't help me. However, we logged the console and everything "under the hood" works fine, it just doesn't render:
I've separated the code into a table part and a rendering part:
Import React from "react";
import ReactDOM from "react-dom";
import {Table} from "./react_table"
import {columnsArray} from "./react_table";
import {rowsArray} from "./react_table";
let columnsId = 1;
function columnsCreator (columnsCount) {
columnsArray.push({key: `id${columnsCount}`, name: `Title${columnsCount}`});
columnsId++;
if (typeof rowsArray !== "undefined" && rowsArray.length === 0) {
rowsArray.push({});
}
}
function rowsCreator () {
rowsArray.push({});
}
function columnsEraser () {
columnsArray.pop();
columnsId--;
}
function rowsEraser () {
rowsArray.pop();
}
for (let i = 1; i <= 10; i++) {
columnsCreator(columnsId);
}
for (let i = 1; i <= 10; i++) {
rowsCreator();
}
for (let i = 1; i <= 5; i++) {
columnsEraser();
}
for (let i = 1; i <= 5; i++) {
rowsEraser();
}
class SiteRenderer extends React.Component {
constructor(props) {
super(props);
this.state = {
columnsNumber: columnsArray.length,
rowsNumber: rowsArray.length
};
this.increaseColumnsNumber = this.increaseColumnsNumber.bind(this);
this.increaseRowsNumber = this.increaseRowsNumber.bind(this);
this.decreaseColumnsNumber = this.decreaseColumnsNumber.bind(this);
this.decreaseRowsNumber = this.decreaseRowsNumber.bind(this);
}
increaseColumnsNumber() {
columnsArray.push({key: `id${columnsId}`, name: `Title${columnsId}`});
columnsId++;
if (typeof rowsArray !== "undefined" && rowsArray.length === 0) {
rowsArray.push({});
}
this.setState ({
columnsNumber: columnsArray.length + 1
})
}
increaseRowsNumber() {
rowsArray.push({});
this.setState ({
rowsNumber: rowsArray.length + 1
})
}
decreaseColumnsNumber() {
columnsArray.pop();
columnsId--;
this.setState ({
columnsNumber: columnsArray.length - 1
})
}
decreaseRowsNumber() {
rowsArray.pop();
this.setState ({
rowsNumber: rowsArray.length - 1
})
}
render() {
return(
<div>
<h1>React-Table</h1>
<h2>Length of Column Array: {columnsArray.length}</h2>
<h2>Length of Row Array: {rowsArray.length}</h2>
<Table columnsNumber={this.state.columnsNumber} rowsNumber={this.state.rowsNumber}/>
<button type="button" id="btnCreateColumn" className="tableButtons" onClick={this.increaseColumnsNumber}>Add Column</button>
<button type="button" id="btnCreateRow" className="tableButtons" onClick={this.increaseRowsNumber}>Add Row</button>
<button type="button" id="btnEraseColumn" className="tableButtons" onClick={this.decreaseColumnsNumber}>Remove Column</button>
<button type="button" id="btnEraseRow" className="tableButtons" onClick={this.decreaseRowsNumber}>Remove Row</button>
</div>
)
}
}
ReactDOM.render(<SiteRenderer/>, document.body.appendChild(document.createElement("div")));
And then the table file
import React from "react";
import ReactDataGrid from "react-data-grid";
export const columnsArray = [];
export const rowsArray = [];
const columnGetter = columnsNumber => columnsArray[columnsNumber];
const rowGetter = rowsNumber => rowsArray[rowsNumber];
export class Table extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<ReactDataGrid
columns={columnsArray}
rowGetter={rowGetter}
columnGetter={columnGetter}
rowsCount={rowsArray.length}
enableCellSelect={true}
rowHeight={50}
minHeight={50*rowsArray.length + 55}
resizable={true}
/>
</div>
)
}
}
First of all, I know the code is by far not perfect, I'm changed a lot while trying and it is a mess, sorry for that, I plan to optimize it, after the issue is found.
I also know that every function to create or remove columns and rows is double, the methods outside the SiteRenderer-Component was just to test and now I use it to create a start table at page load (which works for columns too, but not for changes afterwards, opposite to rows which works always).
If I missed something, sorry, feel free to ask, it is my first question here.