FilteredTable.jsx

// Source data

var exampleData = [
    {
        id: 1,
        first: 'Janice',
        last: 'Howell',
    },
    {
        id: 2,
        first: 'Carolyn',
        last: 'Morrison',
    },
    {
        id: 3,
        first: 'Tomas',
        last: 'Cobb',
    }
];

// Little format that defines what the table should look like

var exampleProps = {
    columns: [
        {
            key: 'id',
            label: 'ID',
        },
        {
            key: 'first',
            label: 'First Name',
        },
        {
            key: 'last',
            label: 'Last Name',
        },
    ],
    data: exampleData
};

// Table component that _only_ renders what it's given

var Table = React.createClass({
    render: function() {
        var props = this.props;

        var rows = props.data.map(function(row) {
            var columns = props.columns.map(function(column) {
                return <td key={ column.key }>{ row[column.key ]}</td>;
            });
            return <tr key={ row.id }>{ columns }</tr>;
        });

        var headers = props.columns.map(function(column) {
            return <th key={ column.key }>{ column.label }</th>;
        });

        return (
            <table>
                <thead><tr>{ headers }</tr></thead>
                <tbody>{ rows }</tbody>
            </table>
        );
    }
});

// Your filtered table

var FilteredTable = React.createClass({
    getInitialState: function() {
        return { value: '' };
    },
    handleChange: function(e) {
        this.setState({ value: e.target.value });
    },
    render: function() {
        var props = this.props;
        var state = this.state;

        var data = props.data;
        if (state.value !== '') {
            data = props.filterFunction(data, state.value);
        }
        
        return (
            <div>
            <label>Filter</label>
            <input
                type="text"
                value={state.value}
                onChange={this.handleChange}
            />
            <Table
                data={data}
                columns={props.columns}
            />
            </div>
        };
    }
});