I am new to web development. I am using react js . Here I have a table
which is like ,
Now, my code is ->
import React from 'react';
import { connect } from 'react-redux';
import { Table } from 'react-bootstrap';
import './Jobs.css';
class UserJobs extends React.Component {
constructor(props) {
super(props);
console.log("props are ==>", props.jdRecords);
this.state = {
jdRecords: props.jdRecords
}
}
render() {
const compName = {
fontSize: '14px'
};
return (
<div className="container-fluid">
<div className="row">
<Table striped condensed hover>
<thead>
<tr>
<th>Sr.No.</th>
<th>Company Name</th>
<th>Technology</th>
<th>Job Title</th>
<th>Total Score</th>
<th>Average Score</th>
</tr>
</thead>
<tbody>{this.props.jobData.map(function (item, key) {
return (
<tr key={key}>
<td><b style={compName}>{item.id}</b></td>
<td><b style={compName}>{item.attributes.companyName}</b></td>
<td>abc Developer</td>
<td>{item.attributes.name}</td>
<td>30</td>
<td>30</td>
</tr>
)
})}</tbody>
</Table>
<footer>
footer
</footer>
</div>
</div>
)
}
}
function mapStateToProps(state) {
return {
jobDescription: state.JobDescriptionData,
jobData: state.JobDescriptionData.jobData.data
}
}
export default connect(mapStateToProps, null)(UserJobs);
Now , Here, This table has more than 10 entries. Now, I want to have the scrollbar to that table only and not to the whole page , and also it has
a footer.
So, I tried :
height : 200px;
overflow-y : auto
But this is not working .
because it it has a navigation bar as well.
Can any one give me some hint ?
You need a wrapper div for the table and add max-height as 200, overflow :auto.
Related
My code is really simple and I checked everything but this is getting this error repeatedly. Please suggest to me what can i change. I tried using but that dint work.I even checked other answers but they dint work.
import React from "react";
import { Button, Table } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import Employees from "./Employees";
const Home = () => {
return (
<>
<div>
<Table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
{Employees && Employees > 0 ? Employees.map((item) => {
return (
<tr key={item.id}>
<td>{item.name}</td>
<td>{item.age}</td>
</tr>
);
})
: "No data available"}
</tbody>
</Table>
</div>
</>
);
};
export default Home;
If there is no data your table would look like
<table>
<tbody>
No data available
</tbody>
</table>
It needs to have a <tr> and a <td>
All in all trying to loop over a jsonplaceholder's (/users) name, username, and email. Im getting the data with the help of axios and im displaying it through react. I have two seperate files: App.js (the one that comes with react) and AlbumList.js
In App.js:
import React, { Component } from 'react'
import './App.css';
import AlbumList from './Components/AlbumList';
class App extends Component {
render() {
return (
<div className="App">
<AlbumList/>
</div>
)
}
}
export default App
And in Album.List
import axios from 'axios';
import React from 'react';
export default class AlbumList extends React.Component {
state = {
persons: [],
};
componentDidMount() {
axios.get('https://jsonplaceholder.typicode.com/users').then(res => {
console.log(res);
this.setState({ persons: res.data });
});
}
render() {
return (
<div>
<table class="table">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">name</th>
<th scope="col">username</th>
<th scope="col">e-mail</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"></th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
</tbody>
</table>
{/* { this.state.persons.map(person => <div>{person.name} | {person.username} | {person.email}</div> )} */}
</div>
)
}
}
The table im using is the one that bootstrap offers, the default one. How do I do this? thanks
You need to map the data you got from your fetch request to the "tbody" tag, here you are just mapping the result in a div.
Check below your code with the modification needed:
render() {
return (
<div>
<table class="table">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">name</th>
<th scope="col">username</th>
<th scope="col">e-mail</th>
</tr>
</thead>
<tbody>
{ this.state.persons.map(person =>
<tr>
<th scope="row"></th>
<td>{person.name}</td>
<td>{person.username}</td>
<td>{person.email}</td>
</tr> )}
</tbody>
</table>
</div>
)
}
Edit: typo
I am trying to using Reactstrap Table to display the JSON data but there is a mismatch between table header and table body. I don't know why. I follow the instruction from Reactstrap document but it doesn't work.
import React, {Component} from 'react';
import {Table} from "reactstrap";
class Teacher extends Component{
constructor(props) {
super(props);
}
render() {
const teacher = this.props.teachers.map((teacher)=>{
return(
<tbody>
<div key={teacher.foreign_teacher_id}>
<tr>
<td>{teacher.foreign_teacher_name}</td>
<td>{teacher.weekly_expected_hours}</td>
<td>{teacher.start_time}</td>
<td>{teacher.end_time}</td>
<td>{teacher.work_base}</td>
<td>{teacher.gmt_modified}</td>
</tr>
</div>
</tbody>
)
})
return (
<div>
<div className="container">
<div className="row">
<div className="col-12">
<h3>Teacher Table</h3>
</div>
<div className="row">
<Table>
<thead>
<tr>
<th>Name</th>
<th>Expected Work Hours(weekly)</th>
<th>Start Time</th>
<th>End Time</th>
<th>Work Base</th>
<th>Confirm Date</th>
</tr>
</thead>
{teacher}
</Table>
</div>
</div>
</div>
</div>
);
}
}
export default Teacher;
export const TEACHERS =
[
{
"foreign_teacher_id": 1357176579309965300,
"batch_id": 1359373999368310800,
"foreign_teacher_name": "Xanthe Dunning",
"weekly_expected_hours": 8,
"record_id": 1359373999368310800,
"start_time": "2021-02-16T19:00",
"end_time": "2021-02-16T23:55",
"work_base": "Home",
"gmt_modified": "2021-02-10T13:29:52"
},
{
"foreign_teacher_id": 1357176579309965300,
"batch_id": 1359373999368310800,
"foreign_teacher_name": "Xanthe Dunning",
"weekly_expected_hours": 8,
"record_id": 1359373999372505000,
"start_time": "2021-02-17T19:00",
"end_time": "2021-02-17T23:55",
"work_base": "Home",
"gmt_modified": "2021-02-10T13:29:52"
}
]
The Problem is in the teacher function you can't put div inside tbody tag
instead of this
const teacher = this.props.teachers.map((teacher)=>{
return(
<tbody>
<div key={teacher.foreign_teacher_id}> // <--- bad pattern
<tr>
<td>{teacher.foreign_teacher_name}</td>
<td>{teacher.weekly_expected_hours}</td>
<td>{teacher.start_time}</td>
<td>{teacher.end_time}</td>
<td>{teacher.work_base}</td>
<td>{teacher.gmt_modified}</td>
</tr>
</div>
</tbody>
)
})
use this
const teacher = this.props.teachers.map((teacher)=>{
return(
<tbody>
<tr key={teacher.foreign_teacher_id}>
<td>{teacher.foreign_teacher_name}</td>
<td>{teacher.weekly_expected_hours}</td>
<td>{teacher.start_time}</td>
<td>{teacher.end_time}</td>
<td>{teacher.work_base}</td>
<td>{teacher.gmt_modified}</td>
</tr>
</tbody>
)
})
I am trying to do mapping in render method using Table but it gives error. When I run this component it do not show any output. I share my code below, please have a look in render method where i define table.
Thank you
import React from "react";
import DisplayCRMUser from "./DisplayCRMUser";
export default class App extends React.Component {
constructor(props, context) {
super(props, context);
this.state = { contactReport_entities : []};
}
render() {
return (
<div>
<div className="table-responsive-xs cstm-configure-Content">
<table>
<thead>
<tr>
<th>Type</th>
<th>Topic</th>
<th></th>
</tr>
</thead>
<tbody>
{this.state.contactReport_entities.map ((val, index) => {
<tr key={index}>
<td>{val.subject}</td>
<td>{val.createdon}</td>
</tr>
})}
</tbody>
</table>
</div>
</div>
);
}
}
There are quite a few answers that I found but none of them seem to work for my scenario.
I want to make each row clickable and log it on the console. How can I achieve this?
My React code is as follows:
class ConsumerList extends Component {
handleClick = building => {
console.log(building);
};
render() {
return (
<div className="table-responsive table-hover">
<table className="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Farm</th>
<th scope="col">Cost</th>
<th scope="col">Change</th>
</tr>
</thead>
<tbody>
{this.props.buildings.map(building => (
<tr key={building.id} onClick={() => this.handleClick(building)}>
<th scope="row">{building.id}</th>
<td>{building.name}</td>
<td>{building.farmName}</td>
<td>{building.cost}</td>
<td className="text-success">
<FontAwesomeIcon icon={faArrowDown} />
{building.change}
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
}
export default ConsumerList;
onClick={(building) => this.handleClick(building)} modify this in your code while adding the listener. You will get the log into the console.
You need a routing setup.Use the withRouter high order component, and wrap that to the component that will push to history so that you get access to the history object, to perform various routing operations.
Check out the official documentation for more info
import React from "react";
import { withRouter } from "react-router-dom";
class ConsumerList extends React.Component {
handleClick = building => {
console.log(building);
this.props.history.push("/some/Path"); //path you want to redirect to
};
render() {
return (
<div className="table-responsive table-hover">
<table className="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Farm</th>
<th scope="col">Cost</th>
<th scope="col">Change</th>
</tr>
</thead>
<tbody>
{this.props.buildings.map(building => (
<tr key={building.id} onClick={(building) => this.handleClick(building)}>
<th scope="row">{building.id}</th>
<td>{building.name}</td>
<td>{building.farmName}</td>
<td>{building.cost}</td>
<td className="text-success">
<FontAwesomeIcon icon={faArrowDown} />
{building.change}
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
}
export default withRouter(MyComponent);