score:1

Accepted answer
{
    rowData.length ? (
        <button className="btn btn-primary" onClick={Delete_device}>
          <i className="ri-upload-cloud-line ri-lg"></i>Delete
        </button>
      )
    : null
}

score:0

  <BootstrapTable
    bootstrap4
    keyField="fname"
    data={rowData}
    columns={tableData[0].columnsData}
    selectRow={selectRow}
  />

score:0

import React, { useState, useMemo } from "react";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
import BootstrapTable from "react-bootstrap-table-next";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";

let tableData = [
  {
    rowsData: [
      {
        fname: "john",
        lname: "smith"
      },
      {
        fname: "steve",
        lname: "warn"
      },
      {
        fname: "michel",
        lname: "clark"
      }
    ],
    columnsData: [
      {
        dataField: "fname",
        text: "First name",
        sort: true
      },
      {
        dataField: "lname",
        text: "last Name",
        sort: true
      }
    ]
  }
];

export default function App() {
  const [rowData, setrowData] = useState(tableData[0].rowsData);
  const [rowSelect, setrowSelect] = useState([]);

  const selectRow = useMemo(
    () => ({
      mode: "checkbox",
      clickToSelect: false,
      classes: "selection-row",
      onSelect: (row, isSelect, rowIndex, e) => {
        setrowSelect((rowData) =>
          isSelect
            ? [...rowData, row]
            : rowData.filter(
                ({ fname, lname }) => row.fname !== fname && row.lname !== lname
              )
        );
        // if (isSelect === true) {
        //   setrowSelect((rowData) => [...rowData, row]);
        // } else {
        //   console.log("onSelect", rowIndex, row, isSelect);
        //   setrowSelect((rowData) =>
        //     rowData.filter(
        //       ({ fname, lname }) => row.fname !== fname && row.lname !== lname
        //     )
        //   );
        // }
      },

      onSelectAll: (isSelect, rows, e) => {
        if (isSelect === true) {
          setrowSelect(rows);
        } else setrowSelect([]);
      }
    }),
    []
  );
  const Delete_device = () => {
    console.log("Delete device", rowData, rowSelect);
    if (rowSelect.length < 1) return;
    setrowData((data) =>
      data.filter(
        ({ fname, lname }) =>
          rowSelect.find((s) => s.fname === fname && s.lname === lname) == null
      )
    );
    setrowSelect([]);
  };
  console.log("App", rowData, rowSelect);
  return (
    <div className="App">
      {rowData.length > 0 && (
        <button className="btn btn-primary" onClick={Delete_device}>
          <i className="ri-upload-cloud-line ri-lg"></i>Delete
        </button>
      )}
      <BootstrapTable
        bootstrap4
        keyField="fname"
        data={rowData}
        columns={tableData[0].columnsData}
        selectRow={selectRow}
      />
    </div>
  );
}

score:1

  onSelect: (row, isSelect, rowIndex, e) => {
  if (isSelect === true) {
    setrowData((rowData) => [...rowData, row]);
    rowSelect.push(true);
    setrowSelect(rowSelect);
  } else {
    setrowData((rowData) => rowData.filter((x, i) => i !== rowIndex));     
      rowSelect.pop();
      setrowSelect(rowSelect);
  }
}

score:2

 onSelect: (row, isSelect, rowIndex, e) => {
      if (isSelect === true) {
        setrowData((rowData) => [...rowData, row]);
      } else {
        setrowData((rowData) => rowData.filter((x,i)=>i!==rowIndex))
      }
      setrowSelect((rowSelect) => [...rowSelect, isSelect]);
    },

Related Query

More Query from same tag