A 100% aurelia based data table component.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
doc
src
test
.editorconfig
.eslintrc.json
.gitignore
.npmignore
.remarkrc
.travis.yml
CONTRIBUTING.md
LICENSE
README.md
book.json
bower.json
config.js
gulpfile.js
package-lock.json
package.json
spoonx.js
typings.json

README.md

aurelia-datatable

Build Status Gitter

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:

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.