Introducing the New Syncfusion Grid Component for Streamlit

Jollen Moyani - Aug 23 '23 - - Dev Community

There’s been a remarkable surge in tools and techniques to simplify web development in the evolving landscape of web applications. Among these advancements, Streamlit shines as one of the standout options. It’s a Python library that allows the creation of single-page apps with minimal effort, boasting features that induce optimism about the future of web development. Notably, Streamlit seamlessly integrates with machine learning and data science apps.

In this blog, we’ll briefly introduce the Streamlit framework and delve into the new Syncfusion Grid component designed for it.

Getting acquainted with Streamlit

Streamlit is an open-source Python library. It is a game changer for crafting custom web apps tailored for data science and machine learning. Its versatile components allow seamless integration, enabling the swift creation of instant web apps within minutes. A standout feature is that developers can construct web apps without an extensive understanding of web development intricacies.

Exploring Syncfusion components

As we all know, Syncfusion is a provider of enterprise-class development components and libraries. It delivers an array of UI, reporting, and business intelligence functionalities across major web platforms. Renowned for high performance, elegant user interface controls, sophisticated reporting, and comprehensive functionality, Syncfusion’s offerings cater to diverse app needs.

Syncfusion’s support for the Streamlit platform came with the introduction of the ej2-streamlit-grids Python package. This package encapsulates the complete Streamlit Grid component.

Diving into the Streamlit Grid component

The Syncfusion Streamlit Grid component is a robust tool designed to handle data manipulation and presentation in tabular form. Its rich feature set encompasses data binding, sorting, grouping, editing, filtering, dragging, resizing, and exporting to Excel and PDF formats.

Key features and benefits

The Syncfusion Grid component includes a plethora of features that are critical for data-driven apps:

  • High performance : The Grid can load millions of records in less than a second.
  • Responsive design : The Grid is responsive across various devices, including tablets, desktops, and phones.
  • Effortless export and printing : Export data to Excel, PDF, and CSV formats and seamlessly print rows across multiple pages.
  • Flexible editing : Create, read, update, and delete entries in the Grid.
  • Customizable themes : Choose from preconfigured themes like Fluent, Tailwind CSS, Bootstrap, Material, and Fabric and then customize them further.
  • Filtering : Easily view records that meet certain criteria using rich filtering options.
  • Paging : Efficiently view segments of data from the connected source with a customizable pager UI.
  • Row drag and drop : Rearrange rows within the same Grid with seamless drag-and-drop functionality.
  • Sorting : Sort rows in ascending or descending order by clicking their header.

Seamless integration and usage

Incorporating the Syncfusion Streamlit Grid component into your Streamlit app is simple. It requires just a few lines of Python code. This integration opens diverse avenues for showcasing data visualization and manipulation capabilities, enhancing your app’s overall performance and user experience.

Refer to the following code.

[Python]
from ej2_streamlit_grids import SfGrid, GridProps
import pandas as pd

data = pd.read_csv('https://raw.githubusercontent.com/SyncfusionExamples/Getting-started-with-Syncfusion-Grid-component-in-Streamlit-app/master/dataset.csv')
props = GridProps(data)

SfGrid(props)
Enter fullscreen mode Exit fullscreen mode

After executing the previous code, the Syncfusion Grid component will appear in the Streamlit app, as shown in the following image.

Syncfusion Streamlit Grid component

Syncfusion Streamlit Grid component

References

For more details, refer to the Syncfusion Streamlit Grid component GitHub documentation and the component Python package.

Conclusion

Thanks for reading! In this blog, we’ve explored the features of the new Syncfusion Streamlit Grid component. Try it out now and leave your feedback in the comment section below!

Are you already a Syncfusion user? You can download the product setup here. If you’re not a Syncfusion user, you can download a free 30-day trial here.

You can also contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Related blogs

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .