31:T861,viewof grid = { const transpiled = Babel.transform(jsxCode, { presets: ['es2015', 'react'] }).code; function evalInContext () { return eval(transpiled) } const root = DOM.element("div") const pageSize = 20; const events = { HANDLE_CELL_CLICK: (cell, reactEvent, id, browserEvent) => { console.log('On Cell Click Event'); }, HANDLE_CELL_DOUBLE_CLICK: (cell, reactEvent, id, browserEvent) => { console.log('On Cell Double Click Event'); }, HANDLE_ROW_CLICK: (row, reactEvent, id, browserEvent) => { console.log('On Row Click Event'); }, HANDLE_ROW_DOUBLE_CLICK: (row, reactEvent, id, browserEvent) => { console.log('On Row Double Click Event'); }, HANDLE_BEFORE_SELECTION: () => { console.log('On Before Selection') }, HANDLE_AFTER_SELECTION: () => { console.log('On After Selection'); }, HANDLE_AFTER_INLINE_EDITOR_SAVE: () => { console.log('On After Save Inline Editor Event'); }, HANDLE_BEFORE_BULKACTION_SHOW: () => { console.log('On Before Bulk Action Show'); }, HANDLE_AFTER_BULKACTION_SHOW: () => { console.log('On After Bulk Action Show'); } }; const rootReducer = Redux.combineReducers(gridReducers) const store = Redux.createStore(rootReducer) const editableProps = { columns, data: false ? [] : chartData, pageSize, plugins: { EDITOR: { type: 'grid' } }, events, store, stateKey: 'editable' }; const stateKey = 'grid-stateKey'; evalInContext.call({ require, root, React, ReactDOM, Provider, gridReducers, chartData, columns, Grid }); let listeners = []; //TODO: expose internal state and update events root.value = chartData; // output.addEventListener = (listener) => listeners.push(listener);; // output.removeEventListener = (listener) => { // listeners = listeners.filter(l => l !== listener); // }; return root }32:T667,md`This is an experimental (and very, very heavy) notebook to try infinite scroll editable grid-based data frames that can be referenced live by visualizations. I tried many different grid frameworks, reactReduxGrid was the one that essentially worked, evading wzrd.in build errors. To get React going, I started from [here](https://beta.observablehq.com/@subuta/react-with-jsx-example-via-babel-standalone). @tmcw also has a [preliminary help document](https://beta.observablehq.com/@tmcw/state-of-react-in-observable) on this topic. ## References 1. http://react-redux-grid.herokuapp.com 2. https://github.com/bencripps/react-redux-grid-demo/blob/master/src/components/examples/Editable.js 3. https://redux.js.org/basics/usage-with-react ## TODO: 1. ~~Get a complex react+redux component to load.~~ 1. use [Bootstrap](https://github.com/bencripps/react-redux-grid-demo/blob/master/src/components/examples/bootstrap/Bootstrap.js) classes 1. Use redux events/generators to [update data in Observable on change](https://beta.observablehq.com/@tmcw/exploring-viewof). 1. spreadsheet-style keyboard navigation _{**Notes:** Ultimately, I had to run wzrd.in in a Docker instance because the public one timed out too easily. If I was to attempt to transplant one more react grid, it might be [react-virtualized](https://github.com/bvaughn/react-virtualized), ([wzrd pre-build here](https://gist.githubusercontent.com/thadk/fda6164bff4de1cfac5f53b983f87a78/raw/0f575e256d124464a58100f23f598498ba8aaa1b/react-virtualized-9-18-5.js)) Thanks for the help reviewing this stack, [@carpeliam](https://github.com/carpeliam).}`33:T416,columns = [ {name:'Car Type',dataIndex:'car', width: '20%'}, {name:'MPG',dataIndex:'mpg'}, {name:'Disp',dataIndex:'disp'}, {name:'Horsepower',dataIndex:'hp',width: '14%'}, {name:'drat',dataIndex:'drat'}, {name:'Weight',dataIndex:'wt'}, {name:'qsec',dataIndex:'qsec'}, {name:'vs',dataIndex:'vs'}, {name:'am',dataIndex:'am'}, {name:'gear',dataIndex:'gear'}, {name:'carb',dataIndex:'carb'}, ] /*columns = [ { name: 'Name', width: '10%', className: 'additional-class', dataIndex: 'Name', HANDLE_CLICK: () => { console.log('Header Click'); } }, { name: 'Phone Number', width: '20%', dataIndex: 'Phone Number', className: 'additional-class' }, { name: 'Email', width: '25%', dataIndex: 'Email', className: 'additional-class', defaultSortDirection: 'descend' }, { name: 'Address', dataIndex: 'Address', width: '35%', className: 'additional-class' } ]*/34:T1b85,html`` //These did not cooperate: //reactDataGrid = require('react-data-grid@3.0.11/dist/react-data-grid') //reactReduxGrid = require('react-redux-grid@5.5.2/dist/index.js') //reactReduxGrid = require('https://wzrd.in/standalone/react-redux-grid@5.5.2') //reactEditableTable = require('https://wzrd.in/standalone/react-editable-table') //https://github.com/carlosrocha/react-data-components did not work //MuiEditableTable = require('http://localhost:8080/standalone/mui-editable-table@latest')35:[] 2f:{"title":"Live edit grid view for Observable?","cells":[{"id":0,"value":"md` # Live edit grid view for Observable?\n## reactReduxGrid with JSX example (via @babel/standalone)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"\njsxCode = `\n ReactDOM.render((\n \n \n \n ), root)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"md`\ncode above will transpiled by babel-standalone(\\`@babel/standalone\\`) and will be \\`eval\\`uated 😈\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"grid","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"React = require('https://bundle.run/react@latest')","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"ReactDOM = require('https://bundle.run/react-dom@16.8.2')\n//ReactDOM = require('https://bundle.run/react-dom@16.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"//mtcars demo data from the R language.\nchartData = d3.csv('https://gist.githubusercontent.com/Jverma/3c61c0496f6e7ddafda9/raw/819f19684d3b77d005d97ab2b7a0fe85af30d424/mtcars.csv')\n\n\n//UCI Machine Learning Repository: Abalone Data Set\n//'https://gist.githubusercontent.com/yifancui/689b0250e4b7d84ee1fda1eba00f617b/raw/6e9b32f1b4716ab7ee9b8610e0c323b7a9e66ba5/data.csv'\n\n\n/*chartData = [\n {\n \"Name\": \"Sawyer\",\n \"Phone Number\": \"(209) 915-9426\",\n \"Email\": \"dui.nec@Seddictum.co.uk\",\n \"Address\": \"7815 Accumsan St.\"\n },\n {\n \"Name\": \"Chadwick\",\n \"Phone Number\": \"(666) 320-2563\",\n \"Email\": \"vitae.sodales@leoMorbi.com\",\n \"Address\": \"P.O. Box 994, 452 Sed Rd.\"\n}]*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"chartData","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"//built using a local wzrd.in\nreactReduxGrid = require('https://rawgit.com/thadk/fda6164bff4de1cfac5f53b983f87a78/raw/4895147d020f5edd20f4df3a59c0eca128df7e92/react-redux-grid-5-5-2.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"gridReducers = reactReduxGrid.Reducers","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"Grid = reactReduxGrid.Grid","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"Babel = require('https://unpkg.com/@babel/standalone@7.0.0-beta.40/babel.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"//built using a local wzrd.in\nReactRedux = require('https://rawgit.com/thadk/fda6164bff4de1cfac5f53b983f87a78/raw/4895147d020f5edd20f4df3a59c0eca128df7e92/react-redux-5-0-7.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"Redux = require('https://rawgit.com/thadk/fda6164bff4de1cfac5f53b983f87a78/raw/89af9cd78708ea2944c8a1b082995988fd9b9644/redux-3.7.2.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"Provider = ReactRedux.Provider","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}