Source: components/userComponents/monitoredArea/table/LiveStreamTable.js

import React from "react";
import '../../css/CameraList.css';
import {
  fetchMonitoredAreaList
} from '../../../restmodules/MonitoredAreaRestModule';
import ReactTable from 'react-table';
import 'react-table/react-table.css';
import { Link } from 'react-router-dom';
import { withNamespaces } from 'react-i18next';

/**
 * Livestreams overview
 * @extends Component
 * @hideconstructor
 */
class LiveStreamTable extends React.Component {
  /**
   * @constructs
   * @param props
   */
  constructor(props) {
    super(props);
    this.state = {
      data: null
    }
  }

  /**
   *
   */
  updateData() {
    fetchMonitoredAreaList().then(data => this.setState({
      data: data,
      selectedMonitoredAreaID: null
    }))
    .catch(error => this.setState({ data: [{ name: error.toString() }] }));
  }

  /**
   *
   */
  componentDidMount() {
    this.updateData();
  }

  /**
   *
   * @returns {*}
   */
  render() {
    const { t } = this.props;
    const columns = [{
      Header: t('monitoredArea.monitoredArea'),
      columns: [
        {
          Header: 'ID',
          accessor: 'id',
          width: 300
        }, {
          Header: t('forms.name'),
          accessor: 'name',
          Width: 200
        }
      ]
    }, {
      Header: '',
      width: 60,
      Cell: row => (
        <div className={"spacing"}>
          <span className={"label " + ((row.original.numberOfActiveStreams == 0) ? "label-default" : "label-success")}>{row.original.numberOfActiveStreams}</span>
          <Link to={"live/" + row.original.device.id}><i className="fa fa-play"/></Link>
        </div>
      )
    }];

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

    if (this.state.data) {
      return (
        <div className="content-wrapper">
          <section className="content-header">
            <h1>
              {t('sidebar.liveStreams')}
              <small>{t('livestream.chooseAreaWatch')}</small>
            </h1>

            <ol className="breadcrumb">
              <li><a href="/live"><i className="fa fa-play"></i>{t('sidebar.liveStreams')}</a></li>
            </ol>

            <br/>

            <div className="row">
              <div className="col-md-12">
                <div className="box">
                  <div className="box-body">
                    <ReactTable
                      data={this.state.data}
                      columns={columns}
                      defaultPageSize={(length > 10) ? 10 : length}
                      pageSizeOptions={(length > 10) ? [5, 10, 25, 50, 100] : [length]}
                      className="-highlight"
                    />
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      )
    } else {
      return (
        <div className="container-center">
          <i className="fa fa-refresh fa-spin loading"/>
        </div>)
    }
  }
}

export default withNamespaces()(LiveStreamTable);