title: Dynamically cell rendering in ag-grid for polymer 3
body: <p>How should the <a href="https://github.com/ag-grid/ag-grid-polymer-example" rel="nofollow noreferrer">polymer ag-grid example</a> be changed to render instead of "Change me" button, button with dynamic generated text from data model (Toyota, Ford or Porsche)</p>
  
  <p>In my use case I need to add a hyperlink based on the row data and a tooltip on a row.</p>
  
  <p>ag-grid-polymer-example.js:</p>
  
  <pre><code>import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
  import 'ag-grid-polymer';
  
  import ClickableCellRenderer from './clickable-renderer'
  
  class AgGridPolymerExample extends PolymerElement {
  static get template() {
      return html`
          &lt;link rel="stylesheet" href="../node_modules/ag-grid-community/dist/styles/ag-grid.css"&gt;
          &lt;link rel="stylesheet" href="../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css"&gt;
  
          &lt;div style="width: 800px;"&gt;
              &lt;h1&gt;Simple ag-Grid Polymer 3 Example&lt;/h1&gt;
              &lt;ag-grid-polymer style="width: 100%; height: 350px;"
                               class="ag-theme-balham"
                               rowData="{{rowData}}"
                               columnDefs="{{columnDefs}}"
                               components="{{components}}"
                               on-first-data-rendered="{{firstDataRendered}}"
                               &gt;&lt;/ag-grid-polymer&gt;
          &lt;/div&gt;
  `;
  }
  
  constructor() {
      super();
  
      this.columnDefs = [
          {headerName: "Make", field: "make"},
          {headerName: "Model", field: "model"},
          {headerName: "Price", field: "price"},
          {
              headerName: "Clickable Component",
              field: "make",
              cellRendererFramework: 'clickable-renderer'
          }
      ];
  
      this.rowData = [
          {make: "Toyota", model: "Celica", price: 35000},
          {make: "Ford", model: "Mondeo", price: 32000},
          {make: "Porsche", model: "Boxter", price: 72000}
      ];
  
      this.components = {
          clickableCellRenderer: ClickableCellRenderer,
      }
  }
  
  firstDataRendered(params) {
      params.api.sizeColumnsToFit()
   }
  }
  
  customElements.define('ag-grid-polymer-example', AgGridPolymerExample);
  </code></pre>
  
  <p>clicable-renderer.js</p>
  
  <pre><code>    import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
  import 'ag-grid-polymer';
  
  export default class ClickableCellRenderer extends PolymerElement {
      static get template() {
          return html`
              &lt;button style="height: 21px" on-click="click"&gt;Click Me&lt;/button&gt;
          `;
      }
  
      agInit(params) {
          this.params = params;
  
          this.cell = {row: params.value, col: params.colDef.headerName};
      }
  
      click() {
          console.log("Child Cell Clicked: " + JSON.stringify(this.cell));
      }
  }
  
  customElements.define('clickable-renderer', ClickableCellRenderer);
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>    &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"&gt;&lt;/script&gt;
      &lt;script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.noStyle.js"&gt;&lt;/script&gt;
  
      &lt;script type="module" src="ag-grid-polymer-example.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;ag-grid-polymer-example&gt;&lt;/ag-grid-polymer-example&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I guess, I should somehow write template value form <code>agInit()</code>, where I have data i need in "this.params.data" at some path. (?)</p>