String field cannot be focused when trying to edit it

[antigonasalihi]

I am working in a project that uses react-data-grid 5.0.4.

My task is to switch displaying data from traditional tabular format to horizontal view. E.g.

I achieved this layout using the CSS code. Cells that contains number values can be focused, but not those with strings. Also sometimes when trying to edit a cell it shows the value of the last cell selected.

This is the CSS code I added:

.featuregrid-toolbar-margin .col-md-3 {
  width: 50% !important;
  display: flex !important;
}

.inner-feature-editor-container {
  height: 100% !important;
}

.react-grid-Grid {
  display: flex !important;
}
.react-grid-Header {
  height: fit-content !important;
  width: 200px !important;
  > div:nth-child(2) {
    width: fit-content !important;
    display: none !important;
  }
  > div:first-child {
    width: 200px !important;
    > div {
      height: fit-content !important;
      width: 200px !important;
      .react-grid-HeaderCell {
        position: relative !important;
        display: block !important;
        left: 0 !important;
      }
    }
  }
}
.react-grid-HeaderRow {
  position: relative !important;
  top: unset !important;
  left: unset !important;
  right: unset !important;
  bottom: unset !important;
  height: fit-content !important;
}
.react-grid-Viewport {
  inset: unset !important;
  left: 200px !important;
  right: 0 !important;
  top: 0 !important;
  height: 100% !important;
}
.react-grid-Canvas {
  height: 100% !important;
  width: 100% !important;
  overflow-y: auto !important;
}

.react-grid-Canvas > div:nth-child(2) {
  height: 100% !important;
  display: flex !important;
  width: fit-content !important;
  overflow-x: auto !important;

  .react-grid-Row {
    width: 200px !important;
    height: unset !important;
    .react-grid-Cell {
      position: relative !important;
      left: 0 !important;
    }
    .react-grid-Cell--frozen {
      display: none !important;
    }
  }
}

.react-grid-Header > div:first-child > div .react-grid-HeaderCell--frozen {
  display: none !important;
}
.react-grid-Canvas > div:first-child .rdg-editor-container {
  position: absolute !important;
}
.react-grid-Canvas > div:first-child .rdg-selected {
  display: none;
}

Also to display the edit cell in the correct position I added this:

onCellClick = ({ rowIdx, idx }) => {
console.log("rowIdx", rowIdx, "idx", idx);

setTimeout(() => {
  var elements = document.getElementsByClassName("rdg-editor-container");

  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];

    var translationX = 200 * rowIdx;
    var translationY = 35 * (idx - 2);
    console.log("translationX", translationX);

    element.style.setProperty(
      "transform",
      "translate(" + translationX + "px, " + translationY + "px)",
      "important"
    );
  }
}, 0);

};

[amanmahajan7]

react-data-grid 5.0.4 is not longer supported and we recommend migrating to the latest beta version