Comments (17)
@oblogic7 After fulfilling the installation requirements of the jsx transpiler, I got it to work with both browserify
and webpack
using the following setup:
Browserify (+ Laravel Elixir):
elixir.ready(function() {
elixir.config.js.browserify.transformers
.find(transformer => transformer.name === 'babelify')
.options.plugins = [
'babel-plugin-transform-vue-jsx'
];
})
Webpack:
module: {
loaders: [{ test: /\.jsx?$/, loader: 'babel' }]
}
@oblogic7 Yes, jsx is the only way to attach templates. This is one of the main reasons I used jsx to begin with. Unlike version 1 of the plugin, where I had to manually compile the HTML after every change to the table (provided the user has set compileTemplates
to true
), jsx allowed me to unite the user templates with the table on initial render, thus making them essentially part and parcel of the table template.
from vue-tables-2.
Having the same problem, thinking it has something to do with how elixir includes the vue-loader.
If you dont have to write a lot of html you can just use the normal render function (your currently using it if jsx-transformer is not working)
http://vuejs.org/guide/render-function.html
For example:
options: {
templates: {
edit: function(createElement, row) {
return createElement('a', {
attrs:{
'href': row.id
}
}, 'Open');
}
}
}
Maybe it should be added to the documentation that it is not needed to use the jsx-transformer
from vue-tables-2.
@oblogic7 on second thought, why don't you isolate the templates in their own jsx
files and import them into your vue
file?
from vue-tables-2.
This means jsx transform is not working properly.
Check your configuration.
from vue-tables-2.
I'm having this same issue. I was able to get jsx working with the solution in #2, but cannot figure out why this is not working. I've tried importing react into my project, I've installed the react preset and transform-react-jsx plugin for babel, but can't get it to work.
@cpgo Were you able to figure out what the issue is on your end?
@matfish2 Can you post a config sample that should work? Also, are jsx templates the only way to include row data in the template output?
from vue-tables-2.
@oblogic7 spent the whole morning tinkering with my configs and couldnt get it to work
In the meantime I'm using a data table I made myself as a placeholder until I figure things out
from vue-tables-2.
@matfish2 Thanks! I finally got it to work. What ended up working was adding import React from 'react';
to the Vue component where I was building the table.
I'm guessing that the issue was with scopes of Vue and components. I had imported React in my main app.js file, but the component did not pick that up. More learning to do I guess.
Thanks again for the help!
from vue-tables-2.
Ok... I spoke too soon. The console errors disappeared with the last change, but the template is not compiling correctly.
This works...
options: {
templates: {
name: function(h, row) {
console.log([h, row]);
return row.name;
}
}
}
Changing to the code below does not work and results in blank output, so the JSX isn't being parsed or something, but no errors in the console or during gulp.
options: {
templates: {
name: function(h, row) {
console.log([h, row]);
return <div>{row.name}</div>;
}
}
}
This is my first experience with JSX, so maybe I'm not doing something correctly?
from vue-tables-2.
Same issue like oblogic7 (I use your Browserify + Laravel Elixir config from above).
Please can u show us an example how this templates should be working.
If is an additional .jsx template file required? If you just add plain HTML in the Template Section
(like oblogic7 example above), the template will never be compiled and just ignored.
Thanks for your help.
from vue-tables-2.
@ndum As far as I understand JSX, while that looks like plain HTML, it is in fact valid JSX syntax. Notice that it is not a string as it is missing quotes. The fact that this does not throw any kind of error during build or at runtime reinforces my idea that the template itself is valid, but is not rendering properly with the suggested setup.
I have also wondered if the Vue component being inside of a .vue
file is contributing to the issue since the config is simply trying to process JSX from .js
or .jsx
files.
from vue-tables-2.
@oblogic7 if you are using webpack
than you are definitely right. You need to modify the test
regex to include .vue
files
/(\.jsx?)|(\.vue)$/
should do the trick.
from vue-tables-2.
@matfish2 Tried that already, but results in the error below when building.
from vue-tables-2.
Yeah. Come to think of it that's quite a pickle.
JSX and HTML are mutually exclusive.
E.g :data=jobs
should be data={this.jobs}
in jsx
.
The only solution I can think of at the moment is to adapt the entire template to jsx
syntax. Far from ideal, but I'm not sure if there is an alternative.
from vue-tables-2.
I will give that a shot. Thanks
from vue-tables-2.
Ended up using @Lampone 's suggestion. Works perfectly and is simpler than having a jsx file for each column.
from vue-tables-2.
@Lampone, the docs don't state that one must use jsx to write the templates, only that it is recommended:
It is recommended to use JSX, which closely resembles HTML, to write the templates.
At any rate, the jsx-transpiler is required because the plugin itself uses it.
from vue-tables-2.
@Lampone - Using your suggestion, how do you attach event listener like @click="open(param)"
from vue-tables-2.
Related Issues (20)
- Changelog HOT 3
- Row double click HOT 2
- Variables inside custom header not updating HOT 4
- Documentation of disabledChildRows option HOT 1
- Change header of toggle column HOT 2
- editable edits all rows on click HOT 1
- how to manage table refresh HOT 1
- MouseUp event conflicts with other MouseUp events HOT 2
- problem with virtual pagination height HOT 6
- grouping doesn't show data HOT 4
- evaluate removal of background: white from thead tr th HOT 2
- customize column header titles HOT 1
- [question] sort by attribute, show another HOT 2
- Replacing cell content issues HOT 2
- Custom components in vue 3 HOT 2
- Set initial listColumns in dropdown HOT 2
- Add 'large-desktop' columnDisplay value(s)
- xscode down HOT 41
- Does uniqueKey support nested objects? HOT 2
- How to access table data from custom template
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-tables-2.