How to render custom React component within DataTable?

Hi there,

I am using Material UI as the design framework for my application and using Webix Datatable to display data in the table. In my data table I need to show a button with Material Styling. I know we can create a template and show that inside a datatable cell, however the issue I am having is that it renders [Object object] instead.

The template I created is below:

const infoButton = webix.ui({
view: "template",
template: function (obj: UserType) {
if (!obj.userId) return '';
const link = /user-info/${obj.userId};
return (
"Launch User Profile"
);
}
});

Note that Button is a material-ui button component: https://material-ui.com/components/buttons/#button
Link is a React Router property for navigation: https://reactrouter.com/web/api/Link

Is there a way that I can make these two work together? How can I render a React component in a template?

Thanks in advance!

Tagged:
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!