N
N
Nikolko2018-04-24 19:13:50
Bootstrap
Nikolko, 2018-04-24 19:13:50

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 question

Ask a Question

731 491 924 answers to any question