CODEWITHSUNDEEP
reactjsmaterial-ui
Zedzdead
Zedzdead

Reputation: 354

How can I clear row selection of a materialui table programatically?

I a materialui table to render a list of items like this:

    <Table selectable={true} onRowSelection={(index) => this.onRowSelection(index)} className="searchable-table">
        <TableHeader adjustForCheckbox={false} displaySelectAll={false} style={style}>
            <TableRow style={style}>
                <TableHeaderColumn>
                    <TextField
                        hintText="search"
                        onChange={(e) => this.onSearch(e)}
                        fullWidth={false} />
                </TableHeaderColumn>
            </TableRow>
        </TableHeader>
        <TableBody displayRowCheckbox={false} deselectOnClickaway={true}>
            {this.renderRows(this.state.data)}
        </TableBody>
    </Table>

When I click on a row, onRowSelection gets triggered as expected, and the row gets selected (highlighted). If I want to fire onRowSelection again, I have to click on the selected row twice. One to deselect it and another click to fire onRowSelection again.

enter image description here

How can I make it so it doesn't get selected and onRowSelected gets fired on every click, without needing to deselect the row first?

Upvotes: 1

Views: 2201

Answers (1)

C&#233;sar Landesa
C&#233;sar Landesa

Reputation: 2656

If you don't want it to get selected I think that onRowSelection should never be fired and selectable should be false. Maybe you could try with onCellClick.

   <Table selectable={false} onCellClick={(row, column, event) => this.onCellClick(row, column, event)} className="searchable-table">
        <TableHeader adjustForCheckbox={false} displaySelectAll={false} style={style}>
            <TableRow style={style}>
                <TableHeaderColumn>
                    <TextField
                        hintText="search"
                        onChange={(e) => this.onSearch(e)}
                        fullWidth={false} />
                </TableHeaderColumn>
            </TableRow>
        </TableHeader>
        <TableBody displayRowCheckbox={false} deselectOnClickaway={true}>
            {this.renderRows(this.state.data)}
        </TableBody>
    </Table>

Where the row index should be the first parameter of your handler function (I renamed it to onCellClick).

Upvotes: 1

Related Questions