Adding images with onRowAdd

[RitchieP]

Hi, I would like to know if it's possible to add an image with onRowAdd.

Currently, when I add another row, it will look something like this

I'm wondering if it's possible to maybe have it open up a file browser and choose a photo from there. And how do I actually go about implementing it.

Appreciate for any help in advance!

[RitchieP]

I'm able to work my way to make this work. I figured out that there is a editComponent prop for the columns to make your own custom edit component. Check for more details about it here in the original mbrn documentation. Hence I am able to simply use an input tag like this

const columns = [ { title: "Image", field: "img", render: rowData => <img className="hover:scale-[3] transition duration-500" src={rowData.img} style={{width: 50}}/>, editComponent: props => { return( <> <input type="file" accept="image/jpeg, image/png, image/jpg" onChange={e => { props.onChange(e.target.files[0]); }} /> </> ) } } ]