I am trying to render a table inside a react component but having trouble aligning the rows with the header
render() {
console.log("Top Searches",this.props.topSearches)
return(
<div className="topsearches">
<table border="2" align="center">
<th> Search Term </th>
<th>Count </th>
{this.props.topSearches.map((top_search, index) => (
<tr>
{Object.keys(top_search).map(function(key) {
return <div>
<tbody>
<td align="center">{key} </td>
<td align="right">{top_search[key]}</td>
</tbody>
</div>
})}
</tr>
))}
</table>
</div>
)
}
This is the output i am getting
I assume, you are trying to achieve something like this.
I have edited this in codesandbox here.
https://codesandbox.io/s/sparkling-sound-yd1ih
return (
<div className="topsearches">
<table border="2" align="center">
<thead>
<th> Search Term </th>
<th>Count </th>
</thead>
<tbody>
{props.topSearches.map((top_search, index) =>
Object.keys(top_search).map((key, index) => {
return (
<tr>
<td>{key}</td>
<td>{top_search[key]}</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
);
Modification I made to achieve this:
Added <thead>
Corrected <tbody> loop
Please let me know if you have any further questions!
Related
I am new to reactjs. I am trying to create a table with inputs like below,
<table className="table table-bordered table-sm">
<thead>
<tr>
<th></th>
{gameList.map((game)=>{
return (
<th key={game.id}>{game.game_type}</th>
)
})}
</tr>
</thead>
<tbody>
{roundList.map((round)=>{
return(
<tr key={round.id}>
<td>{round.game_round}</td>
{gameList.map((game)=>{
return (
<td key={game.id}>
<input type="text"/>
</td>
)
})
}
</tr>
)
})}
</tbody>
</table>
How do I get all input values by gameId and roundId accordingly?
Hi, If i may notice You are trying to use pure Js in reactJS :). If you want to use same semantic as above lets than add some hooks ;)
const [inputValues, setInputValues] = useState({});
<table className="table table-bordered table-sm">
<thead>
<tr>
<th></th>
{gameList.map((game)=>{
return (
<th key={game.id}>{game.game_type}</th>
)
})}
</tr>
</thead>
<tbody>
{roundList.map((round, index)=>{
return(
<tr key={round.id}>
<td>{round.game_round}</td>
{gameList.map((game, ind)=>{
return (
<td key={game.id}>
<input
type="text"
value={inputValues?.[`${round.id}`]?.[`${game.id}`]}
onChange={(event) => {
setInputValues(old => ({...old, [`${round.id}`]: {...old[`${round.id}`], [`${game.id}`]: event.target.value}}))
}/>
</td>
)
})
}
</tr>
)
})}
</tbody>
</table>
now you have state inputValues for all input values in one object, so you can access them by order.id and game.id.
This is one solutions based on your html structure above, but i strongly recommend to You to create separate Input component, your own controlled component and than to use it maybe in form, than you will have all values in onSubmit form function :)
Rendering not working in td tag, outside td the data is showing but not getting rendering HTML.
td not working.
Data is printing if do console.log but not getting render in HTML
SetArrayTime((prev_array_time) => {
let newArray = [...prev_array_time];
newArray.push(intervals);
return newArray;
});
};
return (
<table className="table table-bordered">
<thead className="thead text-center">
<tr>
<th scope="col">From</th>
<th scope="col">To</th>
</tr>
</thead>
<tbody>
{array_time &&
array_time.map((d, i) => {
console.log("123-d", d);
return (
<tr key={i}>
<td>
{d.from}-{d.to}
</td>
<td></td>
</tr>
);
})}
</tbody>
</table>
);
map return array of react elemnt,react by default map of the array and render. it does not need return
Try this
{array_time?.map((d, i) => (
<tr key={i}>
<td>
{d.from}-{d.to}
</td>
<td></td>
</tr>
))}
I am trying to generate a delete button for the Action column in each row that is being generated in following table using react. How can I achieve that?
<Table>
<thead>
<tr>
<th>
Id
</th>
<th>
Description
</th>
<th>
Protocol
</th>
<th>
Last Seen
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
{table.map((item) => (
<tr key={item.id}>
{Object.values(item).map((val) => (
<td>{val}</td>
))}
</tr>
))}
</tbody>
</Table>
here is the sample code
import React from "react";
const data = [1, 2, 3];
function Login() {
const deleteData = (dataId) => {
console.log(dataId);
};
return (
<>
<table>
<thead>
<tr>
<th>Id</th>
<th>Description</th>
<th>Protocol</th>
<th>Last Seen</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{data.map((val) => (
<tr key={val}>
<td>{val}</td>
<td>{"Desc"}</td>
<td>{"Prot"}</td>
<td>{"Las"}</td>
<td>
{" "}
<button onClick={() => deleteData(val)}>{"delete"}</button>
</td>
</tr>
))}
</tbody>
</table>
</>
);
}
export default Login;
In my application, I need to reuseable data table component. Where I can change table-header & table-body with dynamic content.
<table className="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Image</th>
<th>Title</th>
<th>Publish Date</th>
</tr>
</thead>
<tbody>
{data &&
data.map(item => (
<tr key={item.id}>
<td>{item.id}</td>
<td>{item.image}</td>
<td>{item.title}</td>
<td>{item.publishDate}</td>
</tr>
))}
</tbody>
</table>
See if this works! https://stackblitz.com/edit/react-ie2rt6
import React from "react";
const Table = ({ headers, data }) => {
return (
<div>
<table>
<thead>
<tr>
{headers.map(head => (
<th>{head}</th>
))}
</tr>
</thead>
<tbody>
{data.map(row => (
<tr>
{headers.map(head => (
<td>{row[head]}</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);
};
export default Table;
This might help
const CustomTable = ({header, posts}) => {
return (
<table>
<thead>
<tr>
<th>#</th>
<th>{header.image}</th>
<th>{header.title}</th>
<th>{header.publishedDate}</th>
</tr>
</thead>
<tbody>
{posts &&
posts.map(item => (
<tr key={item.id}>
<td>{item.id}</td>
<td>{item.image}</td>
<td>{item.title}</td>
<td>{item.publishDate}</td>
</tr>
))}
</tbody>
</table>
);
}
You can pass header and posts array wherever you need it.
<div className='table'>
<CustomTable header={header} posts={posts} />
</div>
I have a dynamic table whose items I render through a list. The idea is that, on clicking the name of a row, a modal will open and that will print certain values retrieved from the backend server.
When I click on a specific person's name, the modal loads for all elements in the table. How do I fix this?
The rendered code for the table is as follows:-
<table className="table">
<thead>
<tr>
<th>S. NO.</th>
<th>NAME</th>
<th>ADDRESS</th>
<th>TELEPHONE</th>
<th>EMAIL</th>
<th>AGE</th>
<th></th>
</tr>
</thead>
<tbody>
{this.state.personData.map((pRow, idx) => (
<>
<PopUp hideModal={this.hideModal} show={this.state.show} id={siteRow.id} />
<tr key={pRow.id}>
<td>{idx + 1}</td>
<td> <a onClick={this.showModal}> {pRow.name} </a> </td>
<td>{pRow.address}</td>
<td>{pRow.phone}</td>
<td>{pRow.email}</td>
<td>{pRow.age}</td>
<td>
{" "}
<DeleteButton id={pRow.id} onDelete={this.onDelete} />{" "}
</td>
</tr>
</>
</tbody>
</table>
In the code for the table, the placement of the PopUp component is such because I want to pass the ID of the particular site to the modal.
This is the rendered code for the modal:-
showModal(e) {
this.setState({
show: true
});
}
hideModal(e) {
this.setState({
show:false
});
this.props.hideModal && this.props.hideModal(e);
}
render() {
if(!this.props.show){
return null;
}
return (
<>
<div>
The ID of the person is: {this.props.id}
<button type="button" className="btn theButton" onClick={this.hideModal}>CLOSE</button>
</div>
</>
);
}
This is very rudimentary code and I haven't added much CSS so this just opens up in the table itself. I want to change this but given the placement of the PopUp component and the fact that I want to pass the ID to the component, I'm not sure how to go about it.
The problem is that you have a series of Popups, but only a variable controlling their visibility. Consider replacing the show state as a simple visibility with a showId one, meant as the "id" of the Popup to be shown.
showModal(id) {
this.setState({
showId: id
});
}
hideModal(e) {
this.setState({
showId: null
});
this.props.hideModal && this.props.hideModal(e);
}
Then:
<table className="table">
<thead>
<tr>
<th>S. NO.</th>
<th>NAME</th>
<th>ADDRESS</th>
<th>TELEPHONE</th>
<th>EMAIL</th>
<th>AGE</th>
<th></th>
</tr>
</thead>
<tbody>
{this.state.personData.map((pRow, idx) => (
<>
<PopUp hideModal={this.hideModal} show={this.state.showId === pRow.id} id={siteRow.id} />
<tr key={pRow.id}>
<td>{idx + 1}</td>
<td> <a onClick={() => this.showModal(pRow.id)}> {pRow.name} </a> </td>
<td>{pRow.address}</td>
<td>{pRow.phone}</td>
<td>{pRow.email}</td>
<td>{pRow.age}</td>
<td>
{" "}
<DeleteButton id={pRow.id} onDelete={this.onDelete} />{" "}
</td>
</tr>
</>
</tbody>
</table>
I did not try the code, but I think it should work.