I have a HTML table inside my react application. Now I have a requirement to resize my table columns by raging on the column header. Found lots of react solutions by searching on the web but almost all of them are with a table component(Ex. React Table, RC Table, React Grid).
I am looking for a pure react solution to integrate with my existing Table. Found lots of jQuery libraries but it is not recommending to use jQuery with react.
If I go for a pure java script solution will it create a conflict with the actual DOM and React DOM since pure java script directly changing the actual DOM?
Anyone have a working sample with react or any recommended way to go ahead?
Related
I am using React JS (not native) to create a web application. I understand that there default table tags in React such as <table>, <tr>, and <tbody>. When creating these tables I want to be able to manipulate them by dragging them to the side. This application will be used on tablet devices as well as the PC which is why this is necessary.
I need to avoid installing libraries so if this can be done natively all the better. A link to a tutorial would be best.
Thank you
The app
The application was made using ReactJS, React Router Dom, Styled Components and Redux ducks.
The backend we consume is also made by us using Amazon Amplify and GraphQL.
The goal
We need to define the meta tags of one of the application pages so that it is possible to share personalized links to users
in social networks using OpenGraphic meta tags and the like.
The problem
The project was made in ReactJS and ReactJS has only one HTML page as root (/public/index.html), in this way, everything is generated with Javascript in a root tag, and when it arrives in the browser it is transpiled, as we already know. The problem is that the crawlers responsible for understanding the meta tags are not able to understand Javascript and end up not finding the dynamic data that I am defining on the page that I need to share the link on. They understand that there is one html file and only.
Attempts to resolve the issue
1) Define the meta tags in the /public/index.html file itself
This solution doesn't work because the data we are using is dynamic and the index.html file is a static file
2) Using react-helmet
The solution allows meta tags to be defined, but as already mentioned, crawlers don't understand JS. So, despite being on the page, the meta tags do not appear when sharing the link.
3) Using some SSR technology
This is a possible solution, but we were unable to integrate any SSR Framework into React. And it is not feasible to change the base technology of the project. We can't just switch from React to Next, for example, as the project is already complete.
4) Using a small server made with express.js along with the React application to replace the meta tags in index.html with string.replace() simulating something like an SSR
This solution works, but it causes two requests to be made every time the page is accessed, once by express.js and once on the front-end side by React. Due to the number of requests increasing, this solution was discarded. But if necessary, you can do it. In this case it is also necessary to check if Amplify can keep the application and the small server running in the same project.
5) Using react-snap with react-helmet
React-snap allows you to create html snapshots of the pages of a React project based on their routes and links, this added to react-helmet generates a perfect solution for links to be treated well by web crawlers when they are shared. But the solution doesn't work with dynamic routes. For example, /your-route/:id is a dynamic route that expects an id to be fully defined. React-snap gets lost when trying to create a snapshot of a route that only exists when the id is set. Unfortunately, this solution doesn't work.
These were the solutions we used to try to solve the problem, but it was not possible yet. Probably attempt 4 would be the most ideal to solve the problem. But we are looking for the best way that will not generate reworks and future problems. If someone knows a better way to do that, would help us a lot!
I work on a large project built on Magnolia CMS and FreeMarker templates and I want to add React to it. Is it possible to integrate React components and grow gradually until the whole project is React based? I looked for this information but the resources are quite limited in this area.
Have you had a look at this one? https://docs.magnolia-cms.com/product-docs/6.2/Developing/SPA-development-and-Magnolia/Mapping-between-Magnolia-and-SPA-components.html#_mapping_between_magnolia_and_reactjs
Basically, you can do the mapping between Reach and Magnolia components as described above.
Right now I am using ng-datatable for displaying data in a table, but I want to write a custom directive to display data in a table grid.
I'd recommend going to another site for the tutorial on creating a directive/component. Nothing really beats the AngularJS site itself, but there is a ton out there. For directives AngularJS Directives, for components AngularJS Components. Considering web components are more robust than directives I would recommend going the path of the components.
For example:
You can split your grid into many different factions for modular/reusable components throughout your project. Create a component for your header, a single row (pass each record from your collection into the row component), a pagination component, filter/search component, etc.
Good luck on your endeavors.
I am a backend engineer but need to come up with a front end. Can I use Jetstrap/Codiqa and create a pretty UI using drag and drop. Can I then export the html and add the angular keywords? Is this the best practise for a non front-end person creates a UI?
I've used codiqa to design an phone app using phonegap. Codiqa generates code based on jQuery. it's possible to add angular after you export the code. Not very common to mix angular and jquery, from what I've seen though. Another online prototyping tool I recently found that generates AngularJS code (as well as Phonegap based Steroid.js) is AppGyver's composer. Comes with some built in color themes (similar to jQuery) and you're able to create a mobile app quickly based on Steriods.js/Phonegap.