Injecting JSX

[lotusms]

My table is a little more complicated than simple linear data with a field and a value. I have nested data, for instance I have a media table and one particular media item may contain more than one 1 image listed in an internal array (nested array). I can pull the first image if such array like this (JSX):

<Avatar src={mediaItems.images[0].url} size={40} />

With a json like this

    exports.mediaItems = [
    {
    "name": "HTML5 Script",
    "images": [
        {
            "default": true,
            "id": 1,
            "url": "assets/images/media/html5.png",
            "type": "image"
        },
        {
            "default": false,
            "id": 2,
            "url": "assets/images/media/html5_2.jpg",
            "type": "image"
        }
    ],
        }
    ]

Problem is, I don't see anywhere in your code how to inject JSX. I can do the following per your instructions to pull the Media Names in the json's media key:

 const TABLE_COLUMNS_SORT_STYLE = [
    {
      key: 'name',
      label: 'Media Name',
    },
 ];

However, even if I put the images in a first level (not nested in the media item), it still doesn't render the actual image but the path instead. So this below doesn't work

 const TABLE_COLUMNS_SORT_STYLE = [
    {
      key: 'image',
      label: 'Image',
    },
 ];

with this json

    exports.mediaItems = [
    {
    "name": "HTML5 Script",
    "image":"assets/images/media/html5.png",
        }
    ]

Would something similar to this below be supported?

 const TABLE_COLUMNS_SORT_STYLE = [
    {
      label: 'Image', 
      renderAs: function () {
        return <span><Avatar src={mediaData.images[0].url} size={40} /></span>;
      }
    },
 ];

It is important for me (or other people) to be able to use JSX in the table to be able to add buttons, menus, images, icons, etc.

[fa10]

39

[hyojin]

@lotusms Currently, Not only strings or numbers also you can pass React nodes in your data prop. for example,

...
{
  name: 'Ice cream sandwich',
  calories: '159',
  fat: '6.0',
  ...
  icon: (
    <img
      src='your-resource'
      />
  )
},
...

But I'll check @fa10 's PR and merge soon. :) @fa10 Thanks!

[lotusms]

@hyojin I tried using the method you suggested. I don't think it would work because the data in the json wouldn't be collected in HTML form. It would be collected from input values. Besides, two columns in my table will offer a material ui menu with additional options, info, and links. It would be very helpful if we could have more freedom in the architecture of the table so that we can use JSX in the fields instead of retrieving a key

[hyojin]

@lotusms The example code above is just to show you it can render react components as well. you may need to make some converter in your render function to change your data to react component. anyway, I agree with your idea. I wanted to make it fully stateless component at the first time, but I couldn't. however I will consider to change the architecture at some point.

And material-ui team provides demo code of data tables. this might help you. :) https://material-ui-1dab0.firebaseapp.com/component-demos/tables

[hyojin]

Merged

[lotusms]

@hyojin I will check out your repo again and try again to see if it works for us now. This will be super. Material Next offers some of the capabilities in tables we are looking for but we have not been able to integrate it successfully. We feel hesitant about it being in alpha yet too. So hopefully yours will work. Thanks again!