bannerism / streamlit_awesome_table

Table with many features for Streamlit. This component use Bootstrap and FontAwesome.

Awesome Table for Streamlit

---

Awesome table is a component to use with (Streamlit)[https://github.com/streamlit/streamlit] with order and search components.

Installing AwesomeTable using PiP

pip install streamlit-awesome-table

Examples

Create a simple table

View complete source here

import pandas as pd
from awesome_table import AwesomeTable

sample_data = {...}

AwesomeTable(pd.json_normalize(sample_data))

Create a table with columns

View complete source here

import pandas as pd
from awesome_table import AwesomeTable
from awesome_table.columns import Column

sample_data = {...}

AwesomeTable(pd.json_normalize(sample_data), columns=[
    Column(name='id', label='ID'),
    Column(name='name', label='Name'),
    Column(name='job_title', label='Job Title'),
    Column(name='avatar', label='Avatar'),
    Column(name='_url.social_media', label='Social Media'),
    Column(name='_url.document', label='Document'),
])

Create a table with icon button

View complete source here

import pandas as pd
from awesome_table import AwesomeTable
from awesome_table.columns import (Column, ColumnDType)

sample_data = {...}

AwesomeTable(pd.json_normalize(sample_data), columns=[
    Column(name='id', label='ID'),
    Column(name='name', label='Name'),
    Column(name='job_title', label='Job Title'),
    Column(name='avatar', label='Avatar'),
    Column(name='_url.social_media', label='Social Media', dtype=ColumnDType.ICONBUTTON, icon='fa-solid fa-share-nodes'), ## From FontAwesome v6.0.0
    Column(name='_url.document', label='Document', dtype=ColumnDType.DOWNLOAD),
])

Create a table with order

View complete source here

import pandas as pd
from awesome_table import AwesomeTable
from awesome_table.columns import (Column, ColumnDType)

sample_data = {...}

AwesomeTable(pd.json_normalize(sample_data), columns=[
    Column(name='id', label='ID'),
    Column(name='name', label='Name'),
    Column(name='job_title', label='Job Title'),
    Column(name='avatar', label='Avatar'),
    Column(name='_url.social_media', label='Social Media', dtype=ColumnDType.ICONBUTTON, icon='fa-solid fa-share-nodes'), ## From FontAwesome v6.0.0
    Column(name='_url.document', label='Document', dtype=ColumnDType.DOWNLOAD),
], show_order=True)

Create a table with search

View complete source here

import pandas as pd
from awesome_table import AwesomeTable
from awesome_table.columns import (Column, ColumnDType)

sample_data = {...}

AwesomeTable(pd.json_normalize(sample_data), columns=[
    Column(name='id', label='ID'),
    Column(name='name', label='Name'),
    Column(name='job_title', label='Job Title'),
    Column(name='avatar', label='Avatar'),
    Column(name='_url.social_media', label='Social Media', dtype=ColumnDType.ICONBUTTON, icon='fa-solid fa-share-nodes'), ## From FontAwesome v6.0.0
    Column(name='_url.document', label='Document', dtype=ColumnDType.DOWNLOAD),
], show_search=True)

Create a table with sidebar

View complete source here

import pandas as pd
from awesome_table import AwesomeTable
from awesome_table.columns import (Column, ColumnDType)

sample_data = {...}

AwesomeTable(pd.json_normalize(sample_data), columns=[
    Column(name='id', label='ID'),
    Column(name='name', label='Name'),
    Column(name='job_title', label='Job Title'),
    Column(name='avatar', label='Avatar'),
    Column(name='_url.social_media', label='Social Media', dtype=ColumnDType.ICONBUTTON, icon='fa-solid fa-share-nodes'), ## From FontAwesome v6.0.0
    Column(name='_url.document', label='Document', dtype=ColumnDType.DOWNLOAD),
], show_order=True, show_search=True, show_search_order_in_sidebar=True)

Create a table with image

View complete source here

import pandas as pd
from awesome_table import AwesomeTable
from awesome_table.columns import (Column, ColumnDType)

sample_data = {...}

AwesomeTable(pd.json_normalize(sample_data), columns=[
    Column(name='id', label='ID'),
    Column(name='name', label='Name'),
    Column(name='job_title', label='Job Title'),
    Column(name='avatar', label='Avatar', dtype=ColumnDType.IMAGE),
    Column(name='_url.social_media', label='Social Media', dtype=ColumnDType.ICONBUTTON, icon='fa-solid fa-share-nodes'), ## From FontAwesome v6.0.0
    Column(name='_url.document', label='Document', dtype=ColumnDType.DOWNLOAD),
], show_search=True, show_order=True)