UserTable.js

import React, { Component } from 'react';
import { Search } from 'reactabular';
import EasyTable from 'reactabular-easy';
import { list } from 'react-immutable-proptypes';

class UserTable extends Component {
	static propTypes = {
		users: list
	}

	constructor(props) {
		super(props);

		this.state = {
			query: {},
			sortingColumns: {},
			rows: this.getRows(),
			columns: this.getColumns(),
		};

		this.onSearch = ::this.onSearch;
		this.getRows = ::this.getRows;
		this.getColumns = ::this.getColumns;
	}

	onSearch(query) {
		this.setState({ query });
	}

	onSort(sortingColumns) {
		console.log('onSort', sortingColumns);

		this.setState({ sortingColumns });
	}

	getRows() {
		const viewData = this.props.users.toJS();
		const tableData = [];

		viewData.reduce((prevValue, currentValue) => (
			tableData.push(
				{
					id: currentValue.p1099uuid,
					name: `${currentValue.profile.firstName} ${currentValue.profile.lastName}`,
					email: currentValue.email
				}
			)
		));

		return tableData;
	}

	getColumns() {
		return [
			{
				property: 'email',
				header: {
					label: 'Email',
				},
				cell: {
				},
				width: 100,
				visible: true
			},
			{
				property: 'name',
				header: {
					label: 'Name',
				},
				width: 100,
				visible: true
			}
		];
	}

	render() {
		const { columns, sortingColumns, rows, query } = this.state;
		const visibleColumns = columns.filter(column => column.visible);

		return (
			<div className="user-table">
				<div className="search-container">
					<span className="search">Search</span>
					<Search
						query={query}
						columns={visibleColumns}
						rows={rows}
						onChange={q => this.setState({ query: q })}
					/>
				</div>

				<EasyTable
					rows={rows}
					rowKey="id"
					sortingColumns={sortingColumns}
					tableWidth={800}
					tableHeight={400}
					columns={visibleColumns}
					query={query}
					classNames={{
						table: {
							wrapper: 'pure-table pure-table-striped'
						}
					}}
					onSort={this.onSort}
				/>
			</div>
		);
	}
}

export default UserTable;