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;
Related
here I want to generate a number in the table. but I'm stuck here, how do I create a number table in reactjs? Thanks.
expectation
but the result
My Code:
<table width="100%" cellpadding="0">
<thead>
<tr>
<th scope="col" class="p-3">No. </th>
<th scope="col" class="p-3">Kompetitor</th>
<th scope="col" class="">Jumlah Witel : 11</th>
</tr>
</thead>
<tbody>
{lists.length > 0 &&
lists.map((item, index) => (
<tr key={item.kompetitor}>
<td className="pl-3">
1.
</td>
<td width="20%" className="pl-6">
{item.kompetitor === "stroomnet"
? "Icon Net"
: item.kompetitor}
</td>
<td width="80%">
<ProgressBar
total={
lists.map((item) => Number(item.count))
// .reduce((prev, curr) => prev + curr, 0)
}
status={status}
count={Number(item.count) || 0}
percent={convertPercent(index)}
/>
</td>
</tr>
))}
</tbody>
</table>
Use the index passed on the map method to create the indexed table
Change this line
<td className="pl-3">
1.
</td>
To this
<td className="pl-3">
{index+1}.
</td>
This is my Table.js file code.
In this component i pass UserData which hold data that come from the server, handleEditButton method for update my data and handleDeleteButton for delete my data. When UserData is empty than i'm return "No data found" other wise it's show's data in tabular format
const Table = ({ UserData, handleEditButton, handleDeleteButton }) => {
if (UserData == '') {
return (
<>
{
<h2>N Data Found</h2>
}
</>
)
}
else {
return (
<>
{
<table cellSpacing={0} cellPadding={0} className={tableStyles.details}>
<thead>
<tr>
<th className={tableStyles.table}>Id</th>
<th className={tableStyles.table}>Name</th>
<th className={tableStyles.table}>Address</th>
<th className={tableStyles.table}>E-mail</th>
<th className={tableStyles.table}>Mobile No</th>
<th className={tableStyles.table}>Gender</th>
<th className={tableStyles.table}>City</th>
<th className={tableStyles.table}>Action</th>
</tr>
</thead>
<tbody>
{
(UserData && UserData.map((user) => (
<tr>
<th key={user.id}>{user.id}</th>
<td className={tableStyles.name}>{user.name}</td>
<td className={tableStyles.address}>{user.address}</td>
<td className={tableStyles.mail}>{user.mail}</td>
<td>{user.no}</td>
<td>{user.gender}</td>
<td>{user.city}</td>
<td colSpan={2} className={tableStyles.btnGroup}>
<button className={tableStyles.editBtn} onClick={(e) => { handleEditButton(user.id) }}>Edit</button>
<button className={tableStyles.deleteBtn} onClick={(e) => { handleDeleteButton(user.id) }}>Delete</button>
</td>
</tr>
)))
}
</tbody>
</table>
}
</>
)
}
}
You missed adding a ternary condition.
You can check with the following code.
const Table = ({ UserData, handleEditButton, handleDeleteButton }) => {
{
UserData == "" ? (
<h2>No Data Found</h2>
) : (
<table cellSpacing={0} cellPadding={0} className={tableStyles.details}>
<thead>
<tr>
<th className={tableStyles.table}>Id</th>
<th className={tableStyles.table}>Name</th>
<th className={tableStyles.table}>Address</th>
<th className={tableStyles.table}>E-mail</th>
<th className={tableStyles.table}>Mobile No</th>
<th className={tableStyles.table}>Gender</th>
<th className={tableStyles.table}>City</th>
<th className={tableStyles.table}>Action</th>
</tr>
</thead>
<tbody>
{UserData &&
UserData.map((user) => (
<tr>
<th key={user.id}>{user.id}</th>
<td className={tableStyles.name}>{user.name}</td>
<td className={tableStyles.address}>{user.address}</td>
<td className={tableStyles.mail}>{user.mail}</td>
<td>{user.no}</td>
<td>{user.gender}</td>
<td>{user.city}</td>
<td colSpan={2} className={tableStyles.btnGroup}>
<button
className={tableStyles.editBtn}
onClick={(e) => {
handleEditButton(user.id);
}}
>
Edit
</button>
<button
className={tableStyles.deleteBtn}
onClick={(e) => {
handleDeleteButton(user.id);
}}
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
);
}
};
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 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!
I'm developing a way the admon can edit stored data in ParseServer.
I implemented a way to search records, filter data and re-render again. Now, my need is edit the fetched data and update the record via UPDATE VERB.
How could get the row data?. For example console.log the the "Código".
This my source code:
render() {
return (
<table className="table table-hover table-bordered">
<thead>
<tr>
<th scope="col"><center>Edit</center></th>
<th scope="col"><center>#</center></th>
<th scope="col"><center>Código</center></th>
<th scope="col">Nombres</th>
<th scope="col">Apellidos</th>
<th scope="col">Grado</th>
</tr>
</thead>
<tbody id="cursorPointer">
{/*Rendering data*/}
{this.state.data.map(function(item, key) {
return (
<tr key = {key} >
<td><center><button ... > Edit </button></center></td>
<td><center>{item.objectId}</center></td>
<td><center>{item.Codigo}</center></td>
<td>{item.Nombres}</td>
<td>{item.Apellidos}</td>
<td>{item.Grado}</td>
</tr>
)
})}
</tbody>
</table>
)
}
Any idea?
You can create a method edit that will receive the data of the row, and call it on the button Edit:
edit = (data) => {
// Do whatever you want
}
render() {
return (
<table className="table table-hover table-bordered">
<thead>
<tr>
<th scope="col"><center>Edit</center></th>
<th scope="col"><center>#</center></th>
<th scope="col"><center>Código</center></th>
<th scope="col">Nombres</th>
<th scope="col">Apellidos</th>
<th scope="col">Grado</th>
</tr>
</thead>
<tbody id="cursorPointer">
{/*Rendering data*/}
{this.state.data.map( (item, key) => {
return (
<tr key = {key} >
<td>
<center>
<button onClick={() => this.edit(item)}>Edit<button>
</center>
</td>
<td><center>{item.objectId}</center></td>
<td><center>{item.Codigo}</center></td>
<td>{item.Nombres}</td>
<td>{item.Apellidos}</td>
<td>{item.Grado}</td>
</tr>
)
})}
</tbody>
</table>
)
}
PS: Note that the function of the map needs to be an arrow function, to bind the component to it, then it can access the edit method.