CODEWITHSUNDEEP
javascripthtmlcsshtml-table
xploreraj
xploreraj

Reputation: 4362

How to allow user to adjust height of a table dynamically?

I am trying to create a table which will be fixed in width (I don't know how it will work if its dynamic too) with vertical scroll for large dataset. This I found can be done with 

div {
    width: 350px;
    height: 110px;
    border: thin solid black;
    overflow-x: scroll;
    overflow-y: scroll;
}
<div><table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
</table></div>

What I want are two things:

  1. How will the table behave nicely when browser window width is reduced by the user or even increased in the big monitor?

  2. How can div be made with an initial height but allowing the user to increase or decrease height dynamically when he clicks on the bottom border and drags it below or moves it up. And scroll should also adjust accordingly. Means, when the table is expanded to last data set (or a fixed max height), scroll should stop, and when height is decreased (need fixed possible min-height), scroll should come back.

I am using this in React page, so not to make things complex, I only want bootstrap CSS stuff if possible.

Upvotes: 1

Views: 214

Answers (1)

Hash
Hash

Reputation: 8020

This is what i have so far, hope it helps.

$('#resize').resizable({
  helper: "ui-resizable-helper",
  grid: [10, 10]
});
.ui-resizable-helper {
  border: 1px dotted #999;
}

#resize {
  background-color: #91d4ff;
}

.demodiv {
  width: 350px;
  height: 110px;
  border: thin solid black;
  overflow-x: scroll;
  overflow-y: scroll;
}

.demodiv {
  height: 250px;
  width: 100%;
  float: left;
  margin-left: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<div id="resize" class="demodiv">
  <div class="aa">
    <table style="width:100%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
    </table>
  </div>
</div>

Upvotes: 1

Related Questions