|
1 | | -# Getting started with Syncfusion Grid component in Streamlit application |
| 1 | +# Getting started with Syncfusion Grid component with Streamlit Python Framework |
2 | 2 |
|
3 | | -Developers can write `JavaScript` and `HTML components` that can be rendered in Streamlit apps. Streamlit Components can receive data from, and also send data to, Streamlit Python scripts. |
| 3 | +This article provides a step-by-step guide for setting up a [Streamlit](https://streamlit.io/) project with a Python environment and integrating the Syncfusion Grid components. |
4 | 4 |
|
5 | | -Streamlit Components let you expand the functionality provided in the base Streamlit package. Use Streamlit Components to create the needed functionality for your use-case, then wrap it up in a Python package and share with the broader Streamlit community! |
| 5 | +The `Streamlit` is a free and open-source framework that enables quick development and sharing of visually appealing web applications for machine learning and data science. |
6 | 6 |
|
7 | | -The Syncfusion Grid component is a remarkable front-end tool that can be seamlessly integrated into the Streamlit framework, offering users access to a wealth of advanced features and capabilities. For details, refer [here](https://www.syncfusion.com/react-components/react-data-grid). |
| 7 | +## Set up the Streamlit project environment |
8 | 8 |
|
9 | | -## Installation |
| 9 | +A recommended approach for beginning with Streamlit framework is to create Python environment with [venv](https://docs.python.org/3/library/venv.html). To create a new Python environment, use the following command. |
10 | 10 |
|
11 | | -Use the following command to install the Syncfusion Streamlit Grid component. |
| 11 | +```bash |
| 12 | +python -m venv my-project |
| 13 | +``` |
| 14 | + |
| 15 | +Using the above command will create a Python virtual evnironment. |
| 16 | + |
| 17 | +Upon completing the aforementioned step to create the `my-project`, run the following command to install Streamlit: |
| 18 | + |
| 19 | +```bash |
| 20 | +cd my-project |
| 21 | +pip install streamlit |
| 22 | +``` |
| 23 | + |
| 24 | +Now that `my-project` is ready to run with default settings, let's add Syncfusion Grid components to the project. |
| 25 | + |
| 26 | +## Add Syncfusion Grid package |
| 27 | + |
| 28 | +Syncfusion Grid component package is available at [pypi.org](https://pypi.org/project/ej2-streamlit-grids/). To use Syncfusion Grid component in the project, install the corresponding pip package. |
12 | 29 |
|
13 | 30 | ```sh |
14 | 31 | pip install ej2-streamlit-grids |
15 | 32 | ``` |
16 | 33 |
|
17 | | -## Implementation |
| 34 | +## Add Syncfusion Grid package |
| 35 | + |
| 36 | +Follow the below steps to add the Syncfusion Grid component to Streamlit Python project: |
18 | 37 |
|
19 | | -Create a simple demo.py file as follows: |
| 38 | +1. First, create a Python file named `demo.py` and import the Grid component in the **demo.py** file. |
20 | 39 |
|
21 | 40 | ```py |
22 | 41 | from ej2_streamlit_grids import GridComponent, GridProps |
23 | | -import pandas as pd |
| 42 | +``` |
| 43 | + 2. Define the Grid component with the `GridProps` and `dataset` instance to the `GridComponent` function. |
24 | 44 |
|
| 45 | +```py |
25 | 46 | data = pd.read_csv('dataset.csv') |
26 | 47 | props = GridProps(data) |
27 | 48 |
|
28 | 49 | GridComponent(props) |
29 | 50 | ``` |
30 | 51 |
|
31 | | -Use the following command to run the application: |
| 52 | +3. Declare the values for the **dataset.csv** file. |
32 | 53 |
|
33 | 54 | ```sh |
34 | | -streamlit run demo.py |
| 55 | +OrderID, CustomerName, OrderDate, Freight, ShippedDate, ShipCountry |
| 56 | +10248, Paul Henriot, 7/4/1996, 3ドル2.38, 7/16/1996, France |
| 57 | +10249, Karin Josephs, 7/5/1996, 1ドル1.61, 7/10/1996, Germany |
| 58 | +10250, Mario Pontes, 7/8/1996, 6ドル5.83, 7/12/1996, Brazil |
| 59 | +10251, Mary Saveley, 7/8/1996, 4ドル1.34, 7/15/1996, France |
35 | 60 | ``` |
36 | 61 |
|
37 | | -## Demo |
| 62 | +Here is the summarized code for the above steps in the **demo.py** file: |
38 | 63 |
|
39 | | -The Grid sample is showcased below with few feature. |
40 | | - |
41 | | - |
42 | | - |
43 | | -## Support |
| 64 | +```py |
| 65 | +from ej2_streamlit_grids import GridComponent, GridProps |
| 66 | +import pandas as pd |
44 | 67 |
|
45 | | -Product support is available for through following mediums. |
| 68 | +data = pd.read_csv('dataset.csv') |
| 69 | +props = GridProps(data) |
46 | 70 |
|
47 | | -* Creating incident in Syncfusion [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm) support system or [Community forum](https://www.syncfusion.com/forums/essential-js2/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm). |
48 | | -* New [GitHub issue](https://github.com/syncfusion/ej2-javascript-ui-controls/issues/new/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm). |
49 | | -* Ask your query in [Stack Overflow](https://stackoverflow.com/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm) with tag `syncfusion` and `ej2`. |
| 71 | +GridComponent(props) |
| 72 | +``` |
50 | 73 |
|
51 | | -## License |
| 74 | +## Run the project |
52 | 75 |
|
53 | | -Check the license detail [here](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/license/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm). |
| 76 | +To run the project, use the following command: |
54 | 77 |
|
55 | | -## Changelog |
| 78 | +```sh |
| 79 | +streamlit run demo.py |
| 80 | +``` |
56 | 81 |
|
57 | | -Check the changelog [here](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/controls/layouts/CHANGELOG.md/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm). |
| 82 | +The output will appear as follows: |
58 | 83 |
|
59 | | -Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. |
| 84 | + |
0 commit comments