def _aggrid_style(self): '''Style the cells based on value''' a = """ function(params) { if (params.error != '') { return { 'color': 'white', 'backgroundColor': 'darkred' } } }; """ return JsCode(a)
def _aggrid_style_rows(self, df: pd.DataFrame): '''Style the cells based on value''' if 'error' in df.columns: a = """ function(params) { if (params.data.error !== '') { return { 'color': 'white', 'backgroundColor': 'red' } } }; """ else: a = """ function(params) { return { 'backgroundColor': 'white' } }; """ return JsCode(a)
session_state.Session = False st.experimental_rerun() st.header('Tu historial de reviews') Summary_Rev, Product_Detail = st.beta_columns(2) with Summary_Rev: user_Rev = mt.get_UserRev(userName) gb = GridOptionsBuilder.from_dataframe(user_Rev) cellsytle_jscode = JsCode(""" function(params) { if (params.value == 'A') { return { 'color': 'white', 'backgroundColor': 'darkred' } } else { return { 'color': 'black', 'backgroundColor': 'white' } } }; """) gb.configure_selection('single', use_checkbox=False) gb.configure_grid_options(domLayout='normal') gridOptions = gb.build() grid_response = AgGrid( user_Rev, gridOptions=gridOptions, height=280,
BtnCellRenderer = JsCode(''' class BtnCellRenderer { init(params) { this.params = params; this.eGui = document.createElement('div'); this.eGui.innerHTML = ` <span> <button id='click-button' class='btn-simple' style='color: ${this.params.color}; background-color: ${this.params.background_color}'>Click!</button> </span> `; this.eButton = this.eGui.querySelector('#click-button'); this.btnClickedHandler = this.btnClickedHandler.bind(this); this.eButton.addEventListener('click', this.btnClickedHandler); } getGui() { return this.eGui; } refresh() { return true; } destroy() { if (this.eButton) { this.eGui.removeEventListener('click', this.btnClickedHandler); } } btnClickedHandler(event) { if (confirm('Are you sure you want to CLICK?') == true) { if(this.params.getValue() == 'clicked') { this.refreshTable(''); } else { this.refreshTable('clicked'); } console.log(this.params); console.log(this.params.getValue()); } } refreshTable(value) { this.params.setValue(value); } }; ''')
"minWidth": 150 }, { "field": "duration", "valueFormatter": "x.toLocaleString() + 's'" }, { "field": "switchCode", "minWidth": 150 }, ], "defaultColDef": { "sortable": True, "flex": 1, }, }, # get the rows for each Detail Grid "getDetailRowData": JsCode("""function (params) { console.log(params); params.successCallback(params.data.callRecords); }""").js_code, }, } r = AgGrid(df, gridOptions=gridOptions, height=500, allow_unsafe_jscode=True, enable_enterprise_modules=True, update_mode=GridUpdateMode.SELECTION_CHANGED)
data = get_data_ex7() gb = GridOptionsBuilder.from_dataframe(data) #make all columns editable gb.configure_columns(list('abcde'), editable=True) js = JsCode(""" function(e) { let api = e.api; let rowIndex = e.rowIndex; let col = e.column.colId; let rowNode = api.getDisplayedRowAtIndex(rowIndex); api.flashCells({ rowNodes: [rowNode], columns: [col], flashDelay: 10000000000 }); }; """) gb.configure_grid_options(onCellValueChanged=js) go = gb.build() st.markdown(""" ### JsCode injections Cell editions are highlighted here by attaching to ```onCellValueChanged``` of the grid, using JsCode injection ```python js = JsCode(...)
def _aggrid_style_rows(self): '''Style the cells based on value''' table = self._state.table style_dict = { 'bgp': """ function(params) { if (params.data.state === 'NotEstd') { return { 'color': 'white', 'backgroundColor': 'red' } } }; """, 'device': """ function(params) { if (params.data.status === 'dead') { return { 'color': 'white', 'backgroundColor': 'red' } } else if (params.data.status === 'neverpoll') { return { 'color': 'white', 'backgroundColor': 'darkred' } } }; """, 'arpnd': """ function(params) { if (params.data.state === 'failed') { return { 'color': 'white', 'backgroundColor': 'red' } } }; """, 'vlan': """ function(params) { if (params.data.state != 'active') { return { 'color': 'white', 'backgroundColor': 'red' } } }; """, 'sqPoller': """ function(params) { if (params.data.status != 0 && params.data.status != 200) { return { 'color': 'white', 'backgroundColor': 'red' } } }; """, 'interfaces': """ function(params) { if (params.data.state === 'down') { return { 'color': 'white', 'backgroundColor': 'red' } } else if (params.data.state === 'notConnected') { return { 'color': 'black', 'backgroundColor': 'gray' } } else if (params.data.state === 'errDisabled') { return { 'color': 'white', 'backgroundColor': 'darkred' } } }; """, 'inventory': """ function(params) { if (params.data.status == 'absent') { return { 'color': 'black', 'backgroundColor': 'gray' } } }; """, 'default': """ function(params) { return { 'backgroundColor': 'white' } }; """ } style_dict['evpnVni'] = style_dict['interfaces'] style_dict['address'] = style_dict['interfaces'] a = style_dict.get(table, style_dict['default']) return JsCode(a)