You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
After the installation of all required packages. Follow the instruction to setup the development environment.
26
-
27
-
* Clone the Streamlit [component-template](https://github.com/streamlit/component-template) GitHub repository to the local machine.
28
-
29
-
* Choose the template from the [component-template](https://github.com/streamlit/component-template) repo whether React platform or not and Use the chosen template folder.
30
-
31
-
* Inside the `template` folder rename the folder `my-component` to the module name that will reflect on the [pipy.org](https://pypi.org/project/pip/).
32
-
33
-
## Implementation
34
-
35
-
The implementation needs basic knowledge of the Python programming language.
36
-
37
-
### Deployment of the JavaScript / HTML component.
38
-
39
-
* Open the renamed `my-component` folder on a [VS Code](https://code.visualstudio.com/) (or any other `Text-Editor`).
40
-
41
-
* Install all default dependent packages, use the following command.
11
+
Use the following command to install the Syncfusion Streamlit Grid component.
42
12
43
13
```sh
44
-
npm install
45
-
```
46
-
* Install dependent packages for the component using following command
47
-
```sh
48
-
npm install <package-name> --save
14
+
pip install ej2_streamlit_grids
49
15
```
50
16
51
-
* Deploy the component code on the respective `*.tsx` file inside the folder : `my-component / frontend / src`.
17
+
## Implementation
52
18
53
-
> Note: Dynamic data should be passed from the streamlit backend. So, No need to implement the dynamic data on the frontend.
19
+
Create a simple demo.py file as follows:
54
20
55
-
* The gate-way of the component should starts from the `index.tsx` file with streamlit integration. The component should be finally rendered with streamlit.
21
+
```py
22
+
from ej2_streamlit_grids import GridComponent, GridProps
23
+
import pandas as pd
56
24
57
-
* Once all the coding were implemented, Run the component on the local server by executing `npm start` command on the Terminal or Command prompt ( CMD ).
25
+
data = pd.read_csv('dataset.csv')
26
+
props = GridProps(data)
58
27
59
-
### Deployment of Component on the Streamlit.
28
+
GridComponent(props)
29
+
```
60
30
61
-
* After the development server started, open the `my-component` folder on the another window of the [VS Code](https://code.visualstudio.com/) (or any other `Text-Editor`).
31
+
Use the following command to run the application:
62
32
63
-
* Now open `__init__.py` file, It acts like a constructor for the Python package when the component package get imported, the `__init__.py` file initiated.
33
+
64
34
65
-
* In `__init__.py` file, rename the class name `my_component` that denotes our Component, the constructor holds the parameter which are passed to the `JS` or `HTML` file.
35
+
```sh
36
+
streamlit run demo.py
37
+
```
66
38
67
-
* The Values or Options are passed to the front end by the `_component_func()` as a parameter from here and received at the front-end as `props.args`.
39
+
## Demo
68
40
69
-
* Can create another python module to implement the Features to the component, which are manipulated at the `__init__.py` file and passes to the component only as a single parameter.
0 commit comments