Button render in react-bootstrap-table2

react-bootstrap-table2 è un componente per React, compatibile con Bootstrap, che aggiunnge tantissime funzionalità alle tabelle HTML.

Do per scontato l'installazione e l'utilizzo di base; qui vediamo come visualizzare un Button dentro ad una cella.

Come componente ho usato ToolkitProvider in quanto ha delle funzionalità che mi servivano; ma potete anche usare solo il componente BootstrapTable.

import React from 'react';

import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';

import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider, {Search} from 'react-bootstrap-table2-toolkit';
import paginationFactory from "react-bootstrap-table2-paginator";

const {SearchBar} = Search;

export default class Home extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            books: [],
            columns: [
                {
                    dataField: 'id',
                    text: '',
                    hidden: true
                }, {
                    dataField: 'title',
                    text: 'Titolo',
                    sort: true
                }, {
                    dataField: 'author',
                    text: 'Autore',
                    sort: true
                }, {
                    dataField: 'editor',
                    text: 'Editore',
                    sort: true
                }, {
                    dataField: 'price',
                    text: 'Prezzo',
                    sort: true
                }, {
                    dataField: 'rank',
                    text: 'Rank',
                    formatter: this.cellButton.bind(this)
                }
            ]
        };
    }

    cellButton(cell, row, enumObject, rowIndex) {
        return (
            <button
                type="button"
                className="btn btn-sm btn-info"
                onClick={() =>
                    console.log(cell);
					console.log(row);
                }
            >
                Dettagli
            </button>
        )
    }

    render() {
        const options = {
            sizePerPageList: [
                {text: '20', value: 20},
                {text: '50', value: 50},
                {text: '100', value: 100},
                {text: 'All', value: this.state.books.length}
            ],
            showTotal: true,
            paginationPosition: 'top'
        };

        return (
            <React.Fragment>
				<ToolkitProvider
					keyField="id"
					data={this.state.books}
					columns={this.state.columns}
					search
				>
					{
						props => (
							<div>
								<h3>Cerca nella tabella:</h3>
								<SearchBar {...props.searchProps} />
								<hr/>
								<BootstrapTable
									{...props.baseProps}
									version="4"
									pagination={paginationFactory(options)}
									striped
									condensed
								/>
							</div>
						)
					}
					</ToolkitProvider>
            </React.Fragment>
        )
    }

}

Nell'ultima colonna abbiamo impostato un formatter personalizzato; questo lo creiamo dentro a questa specifica funzione:

    cellButton(cell, row, enumObject, rowIndex) {
        return (
            <button
                type="button"
                className="btn btn-sm btn-info"
                onClick={() =>
                    console.log(cell);
					console.log(row);
                }
            >
                Dettagli
            </button>
        )
    }

Enjoy!