<commit_before>/* eslint-disable no-shadow */
import React from 'react';
import { Search } from '../helpers';
import {
  Table, search
} from '../../src';

class FixedWidthHeader extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      style: {}
    };
  }
  componentDidMount() {
    // setTimeout is used to capture width correctly
    // More info: github.com/facebook/react-native/issues/953
    setTimeout(() => {
      const width = this.refs.header.clientWidth;

      this.setState({
        style: { width }
      });
    });
  }
  render() {
    return (
      <th style={this.state.style} ref="header">{this.props.children}</th>
    );
  }
}
FixedWidthHeader.propTypes = {
  children: React.PropTypes.any
};

export default class FixedWidthColumnsTable extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      query: {}, // Search query
      columns: [
        {
          header: {
            label: 'Name',
            component: FixedWidthHeader
          },
          cell: {
            property: 'name'
          }
        },
        {
          header: {
            label: 'Address',
            component: FixedWidthHeader
          },
          cell: {
            property: 'address'
          }
        }
      ],
      data: [
        {
          id: 1,
          name: 'This is a very long title that goes on and on',
          address: '85 Peachfield Road'
        },
        {
          id: 2,
          name: 'Here is a shorter one',
          address: '77 Newmarket Road'
        }
      ]
    };
  }
  render() {
    const { data, columns, query } = this.state;
    const searchedData = search.multipleColumns({ columns, query })(data);

    return (
      <div>
        <div className="search-container">
          <span>Search</span>
          <Search
            columns={columns}
            data={data}
            onChange={query => this.setState({ query })}
          />
        </div>
        <Table.Provider columns={columns} data={searchedData} rowKey="id">
          <Table.Header />

          <Table.Body />
        </Table.Provider>
      </div>
    );
  }
}<commit_msg>docs - Restore fixed width table example<commit_after>/* eslint-disable no-shadow */
import React from 'react';
import { Search } from '../helpers';
import {
  Table, search
} from '../../src';

export default class FixedWidthColumnsTable extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      query: {}, // Search query
      columns: [
        {
          header: {
            label: 'Name'
          },
          cell: {
            property: 'name'
          }
        },
        {
          header: {
            label: 'Address'
          },
          cell: {
            property: 'address'
          }
        }
      ],
      data: [
        {
          id: 1,
          name: 'This is a very long title that goes on and on',
          address: '85 Peachfield Road'
        },
        {
          id: 2,
          name: 'Here is a shorter one',
          address: '77 Newmarket Road'
        }
      ]
    };
  }
  render() {
    const components = {
      header: {
        cell: FixedWidthHeader
      }
    };
    const { data, columns, query } = this.state;
    const searchedData = search.multipleColumns({ columns, query })(data);

    return (
      <div>
        <div className="search-container">
          <span>Search</span>
          <Search
            columns={columns}
            data={data}
            onChange={query => this.setState({ query })}
          />
        </div>
        <Table.Provider
          components={components}
          columns={columns}
          data={searchedData}
          rowKey="id"
        >
          <Table.Header />

          <Table.Body />
        </Table.Provider>
      </div>
    );
  }
}

class FixedWidthHeader extends React.Component {
  constructor(props) {
    super(props);

    this.widthSet = false;
    this.state = {
      style: {}
    };
  }
  componentDidUpdate() {
    if (this.widthSet) {
      return;
    }

    const width = this.refs.header.clientWidth;

    // Wait till width is available and set then
    if (width) {
      this.widthSet = true;

      this.setState({ // eslint-disable-line react/no-did-update-set-state
        style: { width }
      });
    }
  }
  render() {
    return (
      <th style={this.state.style} ref="header">{this.props.children}</th>
    );
  }
}
FixedWidthHeader.propTypes = {
  children: React.PropTypes.any
};
{'fraction_non_alphanumeric': 0.13133084849813637, 'fraction_numerical': 0.00328875246656435, 'mean_word_length': 1.5614823133071307, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 32, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5923583', 'n_tokens_mistral': 1325, 'n_tokens_neox': 1303, 'n_words': 299}