JSFiddle - React, Tailwind, and code Playground

HTML

<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/6.2.0/handsontable.full.min.css">
<!-- JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/6.2.0/handsontable.full.min.js"></script>
<!-- HTML -->
<div id="MyModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        Step 1) Try to grow up the view of the results to its maximum to have more space.<br/>
        Step 2) Try to edit some cases ...
        <div id="MyHOTContainer"></div>
      </div>
    </div>
  </div>
</div>

SCSS

$transition_time : 0.2s;
$entete_height : 60px;
$blue_gray_800 : #37474F;
$red_500 : #F44336;
$white : #FFF;
$red_600 : #E53935;

#MyHOTContainer {
  height: 200px;
}

.modal {
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1050;

  &.fade {
    > .modal-dialog {
      position: fixed;
      top: 1%;
      left: 5%;
      margin: 0px;
      width: 90%;
      transform : scaleX(0.7)!important;
      transition : all $transition_time ease-in-out;

      .modal-content {
        margin: 0px;
        width: 100%;
        border-radius: 2px;
        border: none;
        position: relative;
        transition : padding $transition_time ease-in-out;

        .modal-header {
          border: none;
          padding: 20px calc(#{$entete_height} + 24px) 20px 24px;
          font-size: 20px;
          color: $white;
          background-color: $blue_gray_800;
          line-height: 20px;
          position: relative;
          z-index: 3;
          min-height: 60px;

          &.border {
            margin-bottom: 24px;
          }

          > span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
          }

          .close {
            height: calc(#{$entete_height} / 2);
            width: calc(#{$entete_height} / 2);
            background-color: $red_500;
            opacity: 1;
            border-radius : 2px;
            position: absolute;
            top: calc(#{$entete_height} / 4);
            right: calc(#{$entete_height} / 4);
            color: $white;

            &:before, &:after {
              content: "";
              height: 50%;
              width: 10%;
              background-color: $white;
              position: absolute;
              top: 25%;
              left: 45%;
              font-size: 14px;
            }

            &:before {
              transform : rotate(-45deg);
            }

            &:after {
              transform : rotate(45deg);
  ...

JavaScript

$('#MyModal').on('shown.bs.modal', function (e) {
	$(this).find("> .modal-dialog > .modal-content > .modal-body > #MyHOTContainer").empty();
  var hot = new Handsontable(
    $("#MyHOTContainer")[0],
    {
      data: [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9]
      ],
      colHeaders: [
        "col_h_1", "col_h_2", "col_h_3"
      ],
      rowHeaders: [
        "row_h_1", "row_h_2", "row_h_3"
      ],
      contextMenu: false
    }
  );
});
$('#MyModal').modal('show');