Use tree component from syncfusion with Material UI - reactjs

I am working on a project and I already use Material UI. Recently, I have encountered an issue finding a checkboxes tree in Material UI and I've found it in Syncfusion. Would it be okay if I imported only the tree component from Syncfusion and use it within my project which already uses Material UI?

Yes, you can install syncfusion/ej2-react-navigations package to use EJ2 TreeView component in your react project.
Refer to the following UG and demo links for getting started with EJ2 React TreeView component.
UG: https://ej2.syncfusion.com/react/documentation/treeview/getting-started/
Demo: https://ej2.syncfusion.com/react/demos/#/material/treeview/check-box
API: https://ej2.syncfusion.com/react/documentation/api/treeview/

Related

How to use MUI inside CMS library?

We are currently using React Material UI for a big e-commerce site that requires a CMS.
The problem is that we need to give the elements in the CMS (that are configurable as pure HTML containers) the ability to use the same component animation and style as what we used in the MUI configuration in react.
Is there any way we can achieve this?
In other words, how can we create a html library from React Material UI?

Custom Design in Material UI

the landing page of Material UI has slick design (both layout and components). I wonder if I can use this design instead of default Material Design. I couldn't find any information about this design in the docs.
I believe you are looking for the source code of mui documentation website. Here's the link
If you are looking for theme specifically then this link should help you.
If you mean their home page, it's actually designed by Material UI, you can check this by seeing the source page.
Mostly Material UI components in the home page are designed using makeStyle so they are not in the default style.
https://mui.com/styles/api/#heading-makestyles-styles-options-hook

AgGrid React Material UI

Any good examples out there of using AgGrid with React Material UI. Especially around creating custom themes. The examples on the AgGrid site are around css / scss not styled components the preferred approach with React Material UI.
Although it might not be exactly what you are looking for. Try searching for
component types and custom renderers as it contributes to customizing your ag-grid look

AntD table customised filter functionality is not working with react version 15.4.2

We are using Antd table in our application which is build with react version 15.4.2.We are trying to implement 'customised filter panel' https://codesandbox.io/s/q326o1jywj which is not working with version 15.4.2.Also for other features(Filter and sorter) we are not able to get the icons.
Is there any workaround for this issue, Can we implement these features with some configuration changes in react 15.4.2 version ? Please help us

How to drag-n-drop TableHeaderColumn from material UI with react-dnd?

How to apply drag-n-drop functionality from react-dnd library to TableHeaderColumn component from material ui
The problem is react-dnd does not support custom tags and suggests to wrap TableHeaderColumn in div but material ui does not allow to wrap table component in any tag :(
I can't find any examples by this theme
And the answer is - there are no way to do it with react-dnd, at least for this moment.
So I've ended up using react-sortable-hoc which works as expected in pair with material UI table elements.

Resources