I use datatables.net. Initialization works just fine. (taken from the samples)
My problem occurs when i start using "fixedColumns" extension. (see picture)
i installed packages with bower
"datatables.net": "1.10.12",
"datatables.net-bs": "1.10.12",
"datatables.net-fixedcolumns": "3.2.2"
Any help?
As i stated out i was using bootstrap theme for datatables.net i also had to use bootstrap theme for "Fixed columns".
I didn't include this in my bower file.
Correct bower file:
"datatables.net": "1.10.12",
"datatables.net-bs": "1.10.12",
"datatables.net-fixedcolumns": "3.2.2",
"datatables.net-fixedcolumns-bs": "3.2.2"
Be sure to add fixedColumns.bootstrap.min.css in your markup. I was missing that too.
Related
I have tried updating my old dependencies in current react project, but encountered this issue
Module not found: Can't resolve 'react-select/dist/react-select.css
I have manually checked react-select folder in node_modules couldn't find any react-select.css file.
couldn't find any reference regarding this thing,
Package version 3.0.8
Solution: removing css imports clear my error
They removed the CSS-class-based styling and therefore you don't need to import the CSS file anymore.
More info can be found in the upgrade Guide: https://react-select.com/upgrade-guide#new-styles-api
Thank You #Mastacheata for the details
If you upgraded from v1 to v2, you should definitely read their upgrade guide. The new major version is a major release for a good reason.
They removed the CSS-class-based styling and therefore you don't need to import the CSS file anymore. Instead they now define the CSS styles for their components right inside the code.
More info can be found in the upgrade Guide:
https://react-select.com/upgrade-guide#new-styles-api
I'm using ghcjs-0.2.0.9006030_ghc-7.10.3 with stack lts-6.30 to build a frontend app. Inspired by this post, I decided to use react-flux and material-ui. I added React's CDN link to my index.html, and configured GHCJSi to use a custom index-dev.html when working with the repl.(React's CDN link is also included in index-dev.html)
However, with material-ui-next, the official installation method is to use NPM. They provide no CDN link. So how to use this library in a GHCJS project? I think one of the following should work:
Use the CDN link provided by jsDelivr. (Though this link doesn't work)
Find some way to bundle material-ui-next and put it in js-sources field in cabal, so that it can be linked with our app at build time.
Any help is appreciated.
In the package.json of material-ui, scripts build:umd:prod and build:umd:dev can be used to build UMD bundles of the package. So you can use the CDN link provided by unpkg.
Even though material-ui doesn't declare a peer dependency on react-transition-group, it expects react-transition-group/TransitionGroup to be present. So we have to add the following code before the link to material-ui
<script crossorigin="anonymous" src="https://unpkg.com/react-transition-group#2.2.1/dist/react-transition-group.js"></script>
<script>
window["react-transition-group/TransitionGroup"] = ReactTransitionGroup.TransitionGroup;
</script>
I created a issue on material-ui's github repository, see that issue for more details.
I installed all recommended extensions, still VSCode won't recognize any React syntax.
What must i do to make VSCode play nice with React (js / jsx) syntax?
The plugin that was causing issues for me here actually Babel ES6/ES7 as mentioned in another comment.
Once removing that plugin and reloading, it all worked well
VS Code has built-in support for JSX and TSX. You do not need to install any extensions unless you want additional functionality
As the OP noted, the problem was one of their extensions was inserting spaces around the tags. I suspect it was the js css html formatter extensions since this has caused problem for people in the past
1.Delete all html-js-css formatters.
2.If you want to work with this formatters,
install prettier.
Right click and select format document with and then select prettier. Repeat this every saving.
This happens because you use some HTML formatter, so first go to your react native or js extension settings(simple click the bottom bar language mod), and check the HTML fomatter in that setting page.
"[html]": {
"editor.defaultFormatter": "apility.beautify-blade"
}
remove this, and you are good to go.
Afaik, vscode does not understand JSX by default. Installing jsx plugin should help there.
Install Babel ES6/ES7 extension from here.
Works like charm.
currently to install and run material-ui docs locally, it requires two npm install, one within material-ui, another within material-ui/docs.
cd <project folder>/material-ui
npm install
cd <project folder>/material-ui/docs
npm install
But I want to use the docs site as a starting point to create my own app. How can I install the docs without installing the whole material-ui? I've tried adding "material-ui": "^0.14.4",, and ALL dependencies in material-ui/package.json to the material-ui/docs/package.json.
With that, npm install doesn't complain anything, but when I do npm run start or npm run browser:development, it doesn't work. Instead, it spits out whole bunch of error message (see below for part of it).
ERROR in ../src/table/table-header-column.jsx
Module build failed: ReferenceError: Unknown plugin "transform-replace-object-assign" specified in "/home/ubuntu/repos/tutorials/mui/.babelrc" at 0, attempted to resolve relative to "/home/ubuntu/repos/tutorials/mui"
.....
Please advise! Thanks.
I have teased the MUI-Docs site from parent MUI here in this repo: https://github.com/lmaccherone/material-ui-template.
In addition to removing the dependency upon parent material-ui, it has these advantages:
DRY and n-levels of left nav menu. To add/modify the left nav of the original MUI docs, you had to modify no
less than three different source files. This template will automatically adjust the left-nav based upon app-routes.js
including n-levels deep.
Custom theme in the project. MUI is designed to be themable and comes with two nice themes, but it's not
immediately obvious how to activate a custom theme in context for all components. The Themes page now has three
themes and it defaults to the custom one, so if you remove the Themes page, it will start up with your theme rather
than one of the prebuilt ones. Just modify customBaseTheme.js. I also modified many components and pages to use the theme. There were many places where inline settings didn't honor theme colors and spacing.
Highcharts. There is an example chart page that uses Highcharts and react-highcharts.
Advanced Table. It includes a component that renders a table where you can click on the columns to accomplish sorting.
Note, that repo has two pages specific to Pendo (a company I'm working with). They won't render correctly unless you have permissions for Pendo, but you can easily remove those two page by removing the folder by that name and removing it's routes from app-routes.js. I plan to clean that up and move Pendo specific stuff into it's own repo, but it was just easier to have it here as examples.
I read
JHipster After creating sample entity nothing is shown in the browser
.In my case bower seem fine. It have the angularjs lib
(When use bower list). Why it still can't reference to angularjs? If you have any suggestion on where to investigate. Thanks.
Can you provide the output from your browser's JavaScript console? Look for a syntax error.
Also you can try
grunt wiredep
in order to inject your bower dependencies into your source code (normally index.html).
Your index.html has no dependencies. You can copy them from sample-app.