I'm new to React.js and want to use this API here: https://atlas.api.barclays/open-banking/v2.2/branches to create a table with Barclays branches data. My problem is, when I render the app, I can't seem to upload the data into the table, only the column's headers. Any help would be appreciated. Thanks!
import React, { Component } from 'react'
import axios from 'axios'
import ReactTable from "react-table-6";
import 'react-table-6/react-table.css';
export default class App extends Component {
constructor(props){
super(props)
this.state = {
branches: [],
loading:true
}
}
async getBranchesData(){
const data = await axios.get('https://atlas.api.barclays/open-banking/v2.2/branches')
console.log(data.Branch)
this.setState({loading:false, branches: data.Branch})
}
componentDidMount(){
this.getBranchesData()
}
render() {
const columns = [
{
Header: 'Identification',
accessor: 'Identification',
}
,{
Header: 'Sequence Number',
accessor: 'SequenceNumber' ,
}
,{
Header: 'Name',
accessor: 'Name' ,
}
,{
Header: 'Type',
accessor: 'Type',
}
,{
Header: 'Photo',
accessor: 'Photo',
}
,{
Header: 'Customer Segment',
accessor: 'CustomerSegment',
}
,{
Header: 'Service and Facility',
accessor: 'ServiceAndFacility',
}
,{
Header: 'Accessibility',
accessor: 'Accessibility',
}
,{
Header: 'Other Accessibility',
accessor: 'OtherAccessibility',
}
,{
Header: 'Other Service and Facility',
accessor: 'OtherServiceAndFacility',
}
,{
Header: 'Availability',
accessor: 'Availability',
}
,{
Header: 'Contact Info',
accessor: 'ContactInfo',
}
,{
Header: 'Postal Address',
accessor: 'PostalAddress',
}
]
return (
<ReactTable
data={this.state.branches}
columns={columns} />
)
}
} ```
change the next line:
this.setState({loading:false, branches: data.Branch})
for this:
this.setState({loading:false, branches: data.Brand.Branch})
The problem is in the way you're using the React Table library. It only provides table utilities and not a table component as you're trying to use. You can check this basic usage example in their docs to try to fit your use case.
You can use HTML table elements or any UI component libraries (such as Bootstrap or Material UI) to render your table, but it's up to you.
Look at the response of the api.
const response = {
meta: {},
data: [
{
"Brand": [
{
"BrandName": "Barclays UK",
"Branch": [
{
"Identification": "UK-B-20533008",
// etc
},
{
"Identification": "UK-B-20533008",
// etc
},
// etc
]
}
]
}
]
};
I think you want data.data[0].Brand[0].Branch.
Related
import React , { Component } from 'react';
import axios from 'axios'
import ReactTable from "react-table-6";
import "react-table-6/react-table.css"
class Users extends Component {
constructor(props){
super(props)
this.state = ({
users: [],
loading: true,
})
}
async getUsersData(){
const res = await axios.get(`${process.env.REACT_APP_API_URL}/...`)
.then(res => {
console.log(res.data.data)
this.setState({
users: [res.data]
})
})
.catch(error => {
console.log(error)
})
}
componentDidMount(){
this.getUsersData()
}
render() {
const columns = [{
Header: 'ID',
accessor: 'id',
}
,{
Header: 'Password',
accessor: 'password' ,
}
,{
Header: 'Email',
accessor: 'email' ,
}
,{
Header: 'First Name',
accessor: 'first_name',
},
{
Header: 'Last Name',
accessor: 'last_name',
},
]
return (
<ReactTable
data={this.state.users}
columns={columns}
/>
);
}
}
export default Users;
This generates a response in the console, but does not populate the table.
What needs to be fixed to render the response in the React table
So, I have a API which returns the data which should be shown in table with datatable option.
I'm using 'mdbreact' to use datatable.
But there is no documentation about pushing array variables into rows of datatables. How to push my array variables into rows of datatables ?
My code :
import React, { Component } from 'react';
import { MDBDataTable } from 'mdbreact';
class DummyTest extends Component {
DummyFunc() {
var data = {
columns: [
{
label: 'Location',
field: 'Location',
sort: 'asc',
width: 150
},
{
label: 'Entry Time',
field: 'EntryTime',
sort: 'asc',
width: 150
},
{
label: 'Exit Time',
field: 'ExitTime',
sort: 'asc',
width: 150
},
],
rows: [
]
};
const datatableProps = {data, rows: datas};
}
In return
<MDBDataTable
striped
bordered
hover
data={datatableProps}
/>
you can update the rows data after fetching it from the API. sample using hooks.
something like this.setState({datatableProps: ...datatableProps, rows: API_ROWD_ATA})
I'm implementing ReactTable, the first example from its documentation, but each cell from the table goes to a new line:
ReactTable
This is my react table component:
import React, {PureComponent} from 'react';
import ReactTable from 'react-table';
export default class ExampleTable extends PureComponent {
render() {
const data = [{
name: 'Tanner Linsley',
age: 26,
friend: {
name: 'Jason Maurer',
age: 23,
}
},{
name: 'Bla bla',
age: 29,
friend: {
name: 'RAra Ra',
age: 98,
}
}]
const columns = [{
Header: 'Name',
accessor: 'name' // String-based value accessors!
}, {
Header: 'Age',
accessor: 'age',
Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
}, {
id: 'friendName', // Required because our accessor is not a string
Header: 'Friend Name',
accessor: d => d.friend.name // Custom value accessors!
}, {
Header: props => <span>Friend Age</span>, // Custom header components!
accessor: 'friend.age'
}]
return <ReactTable
data={data}
columns={columns}
/>
}
}
And this is how I import the component:
import ExampleTable from './tables/example';
class TableView extends Component {
getExample() {
return (
<ExampleTable/>
)
}
render() {
return (
<div>
{this.getExample()}
</div>
);
}
}
Any idea why each cell is going to a new line?
Probably is something stupid I'm just starting with React.
Thanks in advance.
Found it!
It was something stupid, I wasn't importing the ReactTable css:
import "react-table/react-table.css";
I have integrated datatable in my react js web app.
It works with sample data as i have mentioned in the code pagelist
I have tried to make it component but did not get the result. I am new
in react and did not able to clue to further progress.
Here the list of my import packages
import axios from 'axios'
import React, {Component} from 'react'
import {BrowserRouter,Route,Switch,Link} from 'react-router-dom'
import { MDBDataTable} from 'mdbreact';
// The below call get the data as i have confirmed in the console log
axios.get('/api/pagelist').then(response => {
var pagelist = JSON.stringify(response.data);
console.log(pagelist);
});
//Sample test data which works with the example
var pagelist = [{
name: 'Tiger Nixon',
position: 'System Architect',
office: 'Edinburgh',
age: '61',
date: '2011/04/25',
salary: '$12320'
},
{
name: 'Gavin Joyce',
position: 'Developer',
office: 'Edinburgh',
age: '42',
date: '2010/12/22',
salary: '$92'
},
{
name: 'Jennifer Chang',
position: 'Regional Director',
office: 'Singapore',
age: '28',
date: '2010/11/14',
salary: '$357'
},
{
name: 'Donna Snider',
position: 'Customer Support',
office: 'New York',
age: '27',
date: '2011/01/25',
salary: '$112'
}
];
// Just copy the function and change columns as guided by the documentation
const DatatablePage = () => {
const data = {
columns: [{
label: 'ID',
field: 'id',
sort: 'asc',
width: 60
},
{
label: 'Name',
field: 'name',
sort: 'asc',
width: 150
},
{
label: 'Title',
field: 'title',
sort: 'asc',
width: 150
},
{
label: 'Slug',
field: 'slug',
sort: 'asc',
width: 100
},
{
label: 'Content',
field: 'content',
sort: 'asc',
width: 250
},
{
label: 'Created',
field: 'created_at',
sort: 'asc',
width: 100
}
],
rows: pagelist
};
return (
<MDBDataTable striped bordered hover data = {data}/>
);
}
//Finally exported it
export default DatatablePage;
Looks like a scoping issue to me. The data variable you're storing the page data in is scoped to the axios callback. Once the code leaves that callback, your data is no longer accessible.
axios.get('/api/pagelist').then(response => {
// pageList scoped locally. not accessible outside. this is why the
// console.log works, but there's no data in the table.
var pagelist = JSON.stringify(response.data);
console.log(pagelist);
});
Assuming you're using a component, I suggest adding a constructor and that you create a state property. E.g.
constructor(props) {
super(props);
this.state = {pageList: []} ;
}
You need to then update this in the axios.get....
axios.get('/api/pagelist').then(response => {
// The below line may not be exactly correct. May need to review.
this.setState({pagelist: JSON.stringify(response.data)}, console.log("state updated));
});
Finally, the rows assignment in the datatables method needs to be
rows: this.state.pagelist
I want to use data grid devextreme in react.
I have tried this code but when i run my project i have this error : jQuery is not defined.
when i try to import jquery i still have the error.
import React, {Component} from 'react';
import dxDataGrid from '../../node_modules/devextreme/dist/js/dx.all';
class Grid extends Component {
constructor() {
super();
this.state = {
dataSource: employees,
sorting: {
mode: "multiple"
},
columns: [
{
dataField: "Prefix",
caption: "Title",
width: 70
}, {
dataField: "FirstName",
sortOrder: "asc"
}, {
dataField: "LastName",
sortOrder: "asc"
}, "City",
"State", {
dataField: "Position",
width: 130
}, {
dataField: "HireDate",
dataType: "date"
}
]
}
}
render () {
return (
<div>
<Grid value= "false" text= "Disable Sorting for the Position Column"/>
</div>
)
}
}
export default Grid;