Streamlit MUI Table

This is a Streamlit custom component that brings Material UI Table component to your Streamlit apps. It allows to show a simple table in the MUI style. There are some parameters that can be used to customize the table. However, by no means this component is a full implementation of the MUI Table component. It is just a simple table that can be used to show data in a nice way. The most advanced features is that "detailColumns" can be defined that are shown when a row gest "expanded".

Check out the live demo!

Installation

To install st_mui_table, you can use pip:

pip install st_mui_table

Usage

To use the sst_mui_table component, you just need to import it in your Streamlit script and call it like any other Streamlit function:

from st_mui_table import st_mui_table

st_mui_table(
    df,
    enablePagination=True,
    customCss="",
    paginationSizes = [5,10,25],
    size="medium",
    padding="normal",
    showHeaders=True,
    key="mui_table",
    stickyHeader=True,
    paperStyle={ "width": '100%',  "overflow": 'hidden',"paddingBottom": '1px', "border": '2px solid rgba(224, 224, 224, 1)'},
    detailColumns=[],
    detailColNum=1,
    detailsHeader="Details",
    showIndex=False
    
)

Note worthy

All HTML content will be correctly interpreted and rendered! Meaning if there is something like <b>bold</b> in the dataframe, it will be rendered as bold text. Keep that in mind if users can directly influence the content of the table.

Parameters

• df: The dataframe to be shown in the table.
• enablePagination: If True, pagination is enabled. Default: True
• paginationLabel: Label of the pagination. Default: "Rows per page:"
• showLastButtonPagination: If True, the last button is shown in the pagination (skip to last page). Default: True
• showFirstButtonPagination: If True, the first button is shown in the pagination (skip to first page). Default: True
• customCss: Custom CSS to be applied to the table. Can just be a string like .MuiTableCell-root {color:red;} Default: "". The text will be rendered in <style> tags above the component.
• paginationSizes: List of integers that define the number of rows per page. Default: [5,10,25] - The first number defined the amount of rows that will be displayed when the table first renders
• size: Size of the table. Can be "small", "medium" or "large". Default: "medium"
• padding: Padding of the table. Can be "normal", "checkbox" or "none". Default: "normal"
• minHeight: Minimun height of the table. Default: None - If the height is not reached, the table will be streched
• maxHeight: Maximum height of the table. Default: None - If the height is exceeded, the table will be scrollable
• showHeaders: If True, the headers of the table are shown. Default: True
• key: Key of the component. Default: "mui_table"
• stickyHeader: If True, the header of the table is sticky. Default: True
• paperStyle: Dictionary with the style of paper on which the table is on. Default: { "width": '100%', "overflow": 'hidden',"paddingBottom": '1px', "border": '2px solid rgba(224, 224, 224, 1)'}
• detailColumns: List of columns that will be shown when a row is expanded. Default: [] - All Column in this list will not be displayed in the "normal" table anymore.
• detailColNum: Structure of the columns in the details seciont. If 1 all details will be shown beneath each other. If 2, the details will be shown in two columns. If the 3 details will be shown in three columns. Default: 1...
• detailsHeader: Header of the details section. Default: "Details"
• showIndex: If True, the index of the dataframe should be shown. Default: False