basic filtering by mongo queries

src/App.js

@@ -143,13 +143,13 @@ const Row = ({top, children}) =>
     {children}
 </div>
 
-const Cell = ({children}) =>
-<div className='Cell'>
+const Cell = ({children, ...props}) =>
+<div className='Cell' {...props}>
     {children}
 </div>
 
 
-function ModelGrid({model, rowHeight, gridHeight, overload, query}){
+function ModelGrid({model, rowHeight, gridHeight, overload, query, cellDoubleClick}){
     const onScreenRowCount   = gridHeight/rowHeight
     const overloadedRowCount = overload * onScreenRowCount
 
@@ -206,7 +206,7 @@ function ModelGrid({model, rowHeight, gridHeight, overload, query}){
                     {records && records.map((record,i) => 
                                                     <Row top={(skip)*rowHeight}>
                                                         {model.fields.map(field => 
-                                                            <Cell>
+                                                            <Cell onDoubleClick={e => cellDoubleClick(field.name, record[field.name], record._id)}>
                                                                 {record[field.name]}
                                                             </Cell>)}
                                                     </Row>)}
@@ -226,7 +226,8 @@ function App() {
 
     return (
         <div className="App">
-            {models && <ModelGrid model={models.PriceItem} rowHeight={50} gridHeight={700} overload={5} query={query}/> }
+            {models && <ModelGrid model={models.PriceItem} rowHeight={50} gridHeight={700} overload={5} query={query} 
+                        cellDoubleClick={(name, text, _id) => setQueryText(`{${name}:\`${text}\`}`)}/> }
             <textarea onChange={e => setQueryText(e.target.value)} value={queryText} />
             <button onClick={() => setQuery(eval(`(${queryText})`))}>Run</button>
         </div>