<commit_before>import React from 'react';
import cloneDeep from 'lodash/cloneDeep';
import findIndex from 'lodash/findIndex';
import * as Table from 'reactabular-table';
import * as dnd from 'reactabular-dnd';
import * as resolve from 'table-resolver';
import style from '../style.css';

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

    this.state = {
      columns: [
        {
          property: 'name',
          props: {
            style: {
              width: 300
            }
          },
          header: {
            label: 'Name',
          }
        },
        {
          property: 'organization_name',
          props: {
            style: {
              width: 300
            }
          },
          header: {
            label: 'Organization',
          }
        },
        {
          property: 'lead_number',
          props: {
            style: {
              width: 300
            }
          },
          header: {
            label: 'Number',
          }
        },
        {
          property: 'amount_owed',
          props: {
            style: {
              width: 100
            }
          },
          header: {
            label: 'Owes',
          }
        },
        {
          props: {
            style: {
              width: 200
            }
          }
        }

      ],
      rows: [],
      filteredDataList: this.rows,
    };

    this.onRow = this.onRow.bind(this);
    this.onMoveRow = this.onMoveRow.bind(this);
  }

  componentDidMount() {
    fetch("/api/competitors/competition/:id2")
      .then(response => response.json())
      .then(json => {
        this.setState({rows: json,
                       filteredDataList: this.rows, })
      })
      .catch(err => alert(err))
  }

  render() {
    const components = {
      header: {
        wrapper: 'thead',
        row: 'tr',
        cell: 'th'
      },
      body: {
        row: dnd.Row
      }
    };
    const { columns, rows } = this.state;

    //const resolvedColumns = resolve.columnChildren({ columns });
    const resolvedRows = resolve.resolve({
      columns: columns,
      method: resolve.nested
    })(rows);

    return (
      <Table.Provider
        components={components}
        columns={columns}
        className={style.tableWrapper}
      >
        <Table.Header
          headerRows={resolve.headerRows({ columns })}
          className={style.tableHeader}
        />

        <Table.Body
          className={style.tableBody}
          rows={resolvedRows}
          rowKey="id"
          onRow={this.onRow}
        />
      </Table.Provider>
    );
  }

  _renderHeader(label, cellDataKey) {
    return <div>
          <span>{label}</span>
            <div>
              <br />
              <input style={{width:90+'%'}} onChange={this._onFilterChange.bind(this, cellDataKey)}/>
            </div>
        </div>;
  }
 
  _onFilterChange(cellDataKey, event) {
    if (!event.target.value) {
      this.setState({
        filteredDataList: this.rows,
      });
    }
    var filterBy = event.target.value.toString().toLowerCase();
    var size = this.rows.length;
    var filteredList = [];
    for (var index = 0; index < size; index++) {
      var v = this.rows[index][cellDataKey];
      if (v.toString().toLowerCase().indexOf(filterBy) !== -1) {
        filteredList.push(this.rows[index]);<commit_msg>Searchable table<commit_after>import React from 'react';
import {Table, Column, Cell} from 'fixed-data-table';
import * as resolve from 'table-resolver';
import style from '../style.css';

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

        this.rows = [];
        this.state = {
            columns: [
            {
                dataKey: 'name',
                label: 'Name',
                props: {
                    style: {
                        width: 300
                    }
                },
                headerRenderer: this._renderHeader.bind(this),
            },
            {
                dataKey: 'organization_name',
                label: 'Organization',
                props: {
                    style: {
                        width: 300
                    }
                },
                headerRenderer: this._renderHeader.bind(this),

            },
            {
                dataKey: 'lead_number',
                label: 'Number',          
                props: {
                    style: {
                        width: 300
                    }
                },
                headerRenderer: this._renderHeader.bind(this),

            },
            {
                dataKey: 'amount_owed',
                label: 'Owes',
                props: {
                    style: {
                        width: 100
                    }
                },
                headerRenderer: this._renderHeader.bind(this),
            },
            {
                props: {
                    style: {
                        width: 200
                    }
                }
            }

            ],
            filteredDataList: this.rows,
        };
    }

    componentDidMount() {
        fetch("/api/competitors/competition/:id2")
          .then(response => response.json())
          .then(json => {
              this.rows = json
              console.log("rows length is" + this.rows.length)
              this.setState({
                  filteredDataList: this.rows, })
              console.log("filter length is" + this.state.filteredDataList.length)

          })
          .catch(err => alert(err))
    }

    render() {
        const { columns, rows, filteredDataList } = this.state;

        //const resolvedColumns = resolve.columnChildren({ columns });
        const resolvedRows = resolve.resolve({
            columns: columns,
            method: resolve.nested
        })(filteredDataList);

        return <Table
        height={40+((this.state.filteredDataList.length+1) * 30)}
        width={1150}
        rowsCount={this.state.filteredDataList.length}
        rowHeight={30}
        headerHeight={30}
        rowGetter={function(rowIndex) {return this.state.filteredDataList[rowIndex]; }.bind(this)}>
        <Column dataKey = 'name' width = {300} label = 'Name'
        headerRenderer =  {this._renderHeader.bind(this)}/>
        <Column dataKey = 'organization_name' width = {300} label = 'Organization'
        headerRenderer =  {this._renderHeader.bind(this)}/>
        <Column dataKey = 'lead_number' width = {300} label = 'Number'
        headerRenderer =  {this._renderHeader.bind(this)}/>
        <Column dataKey = 'amount_owed' width = {300} label = 'Owes'
        headerRenderer =  {this._renderHeader.bind(this)}/>
        </Table>;
  }

_renderHeader(label, cellDataKey) {
    console.log("rendering a header" + label);
    return <div>
          <span>{label}</span>
            <div>
              <br />
              <input style={{width:90+'%'}} onChange={this._onFilterChange.bind(this, cellDataKey)}/>
            </div>
        </div>;
  }
 
  _onFilterChange(cellDataKey, event) {
    if (!event.target.value) {
      this.setState({
        filteredDataList: this.rows,
      });
    }
    var filterBy = event.target.value.toString().toLowerCase();
    var size = this.rows.length;
    var filteredList = [];
    for (var index = 0; index < size; index++) {
      var v = this.rows[index][cellDataKey];
      if (v.toString().toLowerCase().indexOf(filterBy) !== -1) {
        filteredList.push(this.rows[index]);
{'fraction_non_alphanumeric': 0.1266754270696452, 'fraction_numerical': 0.008541392904073587, 'mean_word_length': 1.4146573604060915, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 35, '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': '1352703', 'n_tokens_mistral': 2144, 'n_tokens_neox': 2037, 'n_words': 394}