spoonx / aurelia-datatable Goto Github PK
View Code? Open in Web Editor NEWA 100% aurelia based data table component.
Home Page: http://aurelia-datatable.spoonx.org
License: MIT License
A 100% aurelia based data table component.
Home Page: http://aurelia-datatable.spoonx.org
License: MIT License
When using edit.delegate and destroy.delegate the button will not show up. As a workaround I have to do edit.bind instead, is that a normal behavior? I need to wrap the bound method to another method to have them work, Which is weird.
Hi Everybody,
I'm working with the datatable plugin with success but I cannot found a way to manually-reload the datatable content.
Is there any way for do it in a function ? After Edit or Delete function ?
I need this if the content is changed server side.
Thanks
... Write tests.
Node version : 6.3.0
Npm version : 3.10.5
jspm version : 0.16.39
aurelia-datable version tested : 0.0.10 and 0.0.12
Problem observed : when using either trigger
or callback
with edit
and destroy
actions, actions do not show up in the table.
Code sample :
song.js
import {inject} from 'aurelia-framework';
import {EntityManager} from 'aurelia-orm';
@inject(EntityManager)
export class Song {
constructor(entityManager) {
this.entity = entityManager.getEntity('song');
}
myEventCallback(test) {
console.log('callback')
console.info(test)
}
myEditImplementation(test) {
console.info(test)
}
submit() {
this.entity.save()
.then(entitySaved => {
console.log(entitySaved)
})
.catch(error => {
console.error(error);
})
}
}
song.html
<template>
<datatable
destroy.delegate="myEventCallBack($event)"
edit.delegate="myEditImplementation($event)"
resource="song"
searchable
sortable
populate="clip"
columns="id as #, name as nom, description, displayed as Affiche, clips"
></datatable>
<entity-form
entity.bind="entity"
submit.delegate="submit()"
></entity-form>
</template>
entity/song.js
import {Entity, type, association, resource} from 'aurelia-orm';
@resource('')
export class Song extends Entity {
@type('text')
name = null;
@type('text')
description = null;
@type('boolean')
displayed = false;
/*@type('select')
@association('sound')
sounds = [];
@type('select')
@association('clip')
clips = [];
@type('submit')
submit = null;*/
}
Quick fix: use call
to bind basic actions to function.
Hi guys.
I think we should have one option to define the field we want to enable search on it.
Example the datatable have 5 columns, but we just want to search on 2 fields.
Now, it enable search on all of 5 fields.
Can you guy update the library to support that?
I really want to do it but I can't run this library with mode dev. (use src code instead of dist/amd)
When adding select property the following error is occuring: this.select is not a function. How can i use a custom select method?
Hi everybody.
I searched, checked code and saw that this component did not support disable/enable search for every field (like populate for sort) to limit search fields.
such as: I have 3 columns but I just allow to search on 2 columns. so the idea is add one more option on column to disable or enable search field on dropdown list.
Actually I want to contribute it but when I change aurelia.json to use src code instead of dist, I got error.
Here is my aurelia.json
....
{
"name": "homefront",
"path": "../node_modules/homefront/dist",
"main": "index"
},
{
"name": "aurelia-datatable",
"path": "../node_modules/aurelia-datatable/src",
"main": "index",
"resources": [
"bootstrap/datatable.html"
]
},
....
and I got error like this
Tracing aurelia-datatable...
commonJs.convert: COULD NOT CONVERT: /Users/nvtin/workspace/demo/node_modules/aurelia-datatable/src/index.js, so skipping it. Error was: Error: Line 1: Unexpected token
Error occurred while tracing
Error: Parse error using esprima for file: /Users/nvtin/workspace/demo/node_modules/aurelia-datatable/src/index.js
Error: Line 1: Unexpected token
at Object.context.load (/Users/nvtin/workspace/demo/node_modules/aurelia-cli/lib/build/amodro-trace/lib/loader/Loader.js:392:21)
at Module.load (eval at (/Users/nvtin/workspace/demo/node_modules/aurelia-cli/lib/build/amodro-trace/lib/loader/Loader.js:14:1), :832:29)
at Module.fetch (eval at (/Users/nvtin/workspace/demo/node_modules/aurelia-cli/lib/build/amodro-trace/lib/loader/Loader.js:14:1), :822:66)
at Module.check (eval at (/Users/nvtin/workspace/demo/node_modules/aurelia-cli/lib/build/amodro-trace/lib/loader/Loader.js:14:1), :854:30)
at Module.enable (eval at (/Users/nvtin/workspace/demo/node_modules/aurelia-cli/lib/build/amodro-trace/lib/loader/Loader.js:14:1), :1173:22)
at Object.enable (eval at (/Users/nvtin/workspace/demo/node_modules/aurelia-cli/lib/build/amodro-trace/lib/loader/Loader.js:14:1), :1554:39)
at Object.context.enable (/Users/nvtin/workspace/demo/node_modules/aurelia-cli/lib/build/amodro-trace/lib/loader/Loader.js:292:24)
at Module.eval (eval at (/Users/nvtin/workspace/demo/node_modules/aurelia-cli/lib/build/amodro-trace/lib/loader/Loader.js:14:1), :1158:33)
at eval (eval at (/Users/nvtin/workspace/demo/node_modules/aurelia-cli/lib/build/amodro-trace/lib/loader/Loader.js:14:1), :134:23)
at each (eval at (/Users/nvtin/workspace/demo/node_modules/aurelia-cli/lib/build/amodro-trace/lib/loader/Loader.js:14:1), :59:31)
So I dont know why this happen. Can you guys give me solution to fix it? so I can run and contribute it.
@RWOverdijk How do you think?
In documentation it says to use
destroy.delegate="myEventCallback($event)" edit.delegate="myEditImplementation($event)"
but they are not events but bindable
you can only use
destroy.call="myEventCallback($event)" edit.call="myEditImplementation($event)"
but then you don't have the second argument (index)
Hi,
I still have a problem with that.
I have that binding:
<datatable page.bind='page' ...
<pager page.bind="page" ...
I have a label showing the page:
${pagination}
and a getter in my js file:
@computedFrom('page') get pagination() { return 'Showing page ${this.page} of ${this.pages}.'; }
It works when I change page from the pager but not when doing a search. Refresh occurs but page remain as-is. (ex. I am in page 2 and do a search, page is still 2 after refresh)
Same behavior on online Swan example (I created lot of todos for having more than 30 in order to show the pager).
Thanks.
When we start a search with the searchable
element, we should go back to page 1
Hello Everybody!!
I'm actually having an error in Firefox, and the datatable doesn't load the content even if the content is coming from the server (network tab in firefox)
I use AURELIA CLI for create a production bundle : au build --env prod
and the compiled bundle is now in the server.
This error happen in firefox in production mode
Somebody can help me please ?
Offline mode should also support pagination
Offline mode should also support sorting.
i recommend to use same project setup as other spoonx aurelia repos (eg d.ts)
Hi all, thanks for writing this very cool looking aurelia package.
I am trying to use aurelia-datatable for the first time, but running into some module loading issues.
I am using aurelia-cli 0.19.0 and my api environment is flask with gunicorn.
I managed to get all the dependencies installed and configured OK- because if I run the client with au run
then the javascript loads without errors. So, no errors on: http://localhost:9000
However, when I load the app from gunicorn on http://localost:8888, then the javascript fails out at the aurelia-orm and aurelia-datatable steps. It's like there is some lazy module loading going on, and it is getting the script path wrong. I made a screenshot of my chrome dev tools so you can see the missing files and the exception.
The weird thing is, this same client code loads fine when running from the au run
server. Also none of the other aurelia code has trouble loading from gunicorn.
Is there any way to configure it to not do lazy loading, and so it just gets put in vendor-bundle with everything else? I will append dependencies from aurelia.json as well if that helps.
{
"name": "homefront",
"path": "../node_modules/homefront/dist",
"main": "index"
},
"extend",
"aurelia-api",
"aurelia-view-manager",
"get-prop",
"typer",
{
"name": "aurelia-pager",
"path": "../node_modules/aurelia-pager/dist/amd",
"main": "aurelia-pager",
"resources": [
"bootstrap/pager.html"
]
},
{
"name": "aurelia-orm",
"path": "../node_modules/aurelia-orm/dist/amd",
"main": "aurelia-orm",
"resources": [
"component/association-select.html",
"component/paged.html"
]
},
{
"name": "aurelia-validation",
"path": "../node_modules/aurelia-validation/dist/amd",
"main": "index"
},
{
"name": "aurelia-datatable",
"path": "../node_modules/aurelia-datatable/dist/amd",
"main": "aurelia-datatable",
"resources": [
"bootstrap/datatable.html"
]
}
I am attempting to use your datatable. The documentation did not provide enough detail on how to bootstrap the datatable. Currently I am in a proof of concept phase. I am trying to bind the table to a simple array of JSON objects. I looked at the source and it seems I would bind to the 'data' property. My vm currently assigns an array to a public property records. The table is not rendering. What items should I be injecting into my view model. Please see my vm below:
`rt {DataTable} from 'aurelia-datatable';
import { inject, Aurelia } from 'aurelia-framework';
export class Requests {
records=[];
constructor() {
this.records = [{'id':1, 'name':'wpearson4','age':34},{'id':2, 'name':'terehas','age':40}];
}
}
Associated html
<template>
<datatable
columns="id,name as 'username', age"
data.bind ="records">
</datatable>
</template>
when finished
We would like to be able to export the content of a datatable as CSV
I think you should put up a demo page online showing the possibilities your component has to offer so people can quickly decide if it's what they're looking for or not without having to checkout and build the whole thing.
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.