I've been trying to get jQuery datatables to work in a react component. My app doesn't use bootstrap but I want to use it for my tables so I've scoped bootstrap to a class so i can use it in a div without affecting the rest of the application.
I read the following article Integrating React and Datatables — not as hard as advertised, but the article presents a use case that is more basic than I think many jQuery datatables users use. npm datatables doesn't give you access to extensions (search, scroller, button functions, etc), and everything that comes without the extensions is easy enough that you might as well use an existing react table like primereact, react-table, griddle, react-data-grid, reactabular, fixed-data-table, or react-virtualized.
These offer many options but when tested, had at least 1 or more problems that prevented it from being easily adopted and use all the features needed. Some have issues i think I could help fix after I'm more seasoned with react, but I'm not there yet. I've used jQuery datatables in many production environments without any problems. It's a major sticking point moving to react.
So after weeks of searching and testing and trying to work through bugs, I'm back to trying to bring jQuery datatables into my react app. I realize it's not the "react way" but based on the react docs it's possible and there's a proper way to approach it. I don't need it to react with anything outside of its container or div i place it in.
Using the builder is the recommended way to download datatables so you can get your customized components. I'm also downloading rather than using the CDN because this is a local app and needs to work when there is LAN but no WAN access. I'm using create-react-app and I tried to download datatables from here to a folder in my project and had the following problems:
hot-reload started taking forever (>1min)
the page itself was moving at a crawl
extensions didn't seem to be working (could have been locked up?)
How do you use jQuery datatables in a react app while still being able to use the datatables extensions and without killing the hot-reload for create-react-app? Can anyone provide a working example?
Update
Apparently jQuery datatables has made some major updates since the last time I tried to use their builder and now it includes a way to npm install the extensions too. I'll post a github of a working solution if i find one before someone else can update.
Update
Here is a github i made of a react version that is partially working and a basic html/js/css version that is fully working. The readme tells what is working and not working. Can anyone show me why this not working properly?
Related
very much a newbie from a developer perespective but will do my best to explain.
Essentially my small startup offers a solution whereby you can embed some simple HTML/JS snippet onto a page and then style by inheriting/customising with your own brand css etc. That snippet calls our service to display 3rd party infortmation but the the advantage is it's embedded in the customers site.
In most cases we demo it to potential clients by pasting it into an existing page on their site using proxyman's map local tool to override. However with the rise in react based sites this approach isn't working as the code is handled in the app so it simply just overrides when we refresh the page.
I'm wondering if there is a workaround or a tool out there that would stop the react experience from overriding the snippet we are dropping in via proxyman?
Any help appreciated!
I've looked into a couple chrome extensions that supress react but that hasn't worked and there's no docs on proxyman that address it
I have seen a lot of docs websites that have the same layout or same features.
so I am wondering if there is a library used by all these docs.
how do they do this?
./docs -> files.md -> ./docs/files.html
like you see there are a lot of files with .md (sometimes also .mdx)
and they have the same functionalities (see below)
so I am wondering if they use the same js library to generate it?
I tried to search in all the repo, what they are using to generate, but nothing says the name of a library?
is there an npm package or CDN link to that js library?
that can get the .md files inside .docs, and based on the folder structure, create a list on the left with all topics, 2 buttons with next and previous, a button with edit this page on GitHub, etc...
if isn't possible I will do it by scratch, but writing HTML for every doc is time-consuming.
I prefer some markdown fast, build consistent docs, and automatically added to the first-page list on the left.
also the routing thing for getting previous and next elements I need to do it manually and this can be time-consuming.
is there something that does that for me, some web API that gets files .md if I need to do it from scratch?
but still prefering npm package if there is.
Example:
previous and next docs.
react native
deno
lusift
and they have a button with the text EDIT THIS ON GITHUB
Mozilla docs MDN
when scrolling, it will change the color of the currently viewed section
sketch API
but I never find the name of the library.
other functionalities are...
multi-page
and much more...
(I tried to search on Github, but never find it)
it's there a good docs generator for a programming library that I create?
I also google it: https://www.google.com/search?q=javascript+library+documentation
but nothing. the libraries there are for API GET/POST swagger etc...
but I am wanting a library for functions like if you write this function this happen, maybe also code snippet functionality to see what result give you that function.
something similar to StackOverflow. text to HTML (but not need any server-side things comlicated... just keep it simple the files are inside .docs in GitHub, so just simple stuff.
maybe I am writing wrong the google keyterm
I found the solution to this, by using the #evolutionxbox comment.
how to find?
if you want to find what library is used in a GitHub repo,
go to the package.json, there you can find the list of libraries that is used on the project
the name?
in this case, the library used is DOCUSAURUS
link: https://docusaurus.io/
is very simple to config and solves the job!
and is used by
Facebook,
and other big companies like:
supabase
redux
etc...
I have two modules in my angular website , one is "bootstrap" and another one is "ng-bootstarp".
Does both modules are required , or any one is needed?
I am planning to keep only "ng-bootstarp" 4.0.0.0 and to remove "bootstrap"
Is this fine?
Also let me know the steps to remove "Bootstrap" ?
Can i just go ahead and delete the bootstrap from the ng_module folder or do i need to use any commands?
Don't delete it unless it's causing issues, Bootstrap is intended to be installed alongside ng-bootstrap.
Bootstrap is supposed to be installed when using ng-bootstrap, because ng-bootstrap
relies on Bootstrap's CSS, but it replaces everything else that comes with Bootstrap, as you can see in their dependencies. The CSS is then set in your angular.json or imported into the main styles.css
That said, the non-CSS parts of Bootstrap are unused and could be deleted, but if you're using a package manger, e.g. NPM, this could cause issues when updating and you'll need to repeat this process each update.
As pointed out by #Eliseo, an alternative to using the normal Boostrap with everything included is to use bootstrap-only-css, which can be installed using NPM or Bower, details here. This isn't an official Boostrap distribution as far as I can tell, so keep that in mind.
TLDR: there's no good reason to delete Boostrap.
Angular Material is the official UI framework for Angular, and is maintained (aside from open-source contributors) by Google engineers.
The community is fantastic, the documentation is excellent, and all of the components and utilities are designed to be used with Angular specifically. The source is a case-study in how to write code the Angular way.
It is for the reasons outlined above that I picked AM to be our company’s preferred UI framework.
I haven’t used Bootstrap in a very long time and I would not consider using it in a new project now.
Good day all. I'm new to Grafana and we adopted it very recently at work.
I'm willing to create a plugin, I need to load a simple external js library and fire it in a Grafana panel, nothing extreme.
First problem: I don't want to use any building library (grunt or whatever), I just want to write the plugin javascript, I don't want to redistribute it. Where do I write the code?
Am I right to write the code I want to execute in the data/plugins/myplugin/dist/ folder? (I'm trying to follow the steps at Grafana Docs, but they are unclear as they talk about building and install scripts which I don't like to use).
Second Problem: Seems like that if I use the dist/ folder, the plugin get executed. Now, I'd like to import a external.js library into it, the external library will take care of display the data as I like.
into my myplugin_ctrl.js I write this:
System.register(['app/plugins/sdk', 'lodash', './css/clock-panel.css!','./libs/datamaps'], function (_export, _context) {
var PanelCtrl, _, _createClass, panelDefaults, ClockCtrl;
As you may notice, I've used the clock plugin that is used into the how-to at Grafana.
I'd like to import './libs/datamaps', what I managed to do is having this error upon adding the panel to a dashboard:
Plugin component error Error: Fetch error: 404 Not Found
Instantiating http://127.0.0.1:3000/data/plugins/test-panel/libs/datamaps
Loading http://127.0.0.1:3000/public/plugins/test-panel/clock_ctrl.js
What I'm doing wrong? Where do the datamap.js should be? Or how do I can import it into Grafana plugin?
I don't know if you really need to solve this with a plugin, as I couldn't find any mention about data retrieval from any data sources in your question. Also, I'm not yet very familiar with Grafana plugin development, but I was able to solve one JavaScript related problem without a need to write a plugin.
What I did: I put a Text element in html mode on a dashboard and inserted a <script>...</script> section as well as some HTML code. This worked until I updated Grafana to a newer version, where they started to block this due to security reasons. After configuring /etc/grafana/grafana.ini setting disable_sanitize_html = true in section [panels], I made it work again. You could do this, too, but keep in mind that this is a security risk, because the dashboards now allow to inject any kind of malicious JavaScript code.
See also this Grafana reference page for scripted dashboards.
I would love to be able to use Ionic's collect-repeat directive, however the entire Ionic bundle is not suitable for the solution I am developing.
I am trying to strip the code I need to implement it in a web app, however it's looking like an awful lot of code to get one directive working.
Has anyone come across a similar solution without using Ionic or has successfully implemented collect-repeat from Ionic without using the entire bundle?
Any advice would be great!
Thanks