CODEWITHSUNDEEP
htmljquerycssreactjs
WILLIAM
WILLIAM

Reputation: 485

How to make div table resizable in React?

I am new to React. I am trying to put two buttonBar + tables in web page (Top and Bottom) in 50-50 ratio. However, I want to make them resizable by dragging it. How can I group 'buttonBar' and 'table' as component and make them like a resizable div. Are there any library can use or can it be done by html and css? Here is my code. Thanks!

<div id='buttonBar1'>
  <....lots button......>
</div>
<div id="table1" style={{marginRight:"auto", marginLeft:"inherit", width:"100vw", position:'relative', height:"50vh"}} >
  <Table id={'Table_1'} />
</div>

<div id='buttonBar2'>
  <....lots button......>
</div>
<div id="table2" style={{marginRight:"auto", marginLeft:"inherit", width:"auto", position:'relative', height:"40vh"}}>
  <Table id={'Table_2'} />
</div>

Upvotes: 1

Views: 2461

Answers (1)

Rishi Raj
Rishi Raj

Reputation: 422

Here's a quick way you can try out. Put your table+buttonBar inside a div and both these divs can be inside a container. Since you are using React you can use the libraryreact-resizable for resizing divs. Check the example as well.

<div className="container">
<Resizable axis="y" draggableOpts={resizeHandles: ['s']}>
 <div className="group-one">
  <div id='buttonBar1'>
   <....lots button......>
 </div>
 <div id="table1" style={{marginRight:"auto", marginLeft:"inherit", width:"100vw", 
 position:'relative', height:"50vh"}} >
  <Table id={'Table_1'} />
 </div>
</div>
</Resizable>
<Resizable axis="y" draggableOpts={resizeHandles: ['n']}>
<div className="group-two">

 <div id='buttonBar2'>
   <....lots button......>
 </div>
 <div id="table2" style={{marginRight:"auto", marginLeft:"inherit", width:"auto", 
 position:'relative', height:"40vh"}}>
   <Table id={'Table_2'} />
 </div>
</Resizable>
</div>
</div>

Add some styles so that they spread out to the whole page and take 50-50 spacing

.container {
 display: flex;
 flex-direction: column;
}
.group-one, .group-two {
 height: 50%;
}

Upvotes: 1

Related Questions