Modify the style of a cell of a row with rowEvents react-bootstrap-table

Question

I am using the BootstrapTable component in React, I would like to know if someone knows how to switch what is inside a cell of a row on enter.

For example when I enter in a row, the Date cell of this row switch to icons instead of a text. here's what my tab looks like: here's what a would like to have (best I can do with my photoshop skills): Here's some of my code (it's a big code but the main part is here):

    const columns = [
        {
          dataField: "type",
          text: "Type",
          sort: false,
          sortCaret: sortCaret,
          headerSortingClasses,
          style: {
            maxWidth: "10px",
          },
          headerClasses: "",
          headerStyle: (colum, colIndex) => {
            return { width: '60px'};
          },
          formatter: typeFormatter
        },
        {
          dataField: "name",
          text: "Nom",
          sort: true,
          sortCaret: sortCaret,
          headerSortingClasses,
          headerClasses: "",
          headerStyle: (column, colIndex) => {
            return { width: '60%'};
          },
          style: (column, colIndex) => {
            return {fontSize: "110%"};
          },
        },
        {
          dataField: "size",
          text: "Taille",
          sort: true,
          sortCaret: sortCaret,
          headerSortingClasses,
          headerClasses: "",
          headerStyle: (colum, colIndex) => {
            return { width: '90px'};
          },
          formatter: sizeFormatter
        },
        {
          dataField: "date",
          text: "Date",
          sort: true,
          sortCaret: sortCaret,
          headerSortingClasses,
          headerClasses: "",
          headerStyle: (colum, colIndex) => {
            return { width: '20%'};
          },
          //formatter: dateFormatter
        },
        {
          dataField: "action",
          text: "Action",
          hidden: false,
          formatter: rankFormatter,
          headerClasses: "",
          headerStyle: (colum, colIndex) => {
            return { width: '80px'};
          }
        },
      ];
    
        const rowEvents = {
            onMouseEnter: (e, row, rowIndex) => {
              console.log(rowIndex)
              console.log("id: " + row.id);
              console.log("name: " + row.name);
              console.log("size: " + row.size);
              console.log("type: " + row.type);
              console.log("date: " + row.date);
            },
            onMouseLeave: (e, row, rowIndex) => {
              console.log("leave");
            }
          }
         
export function getSelectRow(props) {
  
  const { entities, ids, setIds } = props;
  return {
    mode: "checkbox",
    clickToSelect: true,
    hideSelectAll: false,
    selectionHeaderRenderer: () => {
      const isSelected =
        entities && entities.length > 0 && entities.length === ids.length;
      const props = { isSelected, entities, setIds };
      return (
        <SelectionCheckbox
          isSelected={isSelected}
          onChange={() => groupingAllOnSelect(props)}
        />
      );
    },
    selectionRenderer: ({ rowIndex }) => {
      const isSelected = ids.some((el) => el === entities[rowIndex].id);
      const props = { ids, setIds, customerId: entities[rowIndex].id };
      return (
        <SelectionCheckbox
          isSelected={isSelected}
          onChange={() => groupingItemOnSelect(props)}
        />
      );
    },
    style: { backgroundColor: '#e8fbff' }
  };
}
        
            <BootstrapTable
                        wrapperClasses="table-responsive"
                        bordered={false}
                        classes="table table-head-custom table-vertical-center"
                        bootstrap4
                        remote
                        hover
                        keyField="id"
                        rowEvents={rowEvents}
                        data={entities === null ? [] : entities}
                        columns={props.columns}
                        defaultSorted={uiHelpers.defaultSorted}
                        onTableChange={getHandlerTableChange(
                          customersUIProps.setQueryParams
                        )}
                        selectRow={
                           getSelectRow({
                            entities,
                            ids: customersUIProps.ids,
                            setIds: customersUIProps.setIds
                         })
                      }
                        {...paginationTableProps}
                      >
              </BootstrapTable>

Thank you ;)

Answer 1

This guy had the same problem and it gave me the solution : How to restrict multiple adding and removing classnames on table row mouse-events

Thank you to him :)