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 75e541e

Browse files
Vishnu-MoorthiVishnu-Moorthi
Vishnu-Moorthi
authored and
Vishnu-Moorthi
committed
Syncfusion Streamlit Grid sample added.
1 parent 055aa4f commit 75e541e

File tree

6 files changed

+165
-2
lines changed

6 files changed

+165
-2
lines changed

‎.streamlit/config.toml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
[theme]
2+
base="light"

‎Demo-Sample.py

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
from ej2_streamlit_grids import GridComponent, GridProps
2+
import pandas as pd
3+
import streamlit as st
4+
5+
6+
data = pd.read_csv('dataset.csv')
7+
props = GridProps(data)
8+
# Add your Syncfusion Lincense key here.
9+
props.registerLicense('{license key}')
10+
11+
props.height = 250
12+
with st.sidebar:
13+
st.header('Example options')
14+
isEditing = st.checkbox('Editing', False)
15+
if isEditing:
16+
props.toolbarItems = ['Add', 'Delete', 'Edit']
17+
props.editSettings = { 'allowAdding': True, 'allowDeleting': True, 'allowEditing': True }
18+
19+
isFiltering = st.checkbox('Filtering', False)
20+
props.allowFiltering = isFiltering
21+
22+
isSorting = st.checkbox('Sorting', False)
23+
props.allowSorting = isSorting
24+
25+
isDragDrop = st.checkbox('Drag and Drop', False)
26+
props.allowRowDragAndDrop = isDragDrop
27+
28+
isSelection = st.checkbox('Selection', False)
29+
props.allowSelection = isSelection
30+
31+
isReorder = st.checkbox('Reorder Columns', False)
32+
props.allowReordering = isReorder
33+
34+
isResize = st.checkbox('Resize Columns', False)
35+
props.allowResizing = isResize
36+
37+
isHover = st.checkbox('Enable Hover', False)
38+
props.enableHover = isHover
39+
40+
isPaging = st.checkbox('Paging', False)
41+
if isPaging:
42+
pages = st.number_input('Enter the total number of items on a page', format='%i', step=1)
43+
props.allowPaging = True
44+
props.pageSettings = { 'pageSize': pages, 'pageSizes': True }
45+
46+
st.header('Syncfusion Streamlit Grid')
47+
GridComponent(props)

‎README.md

Lines changed: 100 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,100 @@
1-
# Getting-started-with-Syncfusion-Grid-component-in-Streamlit-app
2-
This repository contains the Syncfusion Grid component example using Streamlit application.
1+
# Getting Started with the Syncfusion Grid component in the Streamlit Application
2+
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.
4+
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.
6+
7+
## Setting up the Streamlit application
8+
9+
To begin working with the Streamlit framework, it is recommended to create a Python environment using [venv](https://docs.python.org/3/library/venv.html). Refer to the below command to create a new Python environment:
10+
11+
```bash
12+
python -m venv my-app
13+
```
14+
15+
Upon completing the aforementioned step to create **my-app**, run the following command to install Streamlit:
16+
17+
```bash
18+
cd my-app
19+
pip install streamlit
20+
```
21+
22+
Now that **my-app** is ready to run with default settings, let's add Syncfusion Grid component to the application.
23+
24+
## Add the Syncfusion Grid package
25+
26+
Install the Syncfusion Grid component package from [PyPI](https://pypi.org/project/ej2-streamlit-grids/) by executing the following command:
27+
28+
```sh
29+
pip install ej2-streamlit-grids
30+
```
31+
32+
## Add the Syncfusion Grid component
33+
34+
Follow the below steps to add the Syncfusion Grid component to the Streamlit application:
35+
36+
1\. Create a Python file named **demo.py** and import the Grid component into the file:
37+
38+
```py
39+
from ej2_streamlit_grids import GridComponent, GridProps
40+
```
41+
42+
2\. Create a `CSV` file named **dataset.csv** and populate it with data in the following format:
43+
44+
```sh
45+
OrderID, CustomerName, OrderDate, Freight, ShippedDate, ShipCountry
46+
10248, Paul Henriot, 7/4/1996, 3ドル2.38, 7/16/1996, France
47+
10249, Karin Josephs, 7/5/1996, 1ドル1.61, 7/10/1996, Germany
48+
10250, Mario Pontes, 7/8/1996, 6ドル5.83, 7/12/1996, Brazil
49+
10251, Mary Saveley, 7/8/1996, 4ドル1.34, 7/15/1996, France
50+
```
51+
52+
3\. Read the data from the `CSV` file and initialize the `GridProps` object:
53+
54+
```py
55+
data = pd.read_csv('dataset.csv')
56+
props = GridProps(data)
57+
58+
GridComponent(props)
59+
```
60+
61+
## Import Syncfusion CSS styles
62+
63+
You can import themes for the Syncfusion Streamlit component from the CDN. Refer to the [themes topic](https://ej2.syncfusion.com/react/documentation/appearance/theme/) to learn more about built-in themes. The `Material` theme is the default theme for the Streamlit Grid component.
64+
65+
You can change the default theme with any of the available [built-in themes](https://ej2.syncfusion.com/react/documentation/appearance/theme/). 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.
66+
67+
```py
68+
props.theme = 'https://cdn.syncfusion.com/ej2/22.1.34/fluent.css'
69+
```
70+
71+
## Run the application
72+
73+
Here is the summarized code for the above steps in the **demo.py** file:
74+
75+
```py
76+
from ej2_streamlit_grids import GridComponent, GridProps
77+
import pandas as pd
78+
79+
data = pd.read_csv('dataset.csv')
80+
props = GridProps(data)
81+
props.theme = 'https://cdn.syncfusion.com/ej2/22.1.34/fluent.css'
82+
83+
GridComponent(props)
84+
```
85+
86+
Ensure that terminal is in the correct project directory where **demo.py** is located. Run the application using the following command:
87+
88+
```sh
89+
streamlit run demo.py
90+
```
91+
92+
The output will appear as follows:
93+
94+
![demo](images/ej2_streamlit_grids_demo.png)
95+
96+
## Grid features demo
97+
98+
The Grid component is rendered along with some additional features in the **demo.py** file located in the **demos** folder. The resulting output with these features will be displayed as depicted below:
99+
100+
![demo](images/ej2_streamlit_grids_demos.gif)

‎dataset.csv

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
OrderID, CustomerName, OrderDate, Freight, ShippedDate, ShipCountry
2+
10248, Paul Henriot, 7/4/1996, 32ドル.38, 7/16/1996, France
3+
10249, Karin Josephs, 7/5/1996, 11ドル.61, 7/10/1996, Germany
4+
10250, Mario Pontes, 7/8/1996, 65ドル.83, 7/12/1996, Brazil
5+
10251, Mary Saveley, 7/8/1996, 41ドル.34, 7/15/1996, France
6+
10252, Pascale Cartrain, 7/9/1996, 51ドル.30, 7/11/1996, Belgium
7+
10253, Mario Pontes, 7/10/1996, 58ドル.17, 7/16/1996, Brazil
8+
10254, Yang Wang, 7/11/1996, 22ドル.98, 7/23/1996, Switzerland
9+
10255, Michael Holz, 7/12/1996, 148ドル.33, 7/15/1996, Switzerland
10+
10256, Paula Parente, 7/15/1996, 13ドル.97, 7/17/1996, Brazil
11+
10257, Carlos Hernández, 7/16/1996, 81ドル.91, 7/22/1996, Venezuela
12+
10258, Roland Mendel, 7/17/1996, 140ドル.51, 7/23/1996, Austria
13+
10259, Francisco Chang, 7/18/1996, 3ドル.25, 7/25/1996, Mexico
14+
10260, Henriette Pfalzheim, 7/19/1996, 55ドル.09, 7/29/1996, Germany
15+
10261, Bernardo Batista, 7/19/1996, 3ドル.05, 7/30/1996, Brazil
16+
10262, Paula Wilson, 7/22/1996, 48ドル.29, 7/25/1996, USA

‎images/ej2_streamlit_grids_demo.png

30.4 KB
Loading[フレーム]

‎images/ej2_streamlit_grids_demos.gif

2.72 MB
Loading[フレーム]

0 commit comments

Comments
(0)

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