GigaTables / reactables

GigaTables is a ReactJS plug-in to help web-developers process table-data in applications and CMS, CRM, ERP or similar systems.
MIT License
144 stars 30 forks source link

Is there a way to have an in-place edit link in a column ? #88

Open MichaelF77 opened 6 years ago

MichaelF77 commented 6 years ago

I'd like to do something like this:

          columnOpts: [
             {
               render: function (data, row, type) {
                 return (<div>
                    <a href="#" onClick={that.handleEdit} id={"bEdit" + data} recordid={edit}>Edit</a>
                    </div>);
               },
               target: "recordid"
           }
           ]

And when clicking "edit" - invoke editor just like "edit" button does in the top-left corner, but for selected row only.

arthurkushman commented 6 years ago

GT have 3 options:

PS it seems like a duplicate functionality to trigger pop-up either on pressing buttons in the buttons bar and in the row/cell, probably you have a good example and maybe I can see other profits from this proposal, if u can show this by providing a ref - would be great.

MichaelF77 commented 6 years ago

For my use case I need a popup but I do not need an Edit button for two reasons: (1) It requires 2 clicks (select - click) (2) Not all rows are editable, only some of them should be. By implementing self-supported function in column render I can control it based on data (flag from the server). But I can't figure out a way to call "Edit" functionality programmatically short of manually selecting the row that was clicked on and then imitating edit click, but that requires having an edit button. Can you please point me towards a method that can be called to initiate popup edit ?

arthurkushman commented 6 years ago

I think from this point of view/example u can do anything:

    columnOpts: [
        {
            render: (data, row, type) => (
                <div>
                    <form method="post" action="">
                        <input type="hidden" name="action" value="forms"/>
                        <input type="hidden" name="id" value={row.id}/>
                        <div>{data}</div>
                        <button onClick={function(e) {
                            e.preventDefault();
                            console.log("I'm flying away... weeee");
                            console.log(data); // the cell data
                            console.log(row); // the entire row
                            console.log(type); // the column type ex.: title, description etc
                        }}>Send</button>
                    </form>
                </div>),

moreover as it is a closure you can see any data up-down.

MichaelF77 commented 6 years ago

What I need is a way to invoke Gigtables edit dialog. Something like this.showEditDialogForRow(row.id) And have the dialog configured in the "edit" pop up.