Mui-datatables: Buttons in columns

[JordanKadish]

Issue

Not sure how possible this would be, but I am trying to have a column containing a "preview" button for each row, such that when the button is clicked, I open a preview frame displaying a picture and other details related to a row item.

Example: row contains {preview: <material ui preview button>, name: "John", occupation: "miner"}
On preview click, the data in the current row is sent to an iframe/window/popup that is populated with information relating to the row (for example, a templated html page talking about miners and people named John in this case)
When I try to directly push a material-ui button component into the rows, I get an error

TypeError: t[r] is undefined
in t (created by WithStyles(t)) in WithStyles(t)

Is there a known way to insert this kind of button into each row and relate it to the row, or would this be functionality that needs to be added?

[gregnb]

so @tgBryanBailes sent over a PR just tonight about being able to embed components. We're still fleshing out some last minute details but what you'll be able todo is something like this:

      {
        name: "Preview Button",
        options: {
          filter: true,
          display: (index, value) => {
            const rowData = data[index];
            return (
              <SomeCustomComponent rowData={rowData} />
            );
          },
      }

[JordanKadish]

Ok so are you saying each row would have an object like this pushed under the cell index of the "preview button" column (in the example) where <SomeCustomComponent rowData={rowData} /> would be a subcomponent rendered within the table cell?

[gregnb]

Yes, once we settle everything on this PR each column will have the ability to override it's cell display. In your case, where you want this preview button to appear you will be able to render a custom component there.

[gregnb]

I've published 1.1.5 which now has a property for customized columns called 'customRender' and I think this will fit your needs. An example of how you would use it can be found here