Here is my code :
return (
<div className="container">
<div class="col-md-12 ">
<div class ="row">
{
tableList.map(table => {
return(
<div className="item col-md-6 col-lg-3" key={table}>
<div>{table}</div>
<div className="content">
<div className="data">
<div class="col-md-6 col-lg-3 ">
<table className="item" class="auto-index" >
<thead >
<tr>
<th>#</th>
<th>Item</th>
<th>Quantity</th>
</tr>
</thead>
<tbody >
{
buyItems.map(item => {
return(
<tr key={item}>
<td></td>
<td>{item}</td>
<td className="text-middle">
1
</td>
</tr>
)
})
}
</tbody>
</table>
</div>
</div>
<button onClick={(e)=> this.removeTable(table)} type="button" className="btn btn-default btn-sm">
Remove
</button>
</div>
</div>
)
})
}
</div>
</div>
</div>
);
I want to add different items in different tables but items are duplicated in all table please help me guys. I am not so good at this java script so please you can help me by telling me how to post different item in the multiple table.
declare a store add put your list in it and send this store to all of your components which you want to use the list then just add items to your list and your tables all updated with new data or create master component which it has a state (your list) and pass via props to all of your components, if you have one component and multiple tables you can add the list in your state and add items with setState function and use it in your tables
Example :
--store
export class YourStore{
#computed get yourRows(){
return this.yourlList.map(item => {
return (
<tr key={item}>
<td></td>
<td>{item}</td>
<td className="text-middle">
1
</td>
</tr>
)
})
}
#observable yourList = []
#action addItemToList(data){
this.yourList.push(data)
}
}
--component render
<table>
<thead >
<tr>
<th>#</th>
<th>Item</th>
<th>Quantity</th>
</tr>
</thead>
<tbody >
{this.props.yourstore.yourRows}
</tbody>
</table>
Is this what your expectation? The below code will render a table for each item in the buyItems
return (
<div className="container">
<div class="col-md-12 ">
<div class ="row">
{tableList.map(table => {
return(
<div className="item col-md-6 col-lg-3" key={table}>
<div>{table}</div>
<div className="content">
<div className="data">
<div class="col-md-6 col-lg-3 ">
{buyItems.map(item => (
<table className="item" class="auto-index" >
<thead>
<tr>
<th>#</th>
<th>Item</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr key={item}>
<td></td>
<td>{item}</td>
<td className="text-middle">1</td>
</tr>
</tbody>
</table>
))}
</div>
</div>
<button onClick={(e)=> this.removeTable(table)} type="button" className="btn btn-default btn-sm">
Remove
</button>
</div>
</div>
)
})
}
</div>
</div>
</div>
);
Related
I am trying to enable a pop-up window with information on the clicked table element.
Therefore I wanna get the element ID of the clicked element. Thanks :D
Problem
I always get the same ID//table element no matter which table entry I click.
HTML Page with a table which displays data from the database
{%extends 'main/base.html'%}
{%block main%}
<div class="container-xxl d-flex justify-content-center">
<div class="container-fluid" style='background-color:aquamarine;'></div>
<div class="container-fluid" style='background-color:rgba(190, 90, 230, 0.308); height:10em;'></div>
<div class="container-fluid" style='background-color:aquamarine;'></div>
</div>
<div class="container-xxl d-flex justify-content-center">
<form action='' method="POST">
{%csrf_token%}
<input type='text' name='isbn' placeholder="ISBN-13 Number...">
<button type='submit'>Add</button>
</form>
</div>
<div class="container-xxl d-flex justify-content-center" id='table'>
<table class='table table-hover'>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Author</th>
<th>Kategorie</th>
<th>Seitenzahl</th>
</tr>
</thead>
<tbody>
{%for book in book_table%}
<!--tr onClick()-->
<tr onClick='get_element_ID()'>
<td id='ID'>{{book.id}}</td>
<td>{{book.title}}</td>
<td>{{book.author}}</td>
<td>{{book.kategorie}}</td>
<td>{{book.seitenzahl}}</td>
</tr>
{%endfor%}
</tbody>
<tfoot>
<tr>
<td>
<p>footer</p>
</td>
</tr>
</tfoot>
</table>
</div>
<script>
function get_element_ID(){
var id = (this).document.getElementById('ID');
console.log(id);
}
</script>
{%endblock main%}
Picture of HTML Page with Table
Picture of console log output
in the HTML DOM u can't have more than 1 item with the same id, for all of your td tags the id is ID, so if u change the <td id="ID"> with <td id={{book.id}}> , each td must have the correct id.
You are getting ID 1 all the time because when you do getElementByID("ID") the DOM returns the first element it finds with that ID, since there should be no more.
Like mentioned above the issue was the rather silly mistake that the requested ID in getElementById('ID') was always the same.
This know works like it should:
{%extends 'main/base.html'%}
{%block main%}
<div class="container-xxl d-flex justify-content-center">
<div class="container-fluid" style='background-color:aquamarine;'></div>
<div class="container-fluid" style='background-color:rgba(190, 90, 230, 0.308); height:10em;'></div>
<div class="container-fluid" style='background-color:aquamarine;'></div>
</div>
<div class="container-xxl d-flex justify-content-center">
<form action='' method="POST">
{%csrf_token%}
<input type='text' name='isbn' placeholder="ISBN-13 Number...">
<button type='submit'>Add</button>
</form>
</div>
<div class="container-xxl d-flex justify-content-center" id='table'>
<table class='table table-hover'>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Author</th>
<th>Kategorie</th>
<th>Seitenzahl</th>
</tr>
</thead>
<tbody>
{%for book in book_table%}
<!--tr onClick()-->
<tr onClick='get_element_ID("{{book.id}}")'>
<td id="{{book.id}}">{{book.id}}</td>
<td>{{book.title}}</td>
<td>{{book.author}}</td>
<td>{{book.kategorie}}</td>
<td>{{book.seitenzahl}}</td>
</tr>
{%endfor%}
</tbody>
<tfoot>
<tr>
<td>
<p>footer</p>
</td>
</tr>
</tfoot>
</table>
</div>
<script>
function get_element_ID(id){
var book_id = document.getElementById(id);
console.log(book_id);
}
</script>
{%endblock main%}
Output console
I'm trying to apply pagination to a dynamic table which is created by fetching data from an API.
I've applied pagination while I was creating bootstrap cards from the same data but I don't know how to do this when creating a table.
here is the code on which I want to apply pagination-
render(){
return(
<div className='container'>
<table className='table table-striped'>
<thead>
<tr>
<th>User_Id</th>
<th>User_Name</th>
<th>Email</th>
<th>Profile Picture</th>
</tr>
</thead>
<tbody>
{this.state.arr.map((card)=>{
return(
<tr>
<td>{card.user_id}</td>
<td>{card.user_name}</td>
<td>{card.email}</td>
<td>{'http://api.getlessuae.com/'+card.profile_picture}</td>
<td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Edit</button></td>
<td><button className="btn btn-outline-primary ml-2 my-2 my-sm-0">Delete</button></td>
</tr>
) })}
</tbody>
</table>
</div>
)
}
for now, I have 20 users on the table and I want to show only 5 users per page.
the table looks like this-
You can use react-paginate https://www.npmjs.com/package/react-paginate
<ReactPaginate
previousLabel={'previous'}
nextLabel={'next'}
breakLabel={'...'}
breakClassName={'break-me'}
pageCount={this.state.pageCount}
marginPagesDisplayed={2}
pageRangeDisplayed={5}
onPageChange={this.handlePageClick}
containerClassName={'pagination'}
subContainerClassName={'pages pagination'}
activeClassName={'active'}
/>
I am using ReactJS to display a table. The rows of this table are fetched from the database. I can get only row to show but adding an additional {object.title} returns an error that object is not defined. Here is my code:
tabRow(){
if(this.state.products instanceof Array){
const roles = this.state.products.map((object, i) =>
<td>{object.id}</td>,
<td>{object.title}</td>
);
return (
<tr>{roles}</tr>
);
}
}
render(){
return (
<div>
<h1>Products</h1>
<div className="row">
<div className="col-md-10"></div>
<div className="col-md-2">
<Link to="/add-item">Create Product</Link>
</div>
</div><br />
<table className="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>Product Title</td>
<td>Product Body</td>
<td width="200px">Actions</td>
</tr>
</thead>
<tbody>
{this.tabRow()}
{console.log(this.tabRow())}
</tbody>
</table>
</div>
)
}
I made a code that shows loading.. before the whole thing shows up but I just want to load the table only I tried separating the "List of Employee" and the button but it just doesn't work.
renderItem(d, i) {
return <tr key={i} >
<td> {d.Employee_ID} </td>
<td>{d.Employee_Name}</td>
<td>{d.Address }</td>
<td><center><button className ="btn btn-info" onClick={this.handleOnclick.bind(this, d.Employee_ID, d.Employee_Name, d.Address , d.Department , i)} data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
<td><center><button className ='btn btn-danger' onClick={this.handleOnclick2.bind (this,d.Employee_ID,d.Employee_Name,i)} data-toggle="modal" data-target="#DeleteEmployee"> Delete</button></center></td>
</tr>
}
render() {
if(this.state.isLoading) {
return <span className="Loader">
<h1>
<span>Loading</span>
<span className="Loader-ellipsis" >
<span className="Loader-ellipsisDot">.</span>
<span className="Loader-ellipsisDot">.</span>
<span className="Loader-ellipsisDot">.</span>
</span>
</h1>
</span>
}
let {jsonReturnedValue} = this.state;
const isEnabled = this.canBeSubmitted();
return(
<div>
<div>
<div className="container">
<h1> Listof Employees </h1>
<button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
<table className= "table table-bordered" id="result">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Update</th>
<th>Delete</th>
</tr>
{/*
*/}
{jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
</tbody>
</table>
</div>
As far as I understand you only want the table to show loading and rest to be rendered till the data is available you can do it like
renderItem(d, i) {
return <tr key={i} >
<td> {d.Employee_ID} </td>
<td>{d.Employee_Name}</td>
<td>{d.Address }</td>
<td><center><button className ="btn btn-info" onClick={this.handleOnclick.bind(this, d.Employee_ID, d.Employee_Name, d.Address , d.Department , i)} data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
<td><center><button className ='btn btn-danger' onClick={this.handleOnclick2.bind (this,d.Employee_ID,d.Employee_Name,i)} data-toggle="modal" data-target="#DeleteEmployee"> Delete</button></center></td>
</tr>
}
render() {
let {jsonReturnedValue} = this.state;
const isEnabled = this.canBeSubmitted();
return(
<div>
<div>
<div className="container">
<h1> Listof Employees </h1>
<button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
<table className= "table table-bordered" id="result">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Update</th>
<th>Delete</th>
</tr>
{this.state.loading? <Loading/> : jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
</tbody>
</table>
</div>
</div>
</div>
)
}
Loading component
const Loading = () => {
return <span className="Loader">
<h1>
<span>Loading</span>
<span className="Loader-ellipsis" >
<span className="Loader-ellipsisDot">.</span>
<span className="Loader-ellipsisDot">.</span>
<span className="Loader-ellipsisDot">.</span>
</span>
</h1>
</span>
}
make a separate render for the loader
renderLoader(){
if(this.state.isLoading) {
return <span className="Loader">
<h1>
<span>Loading</span>
<span className="Loader-ellipsis" >
<span className="Loader-ellipsisDot">.</span>
<span className="Loader-ellipsisDot">.</span>
<span className="Loader-ellipsisDot">.</span>
</span>
</h1>
</span>
}
}
then call it under your table
render() {
let {jsonReturnedValue} = this.state;
const isEnabled = this.canBeSubmitted();
return(
<div>
<div>
<div className="container">
<h1> Listof Employees </h1>
<button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
<table className= "table table-bordered" id="result">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Update</th>
<th>Delete</th>
</tr>
{/*
*/}
{jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
</tbody>
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.