如何使用react调整引导表列的大小

Question

我正在使用引导表

<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
</div>

我想使用react

使列可以调整大小

Answer 1

react-bootstrap的可调整大小列

请参见代码Spinnet Code sandbox Resizable columns

使用'column-izer'npm软件包

Answer 2

试试这段代码：

$(document).ready(function() {
//$("td,th")
$("td:first-child,td:nth-child(2),td:nth-child(3)")
  .css({
    /* required to allow resizer embedding */
    position: "relative"
  })
  /* check .resizer CSS */
  .prepend("<div class='resizer'></div>")
  .resizable({
    resizeHeight: false,
    // we use the column as handle and filter
    // by the contained .resizer element
    handleSelector: "",
    onDragStart: function(e, $el, opt) {
      // only drag resizer
      if (!$(e.target).hasClass("resizer"))
        return false;
      return true;
    }
  });
  });

html,
body {
  height: 100%;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding: 0;
  margin: 0;
}

.page-container {
  margin: 20px;
}

table {
  border-collapse: collapse;
  width: 800px;
}

td,
th {
  padding: 8px;
  border: 1px solid silver;
}

th {
  color: white;
  background: #535353;
}

pre {
  margin: 20px;
  padding: 10px;
  background: #eee;
  border: 1px solid silver;
  border-radius: 4px;
}

/*
   this is important!
   make sure you define this here
   or in jQuery codef
*/
.resizer {
  position: absolute;
  top: 0;
  right: -8px;
  bottom: 0;
  left: auto;
  width: 16px;    
  cursor: col-resize;       
}

<div class="page-container">

  <h1>
            jquery-resizable - Table Column Resizing
        </h1>
  <hr />
  <p>
    This example makes the first two columns of the table resizable.
  </p>

  <hr />

  <table>
    <thead>
      <th>
        col 1
      </th>
      <th>
        col 2
      </th>
      <th>
        col 3
      </th>
      <th>
        col 4
      </th>
    </thead>

    <tbody>
      <tr>
        <td>
          Column 1
        </td>
        <td>

          Column 2
        </td>
        <td>

          Column 3
        </td>
        <td>
          Column 4
        </td>
      </tr>
      <tr>
        <td>
          Column 1
        </td>
        <td>
          Column 2
        </td>
        <td>
          Column 3
        </td>
        <td>
          Column 4
        </td>
      </tr>
    </tbody>
  </table>
  <hr />
  <p>
    To create resizable columns requires a bit of extra effort as tables don't have an easy way to create a drag handle that can be moved around.
  </p>
  <p>
    To make columns resizable, we can add an element to the right of the column to provide the handle so we have a visual indicator for dragging. The table cell to resize is made <code>position:relative</code> and the injected element is <code>position: absolute</code>    and pushed to the right of the cell to provide the drag handle. Dragging then simply resizes the cell.
  </p>
  <p>
    In practice this means you need some CSS (or jquery styling) to force the injected styling and the logic to inject the element.
  </p>

</div>