Source: components/userComponents/monitoredArea/statisticsTabs/TableOfTransits.js

import React from 'react';
import ReactTable from "react-table";

import "react-table/react-table.css";
import LoadEventSum from "../eventSum/LoadEventSum";
import { withNamespaces } from 'react-i18next';
import Tab from "react-bootstrap/es/Tab";

/**
 * Statistics Table of transits Tab
 * @extends Component
 * @hideconstructor
 */
class TableOfTransits extends React.Component {

  /**
   *
   */
  render() {
    const { t } = this.props;
    let table;

    let length = this.props.data !== null && this.props.data !== undefined ? this.props.data.length : 5;

    table = <ReactTable
        filterable
      columns={[
        {
          Header: t('monitoredArea.info'),
          // accessor: "zones"
          accessor: "name",
          width: 900,
          Filter: ({filter, onChange}) => (
              <div style={{position: 'relative'}}>
                  <input
                      onChange={event => onChange(event.target.value)}
                      value={filter ? filter.value : ''}
                      placeholder={t('monitoredArea.placeholderFilterByZone')}
                      style={{
                          width: '100%',
                          backgroundColor: 'transparent',
                          color: '#222222',
                      }}
                  />
                  <i className="fa fa-search" style={{position: 'absolute', right: '10px', lineHeight: '30px'}}>

                  </i>
              </div>
          ),
        },
        {
          Header: t('monitoredArea.passedVehicles'),
          accessor: "count",
            Filter: ({filter, onChange}) => (
                <div style={{position: 'relative'}}>
                    <input
                        onChange={event => onChange(event.target.value)}
                        value={filter ? filter.value : ''}
                        placeholder={t('monitoredArea.placeholderFilterByValue')}
                        style={{
                            width: '100%',
                            backgroundColor: 'transparent',
                            color: '#222222',
                        }}
                    />
                    <i className="fa fa-search" style={{position: 'absolute', right: '10px', lineHeight: '30px'}}>

                    </i>
                </div>
            ),
        },
      ]}
      data={this.props.data.reverse()}
      defaultPageSize={(length > 10) ? 10 : (length == 0 ? 5 : length)}
      pageSizeOptions={(length > 10) ? [5, 10, 25, 50, 100] : [length]}
      className="-striped -highlight"

    />;

    return (

      <div>
        <div className="box">
          <div className="box-header">
            <div className="col-md-6">
              <h3 className="box-title text-right">{t('monitoredArea.tableOfPassedVehicles')}</h3>

            </div>

            {/* <button>{this.props.areaIdFromFilterButton}
            </button>  */}


          </div>

          <div className="box-body">
            {/*<LoadEventSum data={this.props.data}/>*/}

            {table}

            <br/>

          </div>
          <div className="box-footer">
            {/*<p className="text-right">* number of passings per hour</p>*/}
          </div>
        </div>


      </div>
    );
  }
}

export default withNamespaces()(TableOfTransits);