Mui-datatables: Any Example for data without object especially when we use 'a' tag or button in data?

[T-pirithiviraj]

@gabrielliwerant , Can you provide us the example for changing an object to data if we use button or 'a' tag? Because many of them are using 'a' tags as @acberk said.
I have already seen this example --> https://codesandbox.io/s/muidatatables-custom-toolbar-bsb81?fontsize=14. I can't understand how to use it if we have 'a' or 'button' in last column as data.

Expected Behavior

Passing data without object.

Current Behavior

getting console error if we have 'a' tag and button inside data.

Steps to Reproduce (for bugs)

1. Render the dataTable serverside .
   2.An error in console stating that we can't pass object inside data.

This is my code for your reference.

var pixelsList = this.props.allPixelList;
    this.srcData = [];
for(let value in pixelsList.pixels) {                  //Populating API response table value in DataTable
                this.srcData.push([
                    pixelsList.pixels[value].reAlias,
                    pixelsList.pixels[value].cookieGroup,
                    pixelsList.pixels[value].trackerType,
                    (pixelsList.pixels[value].action).toLowerCase(),
                    pixelsList.pixels[value].expiryDays,
                    pixelsList.pixels[value].maxTerms,
                    pixelsList.pixels[value].creationDate 
                    <span className="row-options"><a onClick={() => this.showPixel(pixelsList.pixels[value])}><Icon className='comment' title='Email pixel'>comment</Icon></a><a onClick={() => this.edit(pixelsList.pixels[value])}><Icon className='mediumIcon' title='Update'>edit</Icon></a></span>,
                ])
            }
            const data = this.srcData;

This is how I am populating data in server side rendering. I am not using custom body renderer also. How can I convert this to data ? If anything is wrong please guide me since I am new to react and this library.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | |
| MUI-datatables | 2.12.3 |
| React | |
| browser | chrome |
| etc | |

[acberk]

The library prefers that you pass only your data value in the srcData object, and then use customBodyRender to create the custom HTML for that column.

https://github.com/gregnb/mui-datatables/blob/master/examples/component/index.js#L81

[gabrielliwerant]

Yes, as @acberk is saying, don't put the html in your data, just use the value and then build the anchor tag in the customBodyRender, like so:

(psuedocode)

const data = [
  {"name": "Bob, "url": "http://bob_xyz.com"}
];

const columns = [
  {
    "name": "Name"
  },
  {
    "name": "Link",
    options: {
      customBodyRender: url => <a href=`${url}`>link</a>
    }
  }
];

If you want more than one piece of data in your custom render function to be correlated to a single data cell, then you can use the strategy in my example, where you have an id and a separate object and you use one to find data from the other.

[T-pirithiviraj]

Thanks, @gabrielliwerant and @acberk . As you said we can keep it in custom body renderer for tags. I have a case like I need to pass the entire data object from API to custom body renderer in case of the edit.
For example, I am keeping the edit icon in a custom body renderer. The last column I am just having edit Icon no data should be displayed.

Inside data, I am looping through my object and separating it as an individual row.
const data =  [
     [ 'name' , 'age', 'salary', and last column previously I am passing entire API object 
     to custom body renderer for edit case ], ... 
].

For example, let's say I have an API like {0:{id:1, name: 'prithi', age:22, salary: 13k},1: {id:2, name:'suriya', age:23, salary: 15k}, ...} 



md5-2e51d642666e674aea427bf35c0c85a8



customBodyRender: (value, tableMeta, updateValue) => {
                  return (   
                       <EditLabel rowData={value} key={`edit${value.id}`}/>
                  ) 
}  

if you give a code sample for my example 'edit' where I want to pass an entire object to custom body renderer with name, id, age everything it will be really helpful.
If you are not clear about my doubt I'll provide you with the sample code. Again thanks for explaining to me.