Adding HTML element inside a object

Question

I'm using this array state to render Infos on a table:

As you guys can see, i need to put a copy button on every row of the table, but i tried inserting the HTML directly to the object it self, but it failed:

What can I do to show this copy button on every row of the table?
Thanks in advance.

You table component is converting the collumn value toString. Which library are you using to render that table? — uke, Dec 12 '20 at 04:21
See this answer https://stackoverflow.com/questions/64331095/how-to-add-a-button-to-every-row-in-material-ui-table about how to implement custom cell renderer — uke, Dec 12 '20 at 04:35
add sample code in [codesandbox](https://codesandbox.io/) for debugging is great. — A.R.SEIF, Dec 12 '20 at 07:32
Can you guys help me? I dont figured it out how to do it with the answer from @uke, heres the codesandbox: https://codesandbox.io/s/wizardly-worker-t3yzd?file=/src/App.js — evilworld, Dec 12 '20 at 13:33

lissettdm · Accepted Answer · 2020-12-13T02:52:44.910

1

This:

renderCell: (ValueFormatterParams) => {
  <a href="#">Oi </a>; // you are missing return statement
}

should be:

renderCell: (ValueFormatterParams) => {
  return (<a href="#">Oi </a>); 
}

or:

 renderCell: (ValueFormatterParams) => ( <a href="#">Oi </a>)

EDIT: Getting data from row:

  copyHanle = (item) => {
    console.log(item);
  }
  
  //...
  render() {
   const columns = [
      //...
      renderCell: (ValueFormatterParams) => {
         const {row} = ValueFormatterParams;
         return (
            <CopyToClipboard
              text={row.name}
              onCopy={() => this.setState({ copied: true })}
             >
             <button>Copy</button>
          </CopyToClipboard>)
    }
   ]
   //...
  }

See: https://material-ui.com/components/data-grid/rendering/#render-cell

edited Dec 13 '20 at 02:52

answered Dec 12 '20 at 15:54

lissettdm

12,267
1
18
39

I am happy to help. – lissettdm Dec 13 '20 at 00:39
can you help me with one more thing? im trying to render the button on each row so i can copy the nickname from the user of the row, but im having problems, because all buttons are being rendered on each row, as you can see here: https://codesandbox.io/s/wizardly-worker-t3yzd?file=/src/App.js I tried with forEach too but it didnt work Thanks in advance – evilworld Dec 13 '20 at 01:51
Sure, see my edit. Is this what you are trying to get? – lissettdm Dec 13 '20 at 02:26
Sorry. I sent the wrong sandbox link. Check this https://codesandbox.io/s/funny-rgb-0qhhu?file=/src/App.js line 135. for debugging, use world gentebra, elder druid, min level 8 highest 1000, you will see that its generating every row button on every cell, i need to render only the specific button on each cell. right now if i have 50 registers, it wil render 50 copy button on each cell, containing the button of each register – evilworld Dec 13 '20 at 02:46
You don't need the map function, see the edit, also from ValueFormatterParams you can get the user data. Try console.log(ValueFormatterParams), and you will see the data you need. – lissettdm Dec 13 '20 at 02:54
Thank you very much for your help – evilworld Dec 13 '20 at 02:58

Adding HTML element inside a object

1 Answers1