Answer the question
In order to leave comments, you need to log in
How to add ScrollBar to react-bootstrap-table?
Good day.
How to connect any custom ScrollBar in react-bootstrap-table?
I will give a component of the table.
const Retailers = () => {
const products = [
{
retailers: 1,
type: 'Dropship ',
date: '08.30.2018',
products: 'sdvsdwefwefvsdv',
total: '345',
order: '38',
},
{
retailers: 'Sacks Fifth Avenue',
type: 'Dropship ',
date: '02.30.2018',
products: 'wef',
total: '345',
order: '90',
},
{
retailers: 'Sacks Fifth Avenue ',
type: 'Dropship ',
date: '02.30.2018',
products: 'wefwef',
total: '345',
order: '4',
},
{
retailers: 'Sacks Fifth Avenue ',
type: 'Dropship ',
date: '04.30.2018',
products: 'dfb',
total: '345',
order: '56',
},
{
retailers: 'Sacks Fifth Avenue ',
type: 'Dropship ',
date: '03.30.2018',
products: 'fgn',
total: '345',
order: '87',
},
{
retailers: 'Sacks Fifth Avenue ',
type: 'Dropship ',
date: '02.30.2018',
products: 'ty',
total: '345',
order: '5',
},
{
retailers: 'Sacks Fifth Avenue ',
type: 'Dropship ',
date: '09.30.2018',
products: 'tynm',
total: '345',
order: '38',
},
{
retailers: 'Sacks Fifth Avenue ',
type: 'Dropship ',
date: '06.30.2018',
products: 'gh',
total: '345',
order: '43',
},
];
return (
<BootstrapTable
data={products}
printable
striped
hover
height="330"
scrollTop="Top"
>
<TableHeaderColumn
isKey
dataField="retailers"
headerAlign="left"
width="20%"
dataFormat={productFormatter}
>
Product ID
</TableHeaderColumn>
<TableHeaderColumn
dataField="type"
headerAlign="center"
dataAlign="center"
>
Product Name
</TableHeaderColumn>
<TableHeaderColumn
dataField="date"
headerAlign="center"
dataAlign="center"
dataSort
caretRender={getCaret}
>
Product Price
</TableHeaderColumn>
<TableHeaderColumn
dataField="products"
headerAlign="center"
dataAlign="center"
>
Product ID
</TableHeaderColumn>
<TableHeaderColumn
dataField="total"
headerAlign="center"
dataAlign="center"
>
Product Name
</TableHeaderColumn>
<TableHeaderColumn
dataField="order"
headerAlign="center"
dataAlign="center"
>
Product Price
</TableHeaderColumn>
<TableHeaderColumn
dataField="status"
headerAlign="center"
dataAlign="center"
dataFormat={statusFormatter}
>
Status
</TableHeaderColumn>
</BootstrapTable>
);
};
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question