Ag-Grid component with input support

Custom Components streamlit-aggrid
329

@C45513 , @imClumsyPanda @maarten-betman here is my preliminar solution:
1- copy the class DatePicker from the aggrid documentation Cell Editors, last example, look at the main.js ( JavaScript Data Grid: Cell Editors (ag-grid.com))

DatePicker = JsCode("""
class DatePicker {
  // gets called once before the renderer is used
  init(params) {
    // create the cell
    this.eInput = document.createElement('input');
    this.eInput.value = params.value;
    this.eInput.classList.add('ag-input');
    this.eInput.style.height = '100%';
    
    
    // https://jqueryui.com/datepicker/    
    $(this.eInput).datepicker({
      dateFormat: 'dd/mm/yy',
      onSelect: () => {
        this.eInput.focus();
      },
    });
  }

  // gets called once when grid ready to insert the element
  getGui() {
    return this.eInput;
  }

  // focus and select can be done after the gui is attached
  afterGuiAttached() {
    this.eInput.focus();
    this.eInput.select();
  }

  // returns the new value after editing
  getValue() {
    return this.eInput.value;
  }

}
""")

2- configure your column and set the cellEditor: gb.configure_column('Date_Column', cellEditor=DatePicker, cellEditorPopup=True)

3- Edit the content of the index.html in your library (Lib\site-packages\st_aggrid\frontend\build\index.html) to reference the JQUERY API:

<!doctype html>
<html lang="en">
<head>
  <title>Streamlit-AgGrid</title>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <meta name="theme-color" content="#000000"/>
  <meta name="description" content="Streamlit AgGrid"/>
  <link rel="stylesheet" href="bootstrap.min.css"/>
  <link href="./static/css/2.7fd92936.chunk.css" rel="stylesheet">
  <link href="./static/css/main.a8536b63.chunk.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
  </script>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <script>!function(e){function r(r){for(var n,f,l=r[0],i=r[1],a=r[2],c=0,s=[];c<l.length;c++)f=l[c],Object.prototype.hasOwnProperty.call(o,f)&&o[f]&&s.push(o[f][0]),o[f]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,a||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var i=t[l];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={},o={1:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f.c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="./";var l=this.webpackJsonpfrontend=this.webpackJsonpfrontend||[],i=l.push.bind(l);l.push=r,l=l.slice();for(var a=0;a<l.length;a++)r(l[a]);var p=i;t()}([])
  </script>
  <script src="./static/js/2.40163c18.chunk.js"></script>
  <script src="./static/js/main.506285f1.chunk.js"></script>


</body>
</html>

4- for a Prod environment you may need to write a command in Docker to copy this file and replace the default package file

5- run your Streamlit UI and you should see the calendar in the grid:
image

Note: The only problem is that my calendar is not working properly. Cannot assign the value to the cell and cannot change the month. But is a step closer.

If you have any suggestion or manage to make it work, please share it with the rest of the community.

@PablocFonseca any advice to not overwrite or edit the st_aggrid files to include the JQUERY URL? … any option to do it programmatically as the functions are passed in the index.html body section?

references:

2 Likes