Develop Reference

how to increase the width of the input field in td tag in react JS

I have below FormControl in react bootstrap table
<Table responsive striped bordered hover>
<thead>
<tr>
<th>#</th>
{Object.keys(tableData[0]).map((header, index) => (
<th key={index}>{header} </th>
))}
</tr>
</thead>
<tbody>
{tableData.map((data, index) => (
<tr key={index}>
<td>{index + 1}</td>
<td>
{<FormControl
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1"
value={data.Date}
/>}
</td>
<td>{data['Long/Short']}</td>
</tr>
))}
</tbody>
</Table>
</Container>
And it renders as below
I have tried setting the width using style={{width: "200px"}} to td tag, th tag and FormControl tag but nothing worked, please let me know what am I missing here

You could try and add a CSS rule:
td input[type='text'] {
min-width: 150px
}

Loop Through Array Of Images To Generate Table React

I'm trying to generate a soccer points table in React from an array of images. For instance this is my array:
import arsenal from './images/Arsenal.png';
import bournemouth from './images/AFCBournemouth.png';
import villa from './images/AstonVilla.png';
const icons =[{arsenal},{bournemouth},{villa}];
At the moment my class is created like this:
class Standings extends React.Component{
render(){
return(
<Table striped bordered hover size="sm">
<thead>
<tr>
<th>Teams</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src={bournemouth} class="icon" height="42" width="42" />
</td>
<td>0</td>
</tr>
<tr>
<td>
<img src={arsenal} class="icon" height="42" width="42" />
</td>
<td>0</td>
</tr>
<tr>
<td>
<img src={villa} class="icon" height="42" width="42" />
</td>
<td>3</td>
</tr>
</tbody>
</Table>
)
}
}
Is there a way to generate the table by looping through the image array? I'd like to add more images to the array if possible.

Use map()
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
const icons =[arsenal, bournemouth, villa];
class Standings extends React.Component {
render() {
return (
<Table striped bordered hover size="sm">
<thead>
<tr>
<th>Teams</th>
<th>Points</th>
</tr>
</thead>
<tbody>
{icons.map((url, idx) => (
<tr>
<td>
<img src={url} class="icon" height="42" width="42" />
</td>
<td>{idx}</td>
</tr>
))}
</tbody>
</Table>
);
}
}

You can create an array of objects with the teams:
const teams = [
{
url: 'url',
name: 'Arsenal,
points: 3
}
]
Then iterate over it:
<Table striped bordered hover size="sm">
<thead>
<tr>
<th>Teams</th>
<th>Points</th>
</tr>
</thead>
<tbody>
{
teams.map((team) => (
<tr>
<td>
<img src={team.url} class="icon" height="42" width="42" />
</td>
<td>{ team.points }</td>
</tr>
}
</tbody>
</Table>
Also, if that does not work try to set the src of img like this:
<img src={{uri: team.url}} />

Merge table cells for small screen

I have something like this for big screens:
<table>
<thead>
<tr>
<th>title and image</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
title
<br /><img scr="">
</td>
<td>
few words about...
</td>
</tr>
</tbody>
</table>
And I would like to change it to the following code for smaller screen:
<table>
<thead>
<tr>
<th>title and description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
title
<br />few words about...
</td>
</tr>
</tbody>
</table>
Do you know how to do that properly? :)
I'd like to do it with CSS only but I can code in PHP and JS as well.
Thanks all and have a good day!

You could - in a media query - use this CSS to convert the rows into cells and the cells into simple inline elements:
tr {
display: table-cell;
}
td {
display: inline;
}
<table>
<thead>
<tr>
<th>title and image</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
title
<br /><img scr="">
</td>
<td>
few words about...
</td>
</tr>
</tbody>
</table>

There's a css feature called a media query that allows you to apply css rules conditionally based on properties of the display. For instance, it could be used with a condition like min-width(700px) to target large screens and something like max-width(320px) for small screens.
The following approach will have repetition in your markup but if you're using PHP to render it, then you could reduce repeated code by storing the repeated markup in variables and referencing those.
CSS:
#media (min-width: 321px) {
.small-screen {
display: none;
}
}
#media (max-width: 320px) {
.large-screen {
display: none;
}
}
HTML:
<table>
<thead>
<tr class="large-screen">
<th>title and image</th>
<th>description</th>
</tr>
<tr class="small-screen">
<th>title and description</th>
</tr>
</thead>
<tbody>
<tr class="large-screen">
<td>
title
<br /><img scr="">
</td>
<td>
few words about...
</td>
</tr>
<tr class="small-screen">
<td>
title
<br />few words about...
</td>
</tr>
</tbody>
</table>

with css media queries, above a certain browser or screen width, show "wideDisplay" and hide "narrowDisplay". When the browser is small, hide "wideDisplay" and show "narrowDisplay".
<table>
<thead>
<tr>
<td class="wideDisplay">title and image</td>
<td class="wideDisplay">description</td >
<td class="narrowDisplay">title and description</td>
</tr>
</thead>
</table>

Render a table in the rows of another table in react

I want to create something like this in react:
I create a renderTable and a renderInside function. Inside renderTable I call renderInside like this:
const renderInside = (slipsList) => {
if (slipsList) {
return (
<table className="table table-bordered">
<thead>
<tr>
<th className="table__header">
<div className="table__header__text">
<span className="table__header--selected">
Symbol
</span>
</div>
</th>
</tr>
</thead>
<tbody>
{slipsList.map((slip, i) =>
<tr key={i}>
<td>{slip.amount}</td>
</tr>
)}
</tbody>
</table>
);
}
return (
<div>Loading...</div>
);
};
and the renderTable is like this:
const renderTable = (slipsList) => {
if (slipsList) {
return (
<div className="table-scrollable-container">
<div className="table-scrollable">
<table className="table table-bordered">
<thead>
<tr>
<th className="table__header">
<div className="table__header__text">
<span className="table__header--selected">
Date Valeur
</span>
</div>
<div className="table__header__arrow" />
</th>
</tr>
</thead>
<tbody>
{slipsList.map((slip, i) =>
<tr key={i}>
<td className="table-sticky--first-col">
{slip.confirmationDate}
</td>
<td>
{slip.netAmountEuro}
</td>
<tr className="collapsed">
<td colSpan="10">
{renderInside(slipsList)}
</td>
</tr>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
}
return (
<div>Loading...</div>
);
};
But it doesn't work. I use another two ways of doing this but I want. For every row or the main table I must put the secondary table. Any ideas of how to do this?

Try to Use this:
In renderInside method:
{slipsList.map((slip, i) => ( //added this bracket
<tr key={i}>
<td>{slip.amount}</td>
</tr>
)
)}
In renderTable method:
{slipsList.map((slip, i) => ( //added this bracket
<tr key={i}>
<td className="table-sticky--first-col">
{slip.confirmationDate}
</td>
<td>
{slip.netAmountEuro}
</td>
<tr className="collapsed">
<td colSpan="10">
{renderInside(slipsList)}
</td>
</tr>
</tr>
)
)}
One more thing, i think you need to pass slip inside {renderInside(slipsList)} method instead of slipsList.

resizable gridview columns

i have found this
Resizable Gridview columns using javascript
and happy to implement this http://www.ita.es/jquery/jquery.grid.columnsizing.htm but it is working on any table(
<table >
<tbody>
<tr class="first">
<td width="100">
</td>
<td width="200">
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr></tbody></table>
) but creating problem on gridview render html table(
<table >
<tbody><tr>
<th ></th><th></th>
</tr><tr>
<td ></td><td>
</td><td>
</tr>
</tbody></table>
)

If you mean how to have that plugin work only on certain tables instead of all tables, change this line:
$("table").columnSizing()
To this instead:
$(".columnresize").columnSizing()
Then to any table you want it applied to, add class columnresize like this:
<table class="columnresize">
...
</table>