Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit bbbd0ce

Browse files
Vishnu-MoorthiVishnu-Moorthi
Vishnu-Moorthi
authored and
Vishnu-Moorthi
committed
Syncfusion Streamlit example added
1 parent 9150ec8 commit bbbd0ce

File tree

1 file changed

+31
-26
lines changed

1 file changed

+31
-26
lines changed

‎README.md

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,57 @@
1-
# Getting started with Syncfusion Grid component with Streamlit Python Framework
1+
# Getting started with the Syncfusion Grid component in the Streamlit application
22

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.
3+
This article provides a step-by-step guide for setting up a [Streamlit](https://streamlit.io/) application with a Python environment and integrating the Syncfusion Grid components.
44

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.
5+
`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.
66

7-
## Set up the Streamlit project environment
7+
## Setting up the Streamlit application
88

9-
A recommended approach for beginning with Streamlit framework is to create a Python environment with [venv](https://docs.python.org/3/library/venv.html). To create a new Python environment, use the following command.
9+
A recommended approach for beginning with the Streamlit framework is to create a Python environment with [venv](https://docs.python.org/3/library/venv.html). Follow these steps to create a new Python environment.
1010

1111
```bash
12-
python -m venv my-project
12+
python -m venv my-app
1313
```
1414

1515
Using the above command will create a Python virtual environment.
1616

17-
Upon completing the aforementioned step to create **my-project**, run the following command to install Streamlit:
17+
Upon completing the aforementioned step to create **my-app**, run the following command to install Streamlit:
1818

1919
```bash
20-
cd my-project
20+
cd my-app
2121
pip install streamlit
2222
```
2323

24-
Now that **my-project** is ready to run with default settings, let's add Syncfusion Grid components to the project.
24+
Now that **my-app** is ready to run with default settings, let's add Syncfusion Grid components to the application.
2525

26-
## Add Syncfusion Grid package
26+
## Add the Syncfusion Grid package
2727

28-
Syncfusion Grid component package is available at [pypi.org](https://pypi.org/project/ej2-streamlit-grids/). To use the Syncfusion Grid component in the project, install the corresponding pip package.
28+
The Syncfusion Grid component package is available at [pypi.org](https://pypi.org/project/ej2-streamlit-grids/). To use the Syncfusion Grid component in the application, install the corresponding pip package.
2929

3030
```sh
3131
pip install ej2-streamlit-grids
3232
```
3333

34-
## Add Syncfusion Grid component
34+
## Import Syncfusion CSS styles
3535

36-
Follow the below steps to add the Syncfusion Grid component to the Streamlit Python project:
36+
You can import themes for the Syncfusion Streamlit component, such as using CSS or SASS styles from the CDN. Refer to the [themes topic](https://ej2.syncfusion.com/react/documentation/appearance/theme/) to learn more about built-in themes.
3737

38-
1. First, create a Python file named **demo.py** and import the Grid component into the **demo.py** file.
38+
In this article, the `Fluent` theme is applied using `theme` property, which are available in CDN. The necessary `Fluent` CSS styles for the Grid component were passed into the `theme` property, which is referenced using the code snippet below.
3939

4040
```py
41-
from ej2_streamlit_grids import GridComponent, GridProps
41+
props.theme ='https://cdn.syncfusion.com/ej2/22.1.34/fluent.css'
4242
```
43-
2. Define the Grid component with the `GridProps` and `dataset` instance to the `GridComponent` function.
4443

45-
```py
46-
data = pd.read_csv('dataset.csv')
47-
props = GridProps(data)
44+
## Add the Syncfusion Grid component
4845

49-
GridComponent(props)
46+
Follow the below steps to add the Syncfusion Grid component to the Streamlit Python project:
47+
48+
1\. First, create a Python file named **demo.py** and import the Grid component into the **demo.py** file.
49+
50+
```py
51+
from ej2_streamlit_grids import GridComponent, GridProps
5052
```
5153

52-
3. Declare the values for the **dataset.csv** file.
54+
2\. Create and Define the values for the Grid component in the **dataset.csv** file.
5355

5456
```sh
5557
OrderID, CustomerName, OrderDate, Freight, ShippedDate, ShipCountry
@@ -59,12 +61,17 @@ OrderID, CustomerName, OrderDate, Freight, ShippedDate, ShipCountry
5961
10251, Mary Saveley, 7/8/1996, 4ドル1.34, 7/15/1996, France
6062
```
6163

62-
4. Syncfusion components come with pre-defined themes that are built-in. To learn more about these themes, you can refer to the [themes topic](https://ej2.syncfusion.com/react/documentation/appearance/theme/). By default, the Syncfusion Streamlit Grid component uses the `Material` theme, but users have the ability to change the theme of the Grid component at the application level. The Grid component in this article is using the `Fluent` theme, which is referenced using the code snippet below.
64+
3\. Define the properties for the Grid component with the `GridProps` class and Pass the `data` read from the `CSV` file as the parameter.
6365

6466
```py
65-
props.theme = 'https://cdn.syncfusion.com/ej2/22.1.34/fluent.css'
67+
data = pd.read_csv('dataset.csv')
68+
props = GridProps(data)
69+
70+
GridComponent(props)
6671
```
6772

73+
## Run the application
74+
6875
Here is the summarized code for the above steps in the **demo.py** file:
6976

7077
```py
@@ -78,9 +85,7 @@ props.theme = 'https://cdn.syncfusion.com/ej2/22.1.34/fluent.css'
7885
GridComponent(props)
7986
```
8087

81-
## Run the project
82-
83-
To run the project, use the following command:
88+
Ensure that terminal is in the correct project directory where "demo.py" is located. Run the application using the following command:
8489

8590
```sh
8691
streamlit run demo.py

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /