spoonx / aurelia-datatable

A 100% aurelia based data table component.

Archived

It was fun while it lasted, but we have to stop maintaining these repositories. We haven't used these projects for quite some time and maintaining them is becoming harder to do.

You deserve better, and for that reason we've decided to archive some repositories, which includes this one.

Feel free to fork and alter the repositories, and go forth making awesome stuff.

aurelia-datatable

A data-table using aurelia-orm and aurelia-pager

Features:

• Pagination
• Sorting
• Integrated ORM
• Search
• Custom columns
• Custom button actions
• Custom valueConverters
• Expand data to view additional data
• And more

Uses

Aurelia-datatable needs following plugins installed and configured:

• aurelia-view-manager
• aurelia-pager
• aurelia-orm.

Documentation

You can find usage examples and the documentation here.

The changelog provides you with information about important changes.

Example

Here's a snippet to give you an idea of what this module supports.

Online mode

this.repository = entityManager.getRepository('users');

  <datatable
      destroy.call="myEventCallback($event)"
      edit.call="myEditImplementation($event)"
      columns="id,name as 'username', user.id as 'User id'"
      repository.bind="repository"
      searchable
      sortable
      actions.bind="actions"
      populate="user"
      footer.bind="footer"
      detail-view="./details"
  ></datatable>

Offline mode

this.data = [{id: 1, name: 'Pipo'}, {id: 2, name: 'Mario'}];

  <datatable
      destroy
      edit.call="myEditImplementation($event)"
      columns="id,name as 'username'"
      actions.bind="actions"
      footer.bind="footer"
      detail-view="./details"
      data.bind="data"
  ></datatable>

Installation

Aureli-Cli

Run npm i aurelia-datatable --save from your project root.

Aurelia-view-manager uses homefront, so add following to the build.bundles.dependencies section of aurelia-project/aurelia.json:

"dependencies": [
  {
    "name": "homefront",
    "path": "../node_modules/homefront/dist",
    "main": "index"
  },
  {
    "name": "aurelia-datatable",
    "path": "../node_modules/aurelia-datatable/dist/amd",
    "main": "aurelia-datatable",
    "resources": [
      "bootstrap/datatable.html"
    ]
  },
  // ...
],

Jspm

Run jspm i aurelia-datatable from your project root.

Aurelia-datatable uses homefront, so add following to the bundles.dist.aurelia.includes section of build/bundles.js:

  "homefront",
  "aurelia-datatable",
  "[aurelia-datatable/**/*.js]",
  "aurelia-datatable/**/*.html!text",

If the installation results in having forks, try resolving them by running:

jspm inspect --forks
jspm resolve --only registry:package-name@version

Webpack

Run npm i aurelia-datatable --save from your project root.

And add aurelia-datatable in the coreBundles.aurelia section of your webpack.config.js.

Typescript

Npm-based installations pick up the typings automatically. For Jspm-based installations, run typings i github:spoonx/aurelia-datatable or add "aurelia-datatable": "github:spoonx/aurelia-datatable", to your typings.json and run typings i.

Configuration

Activate

Activate the plugin in main.js:

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-datatable');

  aurelia.start().then(() => aurelia.setRoot());
}

ORM

Follow the steps in the aurelia-orm documentation to configure your api endpoints.

aurelia-datatable's Issues

Reload datatable after edit or destroy action

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

this.select is not a function

When adding select property the following error is occuring: this.select is not a function. How can i use a custom select method?

Production bundle : TypeError: e is undefined in Firefox

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 ?

Write tests

... Write tests.

Make aurelia-orm a soft dependency. (Configuration)

Ability to translate the column names and search input

update build task

i recommend to use same project setup as other spoonx aurelia repos (eg d.ts)

list at aurelia-registry and awsome-aurelia

when finished

Action buttons not showing up for edit and destroy

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.

Trigger and delegate with basic actions do not show up in table

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.

Weird actions

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)

Still have problem with Go to page 1 on search

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.

lazy loading problem when running in gunicorn? maybe a configuration issue

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"
            ]
          }

Support pagination in offline mode

Offline mode should also support pagination

Demo page?

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!

Support sorting in offline mode

Offline mode should also support sorting.

support to limit the search fields

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)

Development mode : TypeError: action is undefined in Firefox

Hi Everybody,
I'm having an error in Firefox in development Mode : TypeError: action is undefined in Firefox
I use ARELIA CLI : au run --watch
The datatable doesn't show the content even if the content if coming from the server.

Can you help me please?

CSV export feature

We would like to be able to export the content of a datatable as CSV

Binding to array of json objects

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>

Go to page 1 when searching

When we start a search with the searchable element, we should go back to page 1

Got error 'Unexpected token' when I change to use src instead of dist

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?