Ag-Grid component with input support

Custom Components streamlit-aggrid
99

All these features are already possible using JSCode:

  • Clickable URL put the URL in one of the fields:

      link_jscode = JsCode("""
  function(params) {
  	var element = document.createElement("span");
  	var linkElement = document.createElement("a");
  	var linkText = document.createTextNode(params.value);
  	link_url = params.value;
  	linkElement.appendChild(linkText);
  	linkText.title = params.value;
  	linkElement.href = link_url;
  	linkElement.target = "_blank";
  	element.appendChild(linkElement);
  	return element;
  };
  """)

  gb.configure_column("url", cellRenderer=link_jscode)

  • Larger row size:

gb.configure_grid_options(rowHeight=90)

  • Image thumbnail: Put the image URL in one field:

    image_jscode = JsCode("""
    function(params) {
    image_url = “https://<IMGAE_URL>/” + params.value;
    return {
    ‘background-image’:‘url("’ + image_url + ‘")’,
    ‘background-repeat’: ‘no-repeat’,
    ‘background-position’: ‘center’,
    ‘color’: ‘transparent’
    }
    };
    “”")
    gb.configure_column(“image”, cellStyle=image_jscode)

1 Like