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]);
                    }}
                />
                </>
            )
        }
    }
]