I use react-bootstrap-table-next in this way:
import React, { Component } from 'react';
import products from './data.js';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable from 'react-bootstrap-table-next';
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
class App extends Component {
render() {
return (
<BootstrapTable keyField='id' data={ products } columns={ columns } />
);
}
}
export default App;
But, there is no border.
What I'm missing?
I had the exact same issue. It requires bootstrap CSS like others mentioned. In a typical react app, you'll want to install bootstrap via npm and then import the bootstrap CSS with this line.
import 'bootstrap/dist/css/bootstrap.min.css';
I'm the creator of react-bootstrap-table, please check https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html.
obviously, you are missing to add bootstrap css or there're some problem when you add bootstrap css.
Allen
import React, { Component } from 'react';
import products from './data.js';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable from 'react-bootstrap-table-next';
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
class App extends Component {
render() {
return (
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
striped
hover
condensed
/>
);
}
}
export default App;
Try this.
The bootstrap reference needs to be added to index.html as below:
https://getbootstrap.com/docs/4.0/getting-started/introduction/
Related
I am trying to use 'material-table' in my Material dashboard 2 pro react dashboard by Creative Tim, but while adding the data in the table, the data is not aligned with the and has a lot of gaps.
My component code:
import { Grid } from "#mui/material";
import MaterialTable from "material-table";
import EditableTable from "examples/Tables/EditableTable";
function AdminTable() {
return (
<Grid>
<MaterialTable
title="Multiple Actions Preview"
columns={[
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
]}
data={[
{ name: 'Mehmet', surname: 'Baran', birthYear: 2017 },
]}
/>
</Grid>
)
}
export default AdminTable
Can someone tell me why this is happening? Material table works fine when I use it outside this template but inside this template it does not align.
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.
I have a table with columns and basically the data Im sending it, in some columns is another array. If its an array I need to split that into separate rows.
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";
const columns = [
{
title: "Classes",
dataIndex: "classes"
},
{
title: "Grades",
dataIndex: "grades"
},
{
title: "Credentials",
dataIndex: ["classMap", "Teacher with credentials"]
},
{
title: "No Credentials",
dataIndex: ["classMap", "Teacher no credentials"]
}
];
const data = [
{
key: "1",
classes: ["Chinese", "Italian"],
grades: ["98", "64"],
classMap: {
"Teacher with credentials": ["School board cred", "Teaching school"],
"Teacher no credentials": ["no credentials"]
}
}
];
ReactDOM.render(
<Table columns={columns} dataSource={data} pagination={false} />,
document.getElementById("container")
);
I made this example. If you look in codepen the data lets say for classes is in the same row. I need them to be split into separate rows
Kind of a React noobie here so please don't judge.
The react table is rendering in the form of a row.
My Component:
import React, { Component } from 'react';
import ReactTable from 'react-table';
// import 'react-table/react-table.css';
class Variants extends Component {
constructor(props) {
super(props);
}
render() {
const columns = [
{
Header: 'Gene',
accessor: 'gene'
},
{
Header: 'Nucleotide Change',
accessor: 'nucleotide_change'
},
{
Header: 'Protein Change',
accessor: 'protein_change'
},
{
Header: 'Other Mappings',
accessor: 'other_mappings'
},
{
Header: 'Alias',
accessor: 'alias'
},
{
Header: 'Transcripts',
accessor: 'transcripts'
},
{
Header: 'Region',
accessor: 'region'
},
{
Header: 'Reported Classification',
accessor: 'reported_classification'
},
{
Header: 'Inferred Classification',
accessor: 'inferred_classification'
},
{
Header: 'Source',
accessor: 'source'
},
{
Header: 'Last Evaluated',
accessor: 'last_evaluated'
},
{
Header: 'Last Updated',
accessor: 'last_updated'
},
{
Header: 'More Information',
accessor: 'url',
Cell: e => (
<a target="_blank" href={e.value}>
{' '}
{e.value}{' '}
</a>
)
},
{
Header: 'Submitter Comment',
accessor: 'submitter_comment'
}
];
if (this.props.variants && this.props.variants.length > 0) {
return (
<div>
<h2>
{' '}
There are {this.props.variants.length} variants of this gene!
</h2>
<div>
<ReactTable
data={this.props.variants}
columns={columns}
defaultPageSize={3}
pageSizeOptions={[3, 5, 10, 50, 100]}
/>
</div>
</div>
);
} else {
return [];
}
}
}
export default Variants;
It is rendering the whole table as a row for some weird reason. I have attached the image to show what is happening. Also, the pagination buttons are not nice. Can they be modified?
Has anyone come across a similar problem?
I got it working below. I simplified the data since you didn't provide an example data set but this should help you.
The only thing I can think you have wrong is either you need to uncomment import 'react-table/react-table.css'; or maybe you are passing in your props wrong in <Variants variants={variants}/>
Variants.js
import React, { Component } from 'react';
import ReactTable from 'react-table';
import 'react-table/react-table.css';
class Variants extends Component {
render() {
const columns = [
{
Header: 'Gene',
accessor: 'gene'
},
{
Header: 'Nucleotide Change',
accessor: 'nucleotide_change'
},
{
Header: 'Protein Change',
accessor: 'protein_change'
}
];
if (this.props.variants && this.props.variants.length > 0) {
return (
<div>
<h2>
{' '}
There are {this.props.variants.length} variants of this gene!
</h2>
<div>
<ReactTable
data={this.props.variants}
columns={columns}
defaultPageSize={3}
pageSizeOptions={[3, 5, 10, 50, 100]}
/>
</div>
</div>
);
} else {
return [];
}
}
}
export default Variants;
App.js
import React from 'react';
import './App.css';
import Variants from "./Variants";
const variants = [
{
gene:'a',
nucleotide_change:'a',
protein_change:'a'
},
{
gene:'b',
nucleotide_change:'b',
protein_change:'b'
}
];
function App() {
return (
<div className="App">
<Variants variants={variants}/>
</div>
);
}
export default App;
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";