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'}
/>
Related
I am trying to fetch JSON data and create a table using it with table heading.
I've done it successfully but the problem is that the table is not displayed properly.
render(){
return(
<div className='container'>
<table>
<thead>
<tr>
<th>User_Name</th>
<th>Address</th>
<th>Date Of Birth</th>
<th>Email</th>
<th>Profile Picture</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{this.state.arr.map((card)=>{
return(
<div>
<tr>
<td>{card.user_name}</td>
<td>{card.address}</td>
<td>{card.date_of_birth}</td>
<td>{card.email}</td>
<td>{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>
</div>
) })}
</tbody>
</table>
and the table looks like this :
https://screenshots.firefox.com/7i07VlkEFYlAj8ga/mrigank.com
I want the table to be properly arranged.
when you are mapping your data and returning it into <tr>, <td> Remove <div> while populating the table, because div can not be the child of table.
Try to remove div element from tbody.
<div> is not allowed as an immediate child of any of the table elements (except <th>, <td> and <caption>) and will automatically be moved outside of the element with all of its content.
Try removing the <div> elements around your <tr> elements.
Add this to the table tag <table style="width:100%"> It will also work.
Or if you want to an absolute table styling use Bootstrap for it so it will be responsive.
Here is the link of tables for bootstrap
Also remove the <div> tag as it is not recommneded for the table body, But it will work fine.
Modified your code for displaying table properly.
<tbody>
{this.state.arr.map((card)=>{
return(
<tr>
<td>{card.user_name}</td>
<td>{card.address}</td>
<td>{card.date_of_birth}</td>
<td>{card.email}</td>
<td>{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>
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>
);
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 have 2 table in which i can add and delete elements .. elements have 2 date and 1 number field.. So can you give a direction for the easy way to make them editable inline,but they are not only text or number when i click on date it need me to show custom date picker ...But i need to edit only the one date or the number i don't want to edit all the line when i double click it..only that field what i clicked.Thanks :) Btw it is all react directive.
I need something like that
render: function () {
var itemMap = this.state.items.map(function (item, i) {
return (
<tr key={i}>
<td><input type="checkbox" checked={item.selected} onClick={this.handleChange.bind(this,i)} /></td>
This i want to change with inline edit -> <td ><FormattedDate value={item.startDate}/></td>
This i want to change with inline edit -> <td><FormattedDate value={item.endDate}/></td>
This i want to change with inline edit -> <td>{item.workInHours}</td>
<td><label type="button" onClick={this.handleShowModal.bind(this,i)}><img height="30px" src="moliv.jpg"/></label>
</td>
</tr>
);
}.bind(this));
return (
<div>
<button className="btn btn-primary center-block" onClick={this.addElem}>Add</button>
{this.state.list.theList.length > 0 ? <button className="btn btn-primary" onClick={this.putResult}>Put result</button> :null}
<table className="table scroll2">
<thead>
<tr className="danger">
<th><input type="checkbox" checked={this.state.allChecked} onClick={this.toggleAll}/></th>
<th>Start Date</th>
<th>End Date</th>
<th>Hours</th>
<th></th>
</tr>
</thead>
<tbody>
{itemMap}
</tbody>
</table>
{this.state.items.length > 0 ? <button type="button" className="btn btn-danger" onClick={this.deleteItems}>Remove</button> : null}
<Modal parentState={this.state} modalPropsId={this.props.theProps.id} handleHideModal={this.handleHideModal}/>
</div>
);
I have a table that I am trying to add an empty row to the end of. (Eventually I will add input boxes and allow saving)
<div ng-repeat="rule in model.rules">
<table id="" datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" class="table-bordered" style="margin-bottom: 2%">
<caption>{{rule.CategoryName}}</caption>
<thead>
<tr>
<th>Order</th>
<th>Rule</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="subRule in rule.Rules">
<td>{{subRule.Sequence}}</td>
<td>{{subRule.Name}}</td>
<td><button type="button" ng-click="removeRule($subRule)" class="btn btn-danger"><i class="fa fa-trash-o"></i></button></td>
</tr>
</tbody>
</table>
<button class="btn btn-success" ng-click="addRule(rule)">Add Rule</button>
</div>
Controller:
$scope.addRule = function (rule) {
rule.Rules.push({ key: rule.Rules.length });
console.log(rule.Rules);
};
Before the click:
After the click:
As you can see the empty TR is popped to the front of the array on the page but:
The array has the data in the right order, the screen just puts them in the front.
Why aren't the new tr's added to the end of the table?