CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
qBoss
qBoss

Reputation: 63

How to get row and column from datagrid

I have the following code,

import React from 'react'
import Button from '@material-ui/core/Button';
import Checkbox from '@material-ui/core/Checkbox';

import { DataGrid } from '@material-ui/data-grid';

export default function CheckBoxTable(props) {

const inputs = ['Input 1 ','Input 2','Input 3'];
const outputs= ['Output 1', 'Output 2', 'Output 3', 'Output 4'];
const rows = outputs.map((output,index) => ({id:index, optionName:output}));
const headers = [{ field: 'optionName', headerName: '', width: 150 }];
const col_inputs = inputs.map((input,index) => ( {field: input, headerName: input, width: 160, renderCell: (params) => {return (<Checkbox name={index} onChange={handleCheckboxClick} inputProps={{ 'aria-label': 'primary checkbox' }}/>)}} ))

const columns = headers.concat(col_inputs) 
const handleCheckboxClick =  (e) => {
        console.log("Checkbox clicked " + e.target.name)
    }


 return (
        <div>
            <div style={{ height: 500, width: '100%' }} >
                <DataGrid rows={rows} columns={columns} />
            </div>
            <div>
               {/* Some other component
            </div>
        </div>
    )
}

What I'm trying to create is a table of checkboxes. I can get the column which a checkbox was selected in, but how do I get which row the checkbox was checked in?

Upvotes: 0

Views: 910

Answers (1)

John Marshall
John Marshall

Reputation: 162

Get row item on checkbox Selection in React Material-UI DataGrid

Is this what you are looking for? You can pass a callback to onRowSelected

Upvotes: 1

Related Questions