import streamlit as st
import pandas as pd
from st_aggrid import AgGrid
# from st_aggrid.grid_options_builder import GridOptionsBuilder
# from st_aggrid.shared import JsCode
# from st_aggrid.shared import GridUpdateMode

num=range(1,10)
data=pd.DataFrame({'A':num,'B':num,'C':num})

gridOptions = {
    "columnDefs": [
        {'headerName':'A列',"field": 'A','width':80,'cellStyle':{'color':'red','textAlign': 'center','font-weight':'bold'}},
        #此外还可以设置minWidth 与maxWidth来控制宽度
        {'headerName':'B列',"field": 'B','width':144,'cellStyle':{'color':'red','textAlign': 'center','font-weight':'bold'}},
        {'headerName':'C列',"field": 'C','width':80,'cellStyle':{'color':'red','textAlign': 'center','font-weight':'bold'}}
    ],
    "defaultColDef": {
        "sortable": True,
        "filter": False,
        # "width":200    #可以设置各行的默认值
    },
}


data_ag = AgGrid(data,  # 数据
                 gridOptions=gridOptions,  # 布局选项
                 # fit_columns_on_grid_load=True,  #此参数会以列宽为比例自动铺满表格
                 allow_unsafe_jscode=True,
                 key=1,
                 custom_css={'.ag-header-cell-text':{'flex':'1','text-align':'center'}})  #此处是设置列名居中

#可配合st.columns来设置表格的整体宽度
c1,c2=st.columns(2)
with c1:
    AgGrid(data,  # 数据
         gridOptions=gridOptions,  # 布局选项
         allow_unsafe_jscode=True,
         key=2,
         custom_css={'.ag-header-cell-text': {'flex': '1', 'text-align': 'center'}})

#铺满表格
c1,c2=st.columns(2)
with c1:
    AgGrid(data,  # 数据
         gridOptions=gridOptions,  # 布局选项
         allow_unsafe_jscode=True,
         fit_columns_on_grid_load=True,
         key=3,
         custom_css={'.ag-header-cell-text': {'flex': '1', 'text-align': 'center'}})

#铺满且居中
c1,c2,c3=st.columns([1,2,1])
with c2:
    AgGrid(data,  # 数据
         gridOptions=gridOptions,  # 布局选项
         allow_unsafe_jscode=True,
         fit_columns_on_grid_load=True,
         key=4,
         custom_css={'.ag-header-cell-text': {'flex': '1', 'text-align': 'center'}})