Hi everyone!
I’m trying to wrap this React component and I’m getting some errors. Here’s my code:
from typing import Literal
import reflex as rx
class DataSheetComponent(rx.Component):
library = "@react-datasheet"
tag = "ReactDataSheet"
data = rx.Var[list]
value_render = rx.EventHandler[lambda e: [e]]
data_render = rx.EventHandler[lambda e: [e]]
on_cells_changed = rx.EventHandler[lambda e: [e]]
on_context_menu = rx.EventHandler[lambda e: [e]]
parse_paste = rx.EventHandler[lambda e: [e]]
in_cell_navigable = rx.EventHandler[lambda e: [e]]
handle_copy = rx.EventHandler[lambda e: [e]]
overflow = rx.Var[Literal["wrap", "nowrap", "clip"]]
data_sheet = DataSheetComponent.create
And I’m having this error when I try to use it:
Traceback (most recent call last):
File "/Users/david.parra/miniconda3/envs/reflex-testing/bin/reflex", line 8, in <module>
sys.exit(cli())
^^^^^
File "/Users/david.parra/miniconda3/envs/reflex-testing/lib/python3.11/site-packages/typer/main.py", line 326, in __call__
raise e
File "/Users/david.parra/miniconda3/envs/reflex-testing/lib/python3.11/site-packages/typer/main.py", line 309, in __call__
return get_command(self)(*args, **kwargs)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/Users/david.parra/miniconda3/envs/reflex-testing/lib/python3.11/site-packages/click/core.py", line 1157, in __call__
return self.main(*args, **kwargs)
^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/Users/david.parra/miniconda3/envs/reflex-testing/lib/python3.11/site-packages/typer/core.py", line 723, in main
return _main(
^^^^^^
File "/Users/david.parra/miniconda3/envs/reflex-testing/lib/python3.11/site-packages/typer/core.py", line 193, in _main
rv = self.invoke(ctx)
^^^^^^^^^^^^^^^^
File "/Users/david.parra/miniconda3/envs/reflex-testing/lib/python3.11/site-packages/click/core.py", line 1688, in invoke
return _process_result(sub_ctx.command.invoke(sub_ctx))
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/Users/david.parra/miniconda3/envs/reflex-testing/lib/python3.11/site-packages/click/core.py", line 1434, in invoke
return ctx.invoke(self.callback, **ctx.params)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/Users/david.parra/miniconda3/envs/reflex-testing/lib/python3.11/site-packages/click/core.py", line 783, in invoke
return __callback(*args, **kwargs)
^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/Users/david.parra/miniconda3/envs/reflex-testing/lib/python3.11/site-packages/typer/main.py", line 692, in wrapper
return callback(**use_params)
^^^^^^^^^^^^^^^^^^^^^^
File "/Users/david.parra/miniconda3/envs/reflex-testing/lib/python3.11/site-packages/reflex/reflex.py", line 260, in run
_run(env, frontend, backend, frontend_port, backend_port, backend_host, loglevel)
File "/Users/david.parra/miniconda3/envs/reflex-testing/lib/python3.11/site-packages/reflex/reflex.py", line 186, in _run
prerequisites.get_compiled_app()
File "/Users/david.parra/miniconda3/envs/reflex-testing/lib/python3.11/site-packages/reflex/utils/prerequisites.py", line 288, in get_compiled_app
app_module = get_app(reload=reload)
^^^^^^^^^^^^^^^^^^^^^^
File "/Users/david.parra/miniconda3/envs/reflex-testing/lib/python3.11/site-packages/reflex/utils/prerequisites.py", line 261, in get_app
app = __import__(module, fromlist=(constants.CompileVars.APP,))
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/Users/david.parra/Documents/Personal/code/projects/reflex-testing/reflex_testing/reflex_testing.py", line 48, in <module>
app.add_page(index)
File "/Users/david.parra/miniconda3/envs/reflex-testing/lib/python3.11/site-packages/reflex/app.py", line 440, in add_page
component = self._generate_component(component)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/Users/david.parra/miniconda3/envs/reflex-testing/lib/python3.11/site-packages/reflex/app.py", line 362, in _generate_component
return component if isinstance(component, Component) else component()
^^^^^^^^^^^
File "/Users/david.parra/Documents/Personal/code/projects/reflex-testing/reflex_testing/reflex_testing.py", line 27, in index
data_sheet(
File "/Users/david.parra/miniconda3/envs/reflex-testing/lib/python3.11/site-packages/reflex/components/component.py", line 811, in create
return cls(children=children, **props)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/Users/david.parra/miniconda3/envs/reflex-testing/lib/python3.11/site-packages/reflex/components/component.py", line 485, in __init__
super().__init__(*args, **kwargs)
File "/Users/david.parra/miniconda3/envs/reflex-testing/lib/python3.11/site-packages/pydantic/v1/main.py", line 341, in __init__
raise validation_error
pydantic.v1.error_wrappers.ValidationError: 2 validation errors for DataSheetComponent
data
instance of _GenericAlias expected (type=type_error.arbitrary_type; expected_arbitrary_type=_GenericAlias)
overflow
instance of _GenericAlias expected (type=type_error.arbitrary_type; expected_arbitrary_type=_GenericAlias)
This is the way I’m using it:
import reflex as rx
from rxconfig import config
from .sheet import data_sheet
class State(rx.State):
"""The app state."""
...
def index() -> rx.Component:
# Welcome Page (Index)
return rx.container(
rx.color_mode.button(position="top-right"),
rx.vstack(
rx.heading("Welcome to Reflex!", size="9"),
rx.text(
"Get started by editing ",
rx.code(f"{config.app_name}/{config.app_name}.py"),
size="5",
),
data_sheet(
data=[
[{"value": 1}, {"value": 3}],
[{"value": 2}, {"value": 4}],
],
overflow="wrap",
),
rx.link(
rx.button("Check out our docs!"),
href="https://reflex.dev/docs/getting-started/introduction/",
is_external=True,
),
spacing="5",
justify="center",
min_height="85vh",
),
rx.logo(),
)
app = rx.App()
app.add_page(index)
Does anyone know what I might be doing wrong? Or has anyone made a similar component? It would be really helpful!
