How to programatically change the value of a single cell?

[jimwhurr]

I want my app to change the value of a cell in a row when the row is selected. I've looked at the documentation for a few hours but I can't fathom out if, or how, it can be achieved. Anyone know how it is done please?

[Ymbere]

Maybe a found a solution to your problem.

Here is my implementation, the column that you want to change the value on click needs to use the formatter , i tried without it but it does not work

formatter: (cellContent, row) => {
     return <>{cellContent}</>;
}

import React, { useState } from "react";
import BootstrapTable from "react-bootstrap-table-next";

function TableExample() {

  /**
   * Mock data
   */
  const [tableData, SetTableData] = useState([
    { name: "User 1", tech: "VueJS", id: 1 },
    { name: "User 2", tech: "ReactJS", id: 2 },
    { name: "User 3", tech: "React Native", id: 3 }
  ]);

  /**
   * Columns to be displayed in the table
   */
  const tableColumns = [
    {
      dataField: "name",
      text: "Name",
      formatter: (cellContent, row) => {
        return <>{cellContent}</>;
      }
    },
    {
      dataField: "tech",
      text: "Technology"
    }
  ];

  /**
   * Change the name when the row is selected
   * 
   * @param {string | number} uniqueKey The unique key of the row `keyField`
   * @param {bool} isSelect Idenfify if the row in selected or not
   */
  const handleChangeNameOnSelect = (uniqueKey, isSelect) => {
    if (isSelect) {
      SetTableData(
        tableData.map(v => {
          if (v.id === uniqueKey) {
            v.name = `${v.name} Selected`;
          }
          return v;
        })
      );
    } else {
      SetTableData(
        tableData.map(v => {
          if (v.id === uniqueKey) {
            v.name = v.name.replace("Selected", "");
          }
          return v;
        })
      );
    }
  };

  const selectRow = {
    mode: "checkbox",
    onSelect: (row, isSelect, rowIndex, e) => {
      const { id } = row;
      handleChangeNameOnSelect(id, isSelect);
    },
    onSelectAll: (isSelect, rows, e) => {
      rows.forEach(r => {
        handleChangeNameOnSelect(r.id, isSelect);
      });
    }
  };

  return (
    <div className="main-container">
      <BootstrapTable
        keyField="id"
        data={tableData}
        columns={tableColumns}
        selectRow={selectRow}
      />
    </div>
  );
}

export default TableExample;

[jimwhurr]

Thanks a lot, that seems to work :)