<commit_before>import React from 'react';
import { Table, Column, Cell, HeaderCell, TablePagination } from '../../src';
import fakeData from '../data/users';

const DateCell = ({ rowData, dataKey, ...props }) => (
  <Cell {...props}>
    {rowData[dataKey].toLocaleString()}
  </Cell>
);

function formatLengthMenu(lengthMenu) {
  return (
    <div className="table-length">
      <span> 每页 </span>
      {lengthMenu}
      <span> 条 </span>
    </div>
  );
}

function formatInfo(total, activePage) {
  return (
    <span>共 <i>{total}</i> 条数据</span>
  );
}

const PaginationTable = React.createClass({
  getInitialState() {
    return {
      displayLength: 100,
      data: fakeData
    };
  },
  handleChangePage(dataKey) {
    const { displayLength } = this.state;
    this.setState({
      data: fakeData
    });
  },
  handleChangeLength(dataKey) {
    this.setState({
      displayLength: dataKey,
      data: fakeData
    });
  },
  render() {
    const { data } = this.state;
    return (
      <div>
        <Table height={400} data={data} resizable>

          <Column width={50} align="center" fixed>
            <HeaderCell>Id</HeaderCell>
            <Cell dataKey="id" />
          </Column>

          <Column width={100} fixed resizable >
            <HeaderCell>First Name</HeaderCell>
            <Cell dataKey="firstName" /><commit_msg>Update docs<commit_after>import React from 'react';
import { Table, Column, Cell, HeaderCell, TablePagination } from '../../src';
import fakeData from '../data/users';

const DateCell = ({ rowData, dataKey, ...props }) => (
  <Cell {...props}>
    {rowData[dataKey].toLocaleString()}
  </Cell>
);

function formatLengthMenu(lengthMenu) {
  return (
    <div className="table-length">
      <span> 每页 </span>
      {lengthMenu}
      <span> 条 </span>
    </div>
  );
}

function formatInfo(total, activePage) {
  return (
    <span>共 <i>{total}</i> 条数据</span>
  );
}

const PaginationTable = React.createClass({
  getInitialState() {
    return {
      displayLength: 100,
      data: fakeData
    };
  },
  handleChangePage(dataKey) {
    const { displayLength } = this.state;
    this.setState({
      data: fakeData
    });
  },
  handleChangeLength(dataKey) {
    this.setState({
      displayLength: dataKey,
      data: fakeData
    });
  },
  render() {
    const { data } = this.state;
    return (
      <div>
        <Table height={400} data={data} >

          <Column width={50} align="center" fixed>
            <HeaderCell>Id</HeaderCell>
            <Cell dataKey="id" />
          </Column>

          <Column width={100} fixed resizable >
            <HeaderCell><NAME></HeaderCell>
            <Cell dataKey="firstName" />
{'fraction_non_alphanumeric': 0.15744522836984776, 'fraction_numerical': 0.008169327887114742, 'mean_word_length': 2.4671814671814674, 'pattern_counts': {'":': 0, '<': 50, '<?xml version=': 0, '>': 52, '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': '6590826', 'n_tokens_mistral': 872, 'n_tokens_neox': 863, 'n_words': 185}