Custom Component: Material UI React Table

:thinking: hmmm interesting, we’ll look into it

Pointing the docs for this, the declare_component defines where Streamlit should fetch the React component, here on http://localhost:3001.
Notice the dev server that you start from my_component/frontend is configured to run on http://localhost:3001 :wink: .

The declare_component returns a function _selectable_data_table. Whenever you use that function, Streamlit calls the other dev frontend server on port 3001 for the component then renders it on your browser ! Any parameter you send like _selectable_data_table(name="Randy") will be available in the React component accessed from there, here in props.args.name.


For production, we don’t want that 2nd dev server for serving a frontend component. Instead we build and minify all frontend files with npm run build into a single bundle, and then instead of pointing to an URL we point to a path with the bundle on declare_component(path=build/). To publish on PyPi we deploy this small JS with the Python code, all together in the wheel file :slight_smile: that part is documented here


PS : shameless plug, if you’ve played with ipyvuetify maybe you’re familiar with Vue.js. I tried to build a Vue.js template for Component here. It’s not well documented and maybe bugs will pop up but maybe it’ll work for you


That’s too nice of you :upside_down_face:

1 Like