{"id":23061359,"url":"https://github.com/syncfusionexamples/getting-started-with-syncfusion-grid-component-in-streamlit-app","last_synced_at":"2025-08-15T08:32:40.187Z","repository":{"id":98095222,"uuid":"608135253","full_name":"SyncfusionExamples/Getting-started-with-Syncfusion-Grid-component-in-Streamlit-app","owner":"SyncfusionExamples","description":"This repository contains the Syncfusion Grid component example using Streamlit application.","archived":false,"fork":false,"pushed_at":"2024-07-08T12:43:37.000Z","size":19003,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-07-08T15:51:29.678Z","etag":null,"topics":["react","react-grid","streamlit","streamlit-component","syncfusion-react-grid"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SyncfusionExamples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-01T11:52:08.000Z","updated_at":"2024-07-08T12:45:00.000Z","dependencies_parsed_at":"2024-07-08T15:53:52.015Z","dependency_job_id":null,"html_url":"https://github.com/SyncfusionExamples/Getting-started-with-Syncfusion-Grid-component-in-Streamlit-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2FGetting-started-with-Syncfusion-Grid-component-in-Streamlit-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2FGetting-started-with-Syncfusion-Grid-component-in-Streamlit-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2FGetting-started-with-Syncfusion-Grid-component-in-Streamlit-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2FGetting-started-with-Syncfusion-Grid-component-in-Streamlit-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SyncfusionExamples","download_url":"https://codeload.github.com/SyncfusionExamples/Getting-started-with-Syncfusion-Grid-component-in-Streamlit-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229901552,"owners_count":18141741,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-grid","streamlit","streamlit-component","syncfusion-react-grid"],"created_at":"2024-12-16T03:17:18.060Z","updated_at":"2024-12-16T03:17:18.610Z","avatar_url":"https://github.com/SyncfusionExamples.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Getting Started with the Syncfusion Grid component in the Streamlit Application\n\nThis 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.\n\n`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.\n\n## Setting up the Streamlit application\n\nTo 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:\n\n```bash\npython -m venv my-app\n```\n\nUpon completing the aforementioned step to create **my-app**, run the following command to install Streamlit:\n\n```bash\ncd my-app\npip install streamlit\n```\n\nNow that **my-app** is ready to run with default settings, let's add Syncfusion Grid component to the application.\n\n## Add the Syncfusion Grid package\n\nInstall the Syncfusion Grid component package from [PyPI](https://pypi.org/project/ej2-streamlit-grids/) by executing the following command:\n\n```sh\npip install ej2-streamlit-grids\n```\n\n## Add the Syncfusion Grid component\n\nFollow the below steps to add the Syncfusion Grid component to the Streamlit application:\n\n1\\. Create a Python file named **demo.py** and import the Grid component (`SfGrid`) into the file:\n\n```py\nfrom ej2_streamlit_grids import SfGrid, GridProps\n```\n\n2\\. Create a `CSV` file named **dataset.csv** and populate it with data in the following format:\n\n```sh\nOrderID, CustomerName, OrderDate, Freight, ShippedDate, ShipCountry\n10248, Paul Henriot, 7/4/1996, $32.38, 7/16/1996, France\n10249, Karin Josephs, 7/5/1996, $11.61, 7/10/1996, Germany\n10250, Mario Pontes, 7/8/1996, $65.83, 7/12/1996, Brazil\n10251, Mary Saveley, 7/8/1996, $41.34, 7/15/1996, France\n```\n\n3\\. Read the data from the `CSV` file and initialize the `GridProps` object:\n\n```py\ndata = pd.read_csv('dataset.csv')\nprops = GridProps(data)\n\nSfGrid(Props=props)\n```\n\n## Import Syncfusion CSS styles\n\nYou 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.\n\nYou 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.\n\n```py\nprops.theme = 'https://cdn.syncfusion.com/ej2/26.1.35/fluent.css'\n```\n\n## Run the application\n\nHere is the summarized code for the above steps in the **demo.py** file:\n\n```py\nfrom ej2_streamlit_grids import SfGrid, GridProps\nimport pandas as pd\n\ndata = pd.read_csv('dataset.csv')\nprops = GridProps(data)\nprops.theme = 'https://cdn.syncfusion.com/ej2/26.1.35/fluent.css'\n\nSfGrid(Props=props)\n```\n\nEnsure that terminal is in the correct project directory where **demo.py** is located. Run the application using the following command:\n\n```sh\nstreamlit run demo.py\n```\n\nThe output will appear as follows:\n\n![demo](images/ej2_streamlit_grids_demo.png)\n\n## Grid features demo\n\nThe 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:\n\n![demo](images/ej2_streamlit_grids_demos.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fgetting-started-with-syncfusion-grid-component-in-streamlit-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyncfusionexamples%2Fgetting-started-with-syncfusion-grid-component-in-streamlit-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fgetting-started-with-syncfusion-grid-component-in-streamlit-app/lists"}