How to put a button inside a agGrid

Dash Python
1

Hi guys, this is my code, but it’s ugly and not functional, is there a way that I can put a button literally inside a cell so that hover and icons work, remembering that the most I can use is dash, python , js and css

dag.AgGrid(
    id='data-table',
    className="ag-theme-alpine selection",
    columnDefs=[
        # Definição específica para a coluna 'Ação'
        {
            'headerName': 'Button', 
            'field': 'Button',
            'editable': False,
            'wrapText': False,
            'autoHeight': True,
            "cellClass": 'button-70',
        }
    ]+[
        {'headerName': i, 'field': i, 'editable': False, 'wrapText': False, 'autoHeight': False, "cellClass": 'center-aligned-cell', } for i in summary.columns if i not in ['x_coord', 'y_coord', 'Unique ID', 'Button'] #
    ],
    rowData=summary.to_dict("records"),
    columnSize="sizeToFit",
    selectedRows=[],
    defaultColDef={
        "filter": True,  # filtragem para todas as colunas
        "sortable": True,  # ordenação para todas as colunas
        "resizable": True,  # redimensionar colunas
        "headerClass": 'center-aligned-header',
        "autoHeaderHeight": True,
        "wrapHeaderText": True,
    },
    dashGridOptions={
        "pagination": True,
        "animateRows": True, 
        "alwaysMultiSort": True,
        "rowSelection": "multiple",
        "rowMultiSelectWithClick": True
    },  
  ),

and the css of the UGLY button hahahahah

.button-70 {
  background-image: linear-gradient(#0dccea, #0d70ea);
  border: 0;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, .3) 0 5px 15px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-family: Montserrat,sans-serif;
  font-size: .9em;
  margin: 2px;
  padding: 5px 3px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

Helps pls!

2

The way how I did is, add cellRender in the colDefs for the column you want to convert to a button

 {
   "field": "field_name",
   "cellRenderer": "launchBtn"
}

and what you pass is actually the javascript function name which you use to convert the cell into a button.

This is how the javascript look like, just put it inside a js file in the assets folder.

var dagcomponentfuncs = (window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {});

dagcomponentfuncs.launchBtn = function (props) {
    console.log('launchBtn', props)
    return React.createElement('a',
    {   target: '_blank',
        href: props.value,
        className: `block h-[40px] text-center text-md text-white rounded no-underline cursor-pointer hover:bg-blue-600`
    }, 'Launch')
};

this is how it looks like

image
image754×1298 136 KB

Also official tutorial: Cell Renderer Components | Dash for Python Documentation | Plotly

image
image3000×1496 457 KB

3 Likes
3

Thank you very much my friend, I had tried but from the documentation codes apparently I had done something wrong, MY HERO, thank you very much!!

1 Like