React bootstrap table with pagination

import React, { useState } from "react";

// Bootstrap
import { Container, Row, Col, Form } from "react-bootstrap";
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory, {
  PaginationProvider
} from "react-bootstrap-table2-paginator";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";
import "react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css";

// Components
import { CustomSelect } from "@components";

// Seed
import { mainFilters } from "@seed";
const products = [
  {
    id: 1,
    description: "product 1",
    jacket: "PVC",
    jacketColor: "Zwart",
    shielding: <img height={24} src="./assets/crossIcon.svg" />,
    hfFree: <img height={24} src="./assets/checkIcon.svg" />,
    ULStyle: <img height={24} src="./assets/crossIcon.svg" />,
    moreInfo: <a href="#">Meer informatie</a>
  },
  {
    id: 2,
    description: "product 2",
    jacket: "PUR",
    jacketColor: "Zwart",
    shielding: <img height={24} src="./assets/crossIcon.svg" />,
    hfFree: <img height={24} src="./assets/checkIcon.svg" />,
    ULStyle: <img height={24} src="./assets/crossIcon.svg" />,
    moreInfo: <a href="#">Meer informatie</a>
  },
  {
    id: 3,
    description: "product 3",
    jacket: "PUR",
    jacketColor: "Zwart",
    shielding: <img height={24} src="./assets/crossIcon.svg" />,
    hfFree: <img height={24} src="./assets/checkIcon.svg" />,
    ULStyle: <img height={24} src="./assets/crossIcon.svg" />,
    moreInfo: <a href="#">Meer informatie</a>
  },
  {
    id: 4,
    description: "product 4",
    jacket: "PUR",
    jacketColor: "Zwart",
    shielding: <img height={24} src="./assets/crossIcon.svg" />,
    hfFree: <img height={24} src="./assets/checkIcon.svg" />,
    ULStyle: <img height={24} src="./assets/crossIcon.svg" />,
    moreInfo: <a href="#">Meer informatie</a>
  },
  {
    id: 5,
    description: "product 5",
    jacket: "PVC",
    jacketColor: "Zwart",
    shielding: <img height={24} src="./assets/crossIcon.svg" />,
    hfFree: <img height={24} src="./assets/checkIcon.svg" />,
    ULStyle: <img height={24} src="./assets/crossIcon.svg" />,
    moreInfo: <a href="#">Meer informatie</a>
  },
  {
    id: 6,
    description: "product 6",
    jacket: "PVC",
    jacketColor: "Zwart",
    shielding: <img height={24} src="./assets/crossIcon.svg" />,
    hfFree: <img height={24} src="./assets/checkIcon.svg" />,
    ULStyle: <img height={24} src="./assets/crossIcon.svg" />,
    moreInfo: <a href="#">Meer informatie</a>
  },
  {
    id: 7,
    description: "product 7",
    jacket: "PVC",
    jacketColor: "Zwart",
    shielding: <img height={24} src="./assets/crossIcon.svg" />,
    hfFree: <img height={24} src="./assets/checkIcon.svg" />,
    ULStyle: <img height={24} src="./assets/crossIcon.svg" />,
    moreInfo: <a href="#">Meer informatie</a>
  },
  {
    id: 8,
    description: "product 8",
    jacket: "PVC",
    jacketColor: "Zwart",
    shielding: <img height={24} src="./assets/crossIcon.svg" />,
    hfFree: <img height={24} src="./assets/checkIcon.svg" />,
    ULStyle: <img height={24} src="./assets/crossIcon.svg" />,
    moreInfo: <a href="#">Meer informatie</a>
  },
  {
    id: 9,
    description: "product 9",
    jacket: "PVC",
    jacketColor: "Zwart",
    shielding: <img height={24} src="./assets/crossIcon.svg" />,
    hfFree: <img height={24} src="./assets/checkIcon.svg" />,
    ULStyle: <img height={24} src="./assets/crossIcon.svg" />,
    moreInfo: <a href="#">Meer informatie</a>
  },
  {
    id: 10,
    description: "product 10",
    jacket: "PUR",
    jacketColor: "Zwart",
    shielding: <img height={24} src="./assets/crossIcon.svg" />,
    hfFree: <img height={24} src="./assets/checkIcon.svg" />,
    ULStyle: <img height={24} src="./assets/crossIcon.svg" />,
    moreInfo: <a href="#">Meer informatie</a>
  },
  {
    id: 11,
    description: "product 11",
    jacket: "PUR",
    jacketColor: "Zwart",
    shielding: <img height={24} src="./assets/crossIcon.svg" />,
    hfFree: <img height={24} src="./assets/checkIcon.svg" />,
    ULStyle: <img height={24} src="./assets/crossIcon.svg" />,
    moreInfo: <a href="#">Meer informatie</a>
  },
  {
    id: 12,
    description: "product 12",
    jacket: "PUR",
    jacketColor: "Zwart",
    shielding: <img height={24} src="./assets/crossIcon.svg" />,
    hfFree: <img height={24} src="./assets/checkIcon.svg" />,
    ULStyle: <img height={24} src="./assets/crossIcon.svg" />,
    moreInfo: <a href="#">Meer informatie</a>
  },
  {
    id: 13,
    description: "product 13",
    jacket: "PUR",
    jacketColor: "Zwart",
    shielding: <img height={24} src="./assets/crossIcon.svg" />,
    hfFree: <img height={24} src="./assets/checkIcon.svg" />,
    ULStyle: <img height={24} src="./assets/cr.svg" />,
    moreInfo: <a href="#">Meer informatie</a>
  }
];
const columns = [
  {
    dataField: "id",
    text: "Product ID",
    sort: true
  },
  {
    dataField: "description",
    text: "Omschrijving",
    sort: true
  },
  {
    dataField: "jacket",
    text: "Mantel"
  },
  {
    dataField: "jacketColor",
    text: "Mantelkleur"
  },
  {
    dataField: "shielding",
    text: "Afscherming"
  },
  {
    dataField: "hfFree",
    text: "Halogeenvrij"
  },
  {
    dataField: "ULStyle",
    text: "UL / CSA (UL)"
  },
  {
    dataField: "moreInfo",
    text: ""
  }
];

const Home = props => {
  const [state, setState] = useState({
    amount_of_vains: [
      { name: "1", value: "one_vain" },
      { name: "2", value: "two_vains" }
    ],
    cross_section: [
      { name: "0.05", value: "0.05" },
      { name: "0.10", value: "0.10" }
    ],
    jacket: [
      { name: "PUR", value: "PUR" },
      { name: "PUR FHF", value: "PUR_FHF" }
    ],
    jacketColor: [
      { name: "Zwart", value: "black" },
      { name: "Blauw", value: "blue" }
    ],
    shielding: [
      { name: "Ja", value: "yes" },
      { name: "Nee", value: "no" }
    ],
    hfFree: [
      { name: "Ja", value: "yes" },
      { name: "Nee", value: "no" }
    ],
    ULStyle: [
      { name: "Ja", value: "yes" },
      { name: "Nee", value: "no" }
    ],

    selectedVains: null,
    selectedCrossSection: null,
    selectedJacked: null,
    selectedJackedColor: null,
    selectedShielding: null,
    selectedHF: null,
    selectedULStyle: null
  });

  return (
    <Container style={{ width: "65vw" }}>
      <Row className="justify-content-start">
        <Col xs={6}>
          {/* Configurator Title introduction */}
          <h2 className="mb-2">
            ZOEK, SELECTEER EN CONFIGUREER DE KABEL NAAR UW WENSEN
          </h2>

          {/* Filter introduction */}
          <h5>FILTERS</h5>
          <p>
            Selecteer de waardes die voor u kabel van toepassing zijn. Op basis
            van deze waardes filteren wij onze producten en tonen wij u de kabel
            die het beste bij u wensen aansluit. Mocht u vragen hebben over de
            configurator of advies willen hebben, neem dan telefonisch contact
            met ons op via <a href="test">+31 (0)162 - 523 436.</a>
          </p>
        </Col>

        <Col xs={12}>
          <Form
            className="edit-form"
            onSubmit={() => console.log("Submitting filter form")}
          >
            <Row>
              {mainFilters.map(
                ({
                  name,
                  optionSelector,
                  selected,
                  disabledSelector,
                  loadingMessage,
                  noOptionsMessage
                }) => (
                  <Col lg={3} key={name}>
                    <Form.Group controlId={name} key={name}>
                      <CustomSelect
                        name={name}
                        options={state[optionSelector]}
                        selected={state[selected]}
                        onChange={value =>
                          setState(prevState => ({
                            ...prevState,
                            [selected]: value
                          }))
                        }
                        request={() => console.log("Reading csv file...")}
                        isDisabled={
                          disabledSelector ? !state[disabledSelector] : false
                        }
                        isLoading={false}
                        loadingMessage={loadingMessage}
                        noOptionsMessage={noOptionsMessage}
                      />
                    </Form.Group>
                  </Col>
                )
              )}
            </Row>
          </Form>
        </Col>

        <Col xs={12}>
          <h5 className="mt-2">
            GESCHIKTE KABELS <small>(149 resultaten)</small>
          </h5>

          <PaginationProvider pagination={paginationFactory({ custom: true })}>
            {({ paginationProps, paginationTableProps }) => (
              <BootstrapTable
                rowStyle={(row, rowIndex) =>
                  rowIndex % 2 === 0
                    ? { backgroundColor: "white" }
                    : { backgroundColor: "#F4F4F4" }
                }
                noDataIndication={<p>Geen kabels gevonden</p>}
                bootstrap4
                keyField="id"
                data={products}
                columns={columns}
                pagination={paginationFactory()}
                bordered={false}
                wrapperClasses="table-responsive"
              />
            )}
          </PaginationProvider>
        </Col>
      </Row>
    </Container>
  );
};

export default Home;