Modify ReactDataGrid from 'react-data-grid'

Question

Modify ReactDataGrid from 'react-data-grid'

Navigation

#1 by (0 votes)

0

Having the following component:

link

Can someone tell me how to put a component that is not an input, for example a checkbox, inside the row?

Seeing the code of the previous link I tried to do this:

const check = <input type="checkbox"/>;

let _rows = [];
    for (var i = 1; i < numberOfRows; i++) {
        _rows.push({
            id: i,
            task: "Task" + i,
            complete: Math.min(100, Math.round(Math.random() * 110)),
            priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)],
            issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)],
            startDate: randomDate(new Date(2015, 3, 1), new Date()),
            completeDate: randomDate(new Date(), new Date(2016, 0, 1)),
            mycolumn: {check}
    });
}

But it does not work.

Any help, please. Thanks:)

javascript reactjs grid

asked by XXx 15.12.2016 в 12:11

source

1 answer

Error value returned in pipe Move file from local to server by ssh or sftp

score 0 · Answer 1

Here is an example where they use a checkbox through of enableRowSelect to process the selected columns. Something like:

onRowSelect: function(rows) {
  this.setState({selectedRows: rows});
}
//...


<ReactDataGrid enableRowSelect={true} onRowSelect={this.onRowSelect} />

If you need something more personalized, another option is to use one of the integrated editors in the ui of the library, where there is effectively a CheckboxEditor . Here's an example of how to use an integrated editor, not necessarily CheckboxEditor , but you can get an idea by seeing how they use AutoComplete or DropDownEditor .