AllenFang / react-bootstrap-table

A Bootstrap table built with React.js
https://allenfang.github.io/react-bootstrap-table/
MIT License
2.23k stars 782 forks source link

How can I clear the selected rows #1983

Open Denis-String opened 6 years ago

Denis-String commented 6 years ago

package.json "react-bootstrap-table": "^4.3.1",

banco.js

import { BootstrapTable, TableHeaderColumn, } from 'react-bootstrap-table';

export default class Banco extends Component {
    constructor() {
        super();
        this.state = {
            listbanco: [],
            banco: '',
            bancoAlterar: '',
            rowSelecionada: false,
        }
    }
render() {
        const products = this.state.listbanco;
        const selectRowProp = {
            mode: 'radio',
            bgColor: '#26a69965',
            hideSelectColumn: true,
            clickToSelect: true,

            onSelect: (row, isSelect) => {
                this.setState({ rowSelecionada: isSelect })
                this.setState({ banco: row })
                var bancoAlterar = JSON.parse(JSON.stringify(row)); 
                this.setState({
                    bancoAlterar:bancoAlterar
                })
            }
        };
return (
<div className="col-lg-12">
                            <BootstrapTable pagination striped data={products} selectRow={selectRowProp}>
                                <TableHeaderColumn filter={{ type: 'TextFilter', delay: 300 }} id="tableFinanceiro" isKey dataField='id'>ID</TableHeaderColumn>
                                <TableHeaderColumn filter={{ type: 'TextFilter', delay: 300 }} dataField='nome'>Nome:</TableHeaderColumn>
                                <TableHeaderColumn filter={{ type: 'TextFilter', delay: 300 }} dataField='conta'>Conta:</TableHeaderColumn>
                                <TableHeaderColumn filter={{ type: 'TextFilter', delay: 300 }} dataField='codigo'>Codigo:</TableHeaderColumn>
                                <TableHeaderColumn filter={{ type: 'TextFilter', delay: 300 }} dataField='agencia'>Agencia:</TableHeaderColumn>
                                <TableHeaderColumn filter={{ type: 'TextFilter', delay: 300 }} dataField='dv'>DV:</TableHeaderColumn>
                                <TableHeaderColumn filter={{ type: 'TextFilter', delay: 300 }} dataField='ativodesc'>Ativo:</TableHeaderColumn>
                            </BootstrapTable>
                        </div>

When the user clicks the line, it is selected with a green color, and when it is clicked again, the line gets clean, but I wanted to uncheck this line automatically.

How can I do this ?

I tried using the: this.refs.table.reset();

but displays the error in the console: TypeError: Cannot read property 'reset' of undefined

LuanSena commented 6 years ago

same issue here.

dlplenin commented 6 years ago

I tink you dont have defined: ref='table' `

`
AhsanNissar commented 3 years ago

How can i access this ref in functional component?

MarlonVCendron commented 3 years ago

@AhsanNissar I think you can do something like this:

import React, {useRef} from 'react'
const tableRef = useRef()
...
<BootstrapTable ref={tableRef} ...>