Mui-datatables: Components inside table

[jungrafael]

Issue

Could we have a way of adding our own components to the table? We could just add it to the data variable. With the same API, we would be able to add text or a component.

Your Environment

| Tech | Version |
|--------------|---------|
| mui-datatables | 1.0.7 |
| node | 8.7.0 |
| OS | Ubuntu 17.10 |

[jungrafael]

okay, this is already possible!

Should we update the README, to tell about this awesome possibility?

[gregnb]

Hah, I never tested it for that purpose. Well that is interesting! Let me look into more test cases to make sure that this works like you would intend it to before putting it in the README

[jungrafael]

Hello @gregnb, I've just found a drawback with this approach: we're unable to search items which are a JSX component, since it calls toString() on the component and this returns [object Object].
Should I reopen this issue to change the way the search/filtering is made?

[jungrafael]

Since I needed to solve this quite quickly, I've created a quick fix here: https://github.com/jungrafael/mui-datatables/tree/text-search-on-components
This could be of help for fixing this issue :)

[gregnb]

Would you want to add some unit tests and send me this as a PR? Nice work @jungrafael

[gregnb]

Hey @jungrafael so I took your function out and imported it into another project just to test. Take for example the following component

class Test extends React.Component {
 render() {
   return (
      <div>
        <div>this is the text to print</div>
      </div>
   );
 }
}

All I'm going to see for a return from your function is:

[object HTMLDivElement]

To be honest I'm not sure how you're going to extract or return the text of a component without rendering it first

[jungrafael]

Hey @gregnb, this use case would in fact not be supported. This function I implemented just extracts the text inside nested elements, by navigating through its children. So you would need to use this function this way:

getElementText(
  <div>
    <div>this is the text to print</div>
  </div>
);

This is exactly my use case for it on this library, since it's being used on an array of arrays of React Elements.
Would this be already enough for this library? I think rendering the component to extract its text would perform pretty badly.
I would gladly also implement this for sorting and write some tests. :)

[gregnb]

@jungrafael Yep you're right that's why I just wanted to clarify. It would just be a big waste of time to render.

Yeah, I would gladly accept the PR but we need unit tests :)

[gregnb]

Hey @jungrafael did you happen to get those tests done?

[jungrafael]

Hey @gregnb, I really haven't had much time lately. I plan on doing this next week, finishing up the implementation and creating the tests.

[gregnb]

@jungrafael no worries man. I say we hold off for now if the PR sent in performs well when I get some time to test it we should use that since it'll extract any text

[gregnb]

hey @jungrafael so a PR that @tgBryanBailes had worked on is finally merged in. You can render React components or custom strings in cells using a property called customRender. An example of how todo this can be found at here