<commit_before>import React from 'react';
import _ from 'lodash';
import {Grid, Row, Col, PageHeader, Button, ButtonGroup, Input} from 'react-bootstrap';

import FixedDataTable from 'fixed-data-table';
const Table = FixedDataTable.Table;
const Column = FixedDataTable.Column;

export default class HarViewer extends React.Component {

	constructor() {
    super();
    this.state = {};
	}

	render() {
		return (
			<Grid>
	      <Row>
	        <Col sm={12}>
	        	<PageHeader>Har HarViewer</PageHeader>
	        </Col>
	      </Row>
	    </Grid>
    )
	};

}
<commit_msg>render table<commit_after>require('fixed-data-table/dist/fixed-data-table.css')

import React from 'react';
import _ from 'lodash';
import {Grid, Row, Col, PageHeader, Button, ButtonGroup, Input} from 'react-bootstrap';

import FixedDataTable from 'fixed-data-table';
const Table = FixedDataTable.Table;
const Column = FixedDataTable.Column;

export default class HarViewer extends React.Component {

	constructor() {
    super();
    this.state = {
    	columnWidths: {
    		url: 500,
    		size: 100,
    		time: 200
    	},
    	tableWidths: 1000,
    	tableHeight: 500
    };
	}

	render() {
		return (
			<Grid>

	      <Row>
	        <Col sm={12}>
	        	<PageHeader>Har Viewer</PageHeader>
	        </Col>
	      </Row>

	      <Row>
	        <Col sm={12}>
	        	<Table rowsCount={this.props.entries.length}
	        				 width={this.state.tableWidths}
	        				 headerHeight={30}
	        				 height={this.state.tableHeight}
	        				 rowHeight={30}
	        				 rowGetter={this._getEntry.bind(this)}
    				>
	        	  <Column datakey="url"
	        						width={this.state.columnWidths.url}
	        						isResizable={true}
	        						label="Url" 
	        						flexGrow={null} />
	        		<Column datakey="size"
	        						width={this.state.columnWidths.size}
	        						isReszable={true}
	        						label="Size" />
  						<Column datakey="time"
				  						width={this.state.columnWidths.time}
				  						minWidth={200}
				  						isReszable={true}
				  						label="Timeline" />
	        	</Table>
	        </Col>
	      </Row>

	    </Grid>
    )
	};

	_getEntry(index) {
		return this.props.entries[index];
	}

}

HarViewer.defaultProps = { entries: [] };
{'fraction_non_alphanumeric': 0.1313836752509821, 'fraction_numerical': 0.012658227848101266, 'mean_word_length': 2.056, 'pattern_counts': {'":': 0, '<': 28, '<?xml version=': 0, '>': 28, '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': '133120', 'n_tokens_mistral': 897, 'n_tokens_neox': 740, 'n_words': 142}