text: import React, { Component } from 'react';
  import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
  import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css';
  //import 'bootstrap/dist/css/bootstrap.min.css';
  import Debounce from 'lodash-decorators/debounce';
  import Bind from 'lodash-decorators/bind';
  import autoHeight from '../autoHeight';
  import styles from '../index.less';
  import * as chartDataPreprocessor from '../../../utils/ChartsDataPreprocessor';
  import * as utils from '../../../utils/utils';
  
  @autoHeight()
  export default class Grid extends Component {
  
    state = {
      autoHideXLabels: false,
    };
  
    componentDidMount() {
      window.addEventListener('resize', this.resize);
    }
  
    componentWillUnmount() {
      window.removeEventListener('resize', this.resize);
    }
  
    @Bind()
    @Debounce(400)
    resize() {
      if (!this.node) {
        return;
      }
      const canvasWidth = this.node.parentNode.clientWidth;
  
      if (!autoLabel) {
        return;
      }
      const minWidth = data.length * 30;
      const { autoHideXLabels } = this.state;
  
      if (canvasWidth <= minWidth) {
        if (!autoHideXLabels) {
          this.setState({
            autoHideXLabels: true,
          });
        }
      } else if (autoHideXLabels) {
        this.setState({
          autoHideXLabels: false,
        });
      }
    }
  
    handleRoot = (n) => {
      this.root = n;
    };
  
    handleRef = (n) => {
      this.node = n;
    };
  
    render() {
  
      const { data, columns } = this.props;
      return (
        <div style={{fontSize:'10px'}}>
          <BootstrapTable data={data} bodyStyle={{overflow: 'overlay'}}  pagination height={window.innerHeight/2} search multiColumnSearch
          striped  hover condensed>
          {columns}
          </BootstrapTable>
        </div>
      )
    }
  }
  