Search code examples
reactjsag-gridhtml-inputag-grid-react

is it possible to make AG Grid custom cell editor with <input type="file"/>

I have some tasks to make custom cell editor for ReactJS AG Grid. link

is it possible to make custom cell editor with html file input?

<input type="file">

so users can select files like pictures and show it in the grid

Solution

  • Yes it is possible to use custom component in cell with some configurations like:

               <AggGrid
                .....
                onRowDragEnd={this.handleRowDrag}
                frameworkComponents={{
                    fileRenderer: FileUploadComponent
                }}/>

    header Definition be like 

    [
 ...,
 {headerName: 'Attachment', field: 'file',minWidth: 100, cellRenderer: 
 'fileRenderer'},
...
]

    this at your column named, Attachment with field file it will render fileRender where you provided FileUploadComponent.

    Refer Docs for FrameworkComponents