react-bootstrap-table-next onclick(row) not providing correct key/value information

Question

I'm attempting to add an onClick() event to a cell in a row so that I can get the keyField value for that row when the cell is clicked. This functionality worked initially, then I started getting column description information instead of the data key/value pairs in the row parameter. Here's the code:

import BootstrapTable from 'react-bootstrap-table-next';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import 'components/Delivery/style.scss';
import { Delivery } from 'models/delivery';
import React from 'react';

function DeliveryTable(props: any) {
    const lotSelected = (deliveryId: number) => {
        console.log(`lotSelected: deliveryId: ${deliveryId}`);
        props.updateDeliveryLot(deliveryId);
    };

    const columns = [
        {
            dataField: 'id',
            text: 'ID',
            sort: true,
        },
        {
            dataField: 'completePercent',
            text: '% Complete',
            sort: true,
            events: {
                onClick: (e: any, row: Delivery, rowIndex: any, column: any, columnIndex: any) => {
                    console.log(`row: ${JSON.stringify(row)}`);
                    lotSelected(row.id);
                },
            },
        },
    ];

    const defaultSorted = [
        {
            dataField: 'id',
            order: 'asc',
        },
    ];

    return (
        <div>
            <div id="delivery-result">
                <BootstrapTable
                    bootstrap4
                    keyField="id"
                    data={props.deliveries}
                    columns={columns}
                    defaultSorted={defaultSorted}
                />
            </div>
        </div>
    );
}

The data being loaded into the table:

[
    {
        "id": 1,
        "completePercent": 95
    },
    {
        "id": 5,
        "completePercent": 96
    },
    {
        "id": 3,
        "completePercent": 61
    }
]

When I click on one of the cells in the % Complete column, the console shows the following information in the row attribute:

row: {"dataField":"completePercent","text":"% Complete","sort":true,"events":{}}

Previously, when the onClick() method was working correctly, the row attribute contained:

row: {"id": 1, "completePercent", 95}

Since the key value I'm trying to retrieve doesn't exist any longer in the row data, the value I'm getting is undefined rather than the id number I'm expecting.

I also noticed that if I added a style attribute to the column, for instance to underline the value in the '% Complete' cell, that style information will also show up in the information being returned by the onClick(row) call. For instance, if I add style information to the last column (% Complete) so that it's code looks like:

        {
            dataField: 'completePercent',
            text: '% Complete',
            sort: true,
            style: {
                textAlign: 'center', textDecorationLine: 'underline', fontStyle: 'italic',
            },
            events: {
                onClick: (e: any, row: Delivery, rowIndex: any, column: any, columnIndex: any) => {
                    console.log(`row: ${JSON.stringify(row)}`);
                    lotSelected(row.id);
                },
            },
        },

then the console output becomes:

row: {"dataField":"completePercent","text":"% Complete","sort":true,"style":{"textAlign":"center","textDecorationLine":"underline","fontStyle":"italic"},"events":{}}

According to the documentation (https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnevents-object) this should be working. Any help would be greatly appreciated.

Answer 1

I figured out what was causing the problem. The onClick() event requires the parameters to be in the order specified by the documentation:

onClick: (e: any, column: any, columnIndex: any, row: Delivery, rowIndex: any) => {

I had inadvertently changed the parameter order while troubleshooting another issue.