gregnb / gregnb/mui-datatables

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

Open
#1,022 4 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.7k
Forks
906
PR merge metrics
No merged PRs in 30d

Description

@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
this.showPixel(pixelsList.pixels[value])}>comment this.edit(pixelsList.pixels[value])}>edit,
])
}
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 | |

Contributor guide

No contributing guide indexed for this repository

Research direction

The issue builds rows in `this.srcData` for server-side rendering and includes anchor and button-like actions in the final cell. Start by reproducing the console error with the linked CodeSandbox and the shown row data, then inspect how the table handles cell values and custom body renderers. Done means the action links render without the console error and the expected row data remains usable.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.