how to use e.stopPropagation() in react bootstraap table column?

[kyou-ennbunn]

👍

Originally posted by @AllenFang in https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/1042#issuecomment-518294262

[congweibai]

I figured out the case for myself:

After e.stopPropagation() for un-used columns, bind customised action for column

  const [showConfirmModal, setShowConfirmModal] = useState(false);
  // store targeted Id for API purpose
  const activeId = useRef(null);
  // UI purpose for calculate modal postion
  const [activeIndex, setActiveIndex] = useState(0);

  const rowEvents = {
    onClick: (e, row, rowIndex) => {
      setActiveIndex(rowIndex);
      setShowConfirmModal(true);
      activeId.current = row.id;
    },
  };

UI

  {showConfirmModal ? (
    <div
      className="delete-confirm-modal"
      style={{
        position: 'absolute',
        // based on rowIndex and rowHeight: 50px
        top: `${(activeIndex + 1) * 50}px`,
        right: '-90px',
      }}
    >
      Confirm delete?
      <div>
        <button
          onClick={() => {
            setShowConfirmModal(false);
          }}
        >
          Cancel
        </button>
        <button
          onClick={() => {
            // use for API
            console.log('activeId', activeId.current);
          }}
        >
          Confirm
        </button>
      </div>
    </div>
  ) : null}