├── .npmignore ├── dist ├── es2015 │ ├── index.js │ ├── columns-filter.js │ ├── aurelia-datatable.js │ ├── convert-manager.js │ ├── bootstrap │ │ └── datatable.html │ └── datatable.js ├── index.d.ts ├── columns-filter.js ├── native-modules │ ├── index.js │ ├── columns-filter.js │ ├── aurelia-datatable.js │ ├── convert-manager.js │ ├── bootstrap │ │ └── datatable.html │ └── datatable.js ├── commonjs │ ├── index.js │ ├── columns-filter.js │ ├── aurelia-datatable.js │ ├── convert-manager.js │ ├── bootstrap │ │ └── datatable.html │ └── datatable.js ├── system │ ├── index.js │ ├── columns-filter.js │ ├── aurelia-datatable.js │ ├── convert-manager.js │ └── bootstrap │ │ └── datatable.html ├── amd │ ├── index.js │ ├── columns-filter.js │ ├── aurelia-datatable.js │ ├── convert-manager.js │ ├── bootstrap │ │ └── datatable.html │ └── datatable.js ├── aurelia-datatable.js ├── convert-manager.js ├── aurelia-datatable.d.ts ├── bootstrap │ └── datatable.html └── datatable.js ├── doc ├── api.json ├── SUMMARY.md ├── README.md ├── license.md ├── installation.md ├── usage.md └── CHANGELOG.md ├── test ├── setup.js └── unit │ └── datatable.spec.js ├── typings.json ├── .gitignore ├── .eslintrc.json ├── src ├── columns-filter.js ├── index.js ├── convert-manager.js ├── bootstrap │ └── datatable.html └── datatable.js ├── .editorconfig ├── .travis.yml ├── CONTRIBUTING.md ├── book.json ├── .remarkrc ├── gulpfile.js ├── bower.json ├── LICENSE ├── spoonx.js ├── package.json ├── README.md └── config.js /.npmignore: -------------------------------------------------------------------------------- 1 | jspm_packages 2 | bower_components 3 | .idea -------------------------------------------------------------------------------- /dist/es2015/index.js: -------------------------------------------------------------------------------- 1 | export * from './aurelia-datatable'; -------------------------------------------------------------------------------- /dist/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from 'aurelia-datatable/aurelia-datatable'; -------------------------------------------------------------------------------- /doc/api.json: -------------------------------------------------------------------------------- 1 | {"classes":[],"methods":[],"properties":[],"events":[]} -------------------------------------------------------------------------------- /test/setup.js: -------------------------------------------------------------------------------- 1 | import 'aurelia-polyfills'; 2 | import 'fetch'; 3 | -------------------------------------------------------------------------------- /typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aurelia-datatable", 3 | "main": "dist/aurelia-datatable.d.ts" 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | jspm_packages 3 | bower_components 4 | .idea 5 | .DS_STORE 6 | build/reports 7 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./node_modules/spoonx-tools/.eslintrc.json", 3 | "rules": { 4 | "max-lines": ["error", 450] 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /doc/SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | 3 | * [Introduction](README.md) 4 | * [Installation](installation.md) 5 | * [Usage](usage.md) 6 | * [Changelog](CHANGELOG.md) 7 | * [License](license.md) 8 | -------------------------------------------------------------------------------- /dist/columns-filter.js: -------------------------------------------------------------------------------- 1 | export class ColumnsFilterValueConverter { 2 | toView(array) { 3 | return array.filter(item => item.column.indexOf('.') === -1 && item.searchable); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/columns-filter.js: -------------------------------------------------------------------------------- 1 | export class ColumnsFilterValueConverter { 2 | toView(array) { 3 | return array.filter(item => item.column.indexOf('.') === -1 && item.searchable); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /dist/es2015/columns-filter.js: -------------------------------------------------------------------------------- 1 | export let ColumnsFilterValueConverter = class ColumnsFilterValueConverter { 2 | toView(array) { 3 | return array.filter(item => item.column.indexOf('.') === -1 && item.searchable); 4 | } 5 | }; -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | 11 | # 2 space indentation 12 | [**.*] 13 | indent_style = space 14 | indent_size = 2 -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '5.7.0' 4 | before_install: 5 | - npm install -g jspm 6 | - jspm config registries.github.auth U3Bvb25YOjY2NWIxYWQ2ZTM4ZjUxZGNjMzcwNDBkYzMxYjgxZGVkZjE1M2RjYjg= 7 | before_script: 8 | - jspm -v 9 | - jspm i 10 | - export DISPLAY=:99.0 11 | - sh -e /etc/init.d/xvfb start 12 | notifications: 13 | email: 14 | on_success: change 15 | on_failure: change 16 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | We'd love for you to contribute and to make this project even better than it is today! 4 | If this interests you, please begin by reading our [contributing guidelines](https://github.com/SpoonX/about/blob/master/CONTRIBUTING.md). 5 | The [contributing document](https://github.com/SpoonX/about/blob/master/CONTRIBUTING.md) will provide you with all the information you need to get started. 6 | -------------------------------------------------------------------------------- /dist/native-modules/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | exports.__esModule = true; 4 | 5 | var _aureliaDatatable = require('./aurelia-datatable'); 6 | 7 | Object.keys(_aureliaDatatable).forEach(function (key) { 8 | if (key === "default" || key === "__esModule") return; 9 | Object.defineProperty(exports, key, { 10 | enumerable: true, 11 | get: function get() { 12 | return _aureliaDatatable[key]; 13 | } 14 | }); 15 | }); -------------------------------------------------------------------------------- /book.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "./doc", 3 | "plugins": [ 4 | "edit-link", 5 | "github" 6 | ], 7 | "pluginsConfig": { 8 | "edit-link": { 9 | "base": "https://github.com/SpoonX/aurelia-datatable/edit/master/doc", 10 | "label": "Edit This Page" 11 | }, 12 | "github": { 13 | "url": "https://github.com/spoonx/aurelia-datatable" 14 | }, 15 | "versions": { 16 | "type": "tags" 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /dist/commonjs/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _aureliaDatatable = require('./aurelia-datatable'); 8 | 9 | Object.keys(_aureliaDatatable).forEach(function (key) { 10 | if (key === "default" || key === "__esModule") return; 11 | Object.defineProperty(exports, key, { 12 | enumerable: true, 13 | get: function get() { 14 | return _aureliaDatatable[key]; 15 | } 16 | }); 17 | }); -------------------------------------------------------------------------------- /dist/system/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | System.register(['./aurelia-datatable'], function (_export, _context) { 4 | "use strict"; 5 | 6 | return { 7 | setters: [function (_aureliaDatatable) { 8 | var _exportObj = {}; 9 | 10 | for (var _key in _aureliaDatatable) { 11 | if (_key !== "default" && _key !== "__esModule") _exportObj[_key] = _aureliaDatatable[_key]; 12 | } 13 | 14 | _export(_exportObj); 15 | }], 16 | execute: function () {} 17 | }; 18 | }); -------------------------------------------------------------------------------- /dist/amd/index.js: -------------------------------------------------------------------------------- 1 | define(['exports', './aurelia-datatable'], function (exports, _aureliaDatatable) { 2 | 'use strict'; 3 | 4 | Object.defineProperty(exports, "__esModule", { 5 | value: true 6 | }); 7 | Object.keys(_aureliaDatatable).forEach(function (key) { 8 | if (key === "default" || key === "__esModule") return; 9 | Object.defineProperty(exports, key, { 10 | enumerable: true, 11 | get: function () { 12 | return _aureliaDatatable[key]; 13 | } 14 | }); 15 | }); 16 | }); -------------------------------------------------------------------------------- /dist/native-modules/columns-filter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | exports.__esModule = true; 4 | 5 | 6 | 7 | var ColumnsFilterValueConverter = exports.ColumnsFilterValueConverter = function () { 8 | function ColumnsFilterValueConverter() { 9 | 10 | } 11 | 12 | ColumnsFilterValueConverter.prototype.toView = function toView(array) { 13 | return array.filter(function (item) { 14 | return item.column.indexOf('.') === -1 && item.searchable; 15 | }); 16 | }; 17 | 18 | return ColumnsFilterValueConverter; 19 | }(); -------------------------------------------------------------------------------- /dist/es2015/aurelia-datatable.js: -------------------------------------------------------------------------------- 1 | import { Config } from 'aurelia-view-manager'; 2 | 3 | import { Datatable } from './datatable'; 4 | import { ColumnsFilterValueConverter } from './columns-filter'; 5 | import { ConvertManagerValueConverter } from './convert-manager'; 6 | 7 | export function configure(aurelia) { 8 | aurelia.plugin('aurelia-pager'); 9 | 10 | aurelia.container.get(Config).configureNamespace('spoonx/datatable', { 11 | location: './{{framework}}/{{view}}.html' 12 | }); 13 | 14 | aurelia.globalResources('./datatable'); 15 | } -------------------------------------------------------------------------------- /dist/commonjs/columns-filter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | 8 | 9 | var ColumnsFilterValueConverter = exports.ColumnsFilterValueConverter = function () { 10 | function ColumnsFilterValueConverter() { 11 | 12 | } 13 | 14 | ColumnsFilterValueConverter.prototype.toView = function toView(array) { 15 | return array.filter(function (item) { 16 | return item.column.indexOf('.') === -1 && item.searchable; 17 | }); 18 | }; 19 | 20 | return ColumnsFilterValueConverter; 21 | }(); -------------------------------------------------------------------------------- /.remarkrc: -------------------------------------------------------------------------------- 1 | { 2 | "output": true, 3 | "plugins": { 4 | "lint": { 5 | "maximum-line-length": false, 6 | "heading-style": "atx", 7 | "no-duplicate-headings": false, 8 | "no-undefined-references": false, 9 | "no-shortcut-reference-link": false, 10 | "no-heading-punctuation": ".,;:!", 11 | "list-item-indent": false 12 | } 13 | }, 14 | "settings": { 15 | "gfm": true, 16 | "bullet": "*", 17 | "closeAtx": false, 18 | "fences": true, 19 | "listItemIndent": "1", 20 | "rule": "-", 21 | "ruleRepetition": 10, 22 | "ruleSpaces": false 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /dist/amd/columns-filter.js: -------------------------------------------------------------------------------- 1 | define(['exports'], function (exports) { 2 | 'use strict'; 3 | 4 | Object.defineProperty(exports, "__esModule", { 5 | value: true 6 | }); 7 | 8 | 9 | 10 | var ColumnsFilterValueConverter = exports.ColumnsFilterValueConverter = function () { 11 | function ColumnsFilterValueConverter() { 12 | 13 | } 14 | 15 | ColumnsFilterValueConverter.prototype.toView = function toView(array) { 16 | return array.filter(function (item) { 17 | return item.column.indexOf('.') === -1 && item.searchable; 18 | }); 19 | }; 20 | 21 | return ColumnsFilterValueConverter; 22 | }(); 23 | }); -------------------------------------------------------------------------------- /dist/native-modules/aurelia-datatable.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | exports.__esModule = true; 4 | exports.configure = configure; 5 | 6 | var _aureliaViewManager = require('aurelia-view-manager'); 7 | 8 | var _datatable = require('./datatable'); 9 | 10 | var _columnsFilter = require('./columns-filter'); 11 | 12 | var _convertManager = require('./convert-manager'); 13 | 14 | function configure(aurelia) { 15 | aurelia.plugin('aurelia-pager'); 16 | 17 | aurelia.container.get(_aureliaViewManager.Config).configureNamespace('spoonx/datatable', { 18 | location: './{{framework}}/{{view}}.html' 19 | }); 20 | 21 | aurelia.globalResources('./datatable'); 22 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import {Config} from 'aurelia-view-manager'; 2 | 3 | // added for bundling 4 | import {Datatable} from './datatable'; // eslint-disable-line no-unused-vars 5 | import {ColumnsFilterValueConverter} from './columns-filter'; // eslint-disable-line no-unused-vars 6 | import {ConvertManagerValueConverter} from './convert-manager'; // eslint-disable-line no-unused-vars 7 | 8 | export function configure(aurelia) { 9 | aurelia.plugin('aurelia-pager'); 10 | 11 | aurelia.container.get(Config).configureNamespace('spoonx/datatable', { 12 | location: './{{framework}}/{{view}}.html' 13 | }); 14 | 15 | aurelia.globalResources('./datatable'); 16 | } 17 | -------------------------------------------------------------------------------- /dist/amd/aurelia-datatable.js: -------------------------------------------------------------------------------- 1 | define(['exports', 'aurelia-view-manager', './datatable', './columns-filter', './convert-manager'], function (exports, _aureliaViewManager, _datatable, _columnsFilter, _convertManager) { 2 | 'use strict'; 3 | 4 | Object.defineProperty(exports, "__esModule", { 5 | value: true 6 | }); 7 | exports.configure = configure; 8 | function configure(aurelia) { 9 | aurelia.plugin('aurelia-pager'); 10 | 11 | aurelia.container.get(_aureliaViewManager.Config).configureNamespace('spoonx/datatable', { 12 | location: './{{framework}}/{{view}}.html' 13 | }); 14 | 15 | aurelia.globalResources('./datatable'); 16 | } 17 | }); -------------------------------------------------------------------------------- /doc/README.md: -------------------------------------------------------------------------------- 1 | # Aurelia-datatable 2 | 3 | [View on github](https://github.com/spoonx/aurelia-datatable) 4 | 5 | > A data-table using [aurelia-orm](https://github.com/SpoonX/aurelia-orm) and [aurelia-pager](https://github.com/SpoonX/aurelia-pager). 6 | 7 | Features: 8 | 9 | * Pagination 10 | * Sorting 11 | * Integrated ORM 12 | * Search 13 | * Custom columns (with aliases and value converter) 14 | * Custom button actions 15 | * Custom valueConverters 16 | * Custom criteria 17 | * Expand data to view additional data 18 | * And more 19 | 20 | ## Enjoy 21 | 22 | There's enough to read, so enjoy! Also, feel free to edit these pages if you happen to find a mistake or wish to add something. 23 | -------------------------------------------------------------------------------- /dist/aurelia-datatable.js: -------------------------------------------------------------------------------- 1 | import {Config} from 'aurelia-view-manager'; 2 | 3 | import {Datatable} from './datatable'; 4 | import {ColumnsFilterValueConverter} from './columns-filter'; 5 | import {ConvertManagerValueConverter} from './convert-manager'; 6 | 7 | // added for bundling 8 | // eslint-disable-line no-unused-vars 9 | // eslint-disable-line no-unused-vars 10 | // eslint-disable-line no-unused-vars 11 | 12 | export function configure(aurelia) { 13 | aurelia.plugin('aurelia-pager'); 14 | 15 | aurelia.container.get(Config).configureNamespace('spoonx/datatable', { 16 | location: './{{framework}}/{{view}}.html' 17 | }); 18 | 19 | aurelia.globalResources('./datatable'); 20 | } 21 | -------------------------------------------------------------------------------- /dist/commonjs/aurelia-datatable.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.configure = configure; 7 | 8 | var _aureliaViewManager = require('aurelia-view-manager'); 9 | 10 | var _datatable = require('./datatable'); 11 | 12 | var _columnsFilter = require('./columns-filter'); 13 | 14 | var _convertManager = require('./convert-manager'); 15 | 16 | function configure(aurelia) { 17 | aurelia.plugin('aurelia-pager'); 18 | 19 | aurelia.container.get(_aureliaViewManager.Config).configureNamespace('spoonx/datatable', { 20 | location: './{{framework}}/{{view}}.html' 21 | }); 22 | 23 | aurelia.globalResources('./datatable'); 24 | } -------------------------------------------------------------------------------- /dist/system/columns-filter.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | System.register([], function (_export, _context) { 4 | "use strict"; 5 | 6 | var ColumnsFilterValueConverter; 7 | 8 | 9 | 10 | return { 11 | setters: [], 12 | execute: function () { 13 | _export('ColumnsFilterValueConverter', ColumnsFilterValueConverter = function () { 14 | function ColumnsFilterValueConverter() { 15 | 16 | } 17 | 18 | ColumnsFilterValueConverter.prototype.toView = function toView(array) { 19 | return array.filter(function (item) { 20 | return item.column.indexOf('.') === -1 && item.searchable; 21 | }); 22 | }; 23 | 24 | return ColumnsFilterValueConverter; 25 | }()); 26 | 27 | _export('ColumnsFilterValueConverter', ColumnsFilterValueConverter); 28 | } 29 | }; 30 | }); -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // all default gulp tasks are located in the ./node_modules/spoonx-tools/build-plugin/tasks directory 2 | // gulp default configuration is in files in ./node_modules/spoonx-tools/build-plugin directory 3 | require('require-dir')('node_modules/spoonx-tools/build-plugin/tasks'); 4 | 5 | // 'gulp help' lists the available default tasks 6 | // you can add additional tasks here 7 | // the express server app can be imported and routes added 8 | var app = require('./node_modules/spoonx-tools/build-plugin/tasks/server').app; 9 | 10 | // default: all routes, all methods 11 | app.all('*', function(req, res) { 12 | res.send({ 13 | path : req.path, 14 | query : req.query, 15 | body : req.body, 16 | method : req.method, 17 | contentType : req.header('content-type'), 18 | Authorization: req.header('Authorization'), 19 | originalUrl : req.originalUrl, 20 | access_token : req.body.access_token, 21 | refresh_token: req.body.refresh_token 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aurelia-datatable", 3 | "version": "0.9.2", 4 | "description": "Aurelia-only data tables", 5 | "keywords": [ 6 | "aurelia", 7 | "data", 8 | "table", 9 | "datatable", 10 | "spoonx" 11 | ], 12 | "moduleType": "node", 13 | "homepage": "https://github.com/SpoonX/aurelia-datatable#readme", 14 | "license": "MIT", 15 | "author": "RWOverdijk ", 16 | "contributors": [ 17 | "VMBindraban ", 18 | "jeremyvergnas { 6 | return Promise.resolve([{id: 1, data: 'mocked-data'}]); 7 | } 8 | count = () => { 9 | return Promise.resolve({count: 1}); 10 | } 11 | } 12 | 13 | describe('the Datatable component', () => { 14 | let config = {repository: new MockRepository}; 15 | let component; 16 | 17 | // setup component for each test 18 | beforeEach(() => { 19 | component = StageComponent 20 | .withResources('src/datatable') 21 | .inView('') 22 | .boundTo(config); 23 | 24 | component.configure = aurelia => { 25 | aurelia.use.standardConfiguration() 26 | .feature('src'); 27 | }; 28 | }); 29 | 30 | // destroy component after each test 31 | afterEach(() => { 32 | component.dispose(); 33 | }); 34 | 35 | it('can render the component', done => { 36 | component.create(bootstrap).then(() => { 37 | const pageElement = document.querySelector('datatable'); 38 | 39 | expect(pageElement.getAttribute('au-target-id')).toBeDefined(); 40 | expect(pageElement.innerHTML).toContain('mocked-data'); 41 | 42 | pageElement.querySelector('.pagination'); 43 | expect(pageElement.innerHTML).toBeDefined(); 44 | }).then(done) 45 | .catch(e => { 46 | console.error(e.message, e.stack); 47 | done(); 48 | }); 49 | }); 50 | }); 51 | -------------------------------------------------------------------------------- /src/convert-manager.js: -------------------------------------------------------------------------------- 1 | import {inject} from 'aurelia-dependency-injection'; 2 | import {ViewResources} from 'aurelia-templating'; 3 | import {getLogger} from 'aurelia-logging'; 4 | import typer from 'typer'; 5 | 6 | @inject(ViewResources) 7 | export class ConvertManagerValueConverter { 8 | constructor(viewResources) { 9 | this.viewResources = viewResources; 10 | this.logger = getLogger('aurelia-datatable'); 11 | } 12 | 13 | runConverter(value, converter, convertParams, rowData) { 14 | let valueConverter = this.viewResources.getValueConverter(converter); 15 | 16 | if (valueConverter) { 17 | return valueConverter.toView(value, convertParams, rowData); 18 | } 19 | 20 | this.logger.error('No ValueConverter named "' + converter + '" was found!'); 21 | 22 | return value; 23 | } 24 | 25 | toView(value, converters, rowData) { 26 | if (!converters) { 27 | return value; 28 | } 29 | 30 | if (typeof converters === 'string') { 31 | converters = converters.split(' | '); 32 | } 33 | 34 | for (let converter of converters) { 35 | let index = converter.indexOf(':'); 36 | 37 | if (index < 0) { 38 | value = this.runConverter(value, converter, null, rowData); 39 | 40 | continue; 41 | } 42 | 43 | let name = converter.slice(0, index); 44 | let param = this.parseParams(converter.slice(index + 1).trim()); 45 | 46 | value = this.runConverter(value, name, param, rowData); 47 | } 48 | 49 | return value; 50 | } 51 | 52 | parseParams(str) { 53 | if (!str) { 54 | return null; 55 | } 56 | 57 | if (typer.detect(str) === 'string' && str[0] !== '{') { 58 | return str.substr(1, str.length - 2); 59 | } 60 | 61 | return typer.cast(str); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /dist/convert-manager.js: -------------------------------------------------------------------------------- 1 | import {inject} from 'aurelia-dependency-injection'; 2 | import {ViewResources} from 'aurelia-templating'; 3 | import {getLogger} from 'aurelia-logging'; 4 | import typer from 'typer'; 5 | 6 | @inject(ViewResources) 7 | export class ConvertManagerValueConverter { 8 | constructor(viewResources) { 9 | this.viewResources = viewResources; 10 | this.logger = getLogger('aurelia-datatable'); 11 | } 12 | 13 | runConverter(value, converter, convertParams, rowData) { 14 | let valueConverter = this.viewResources.getValueConverter(converter); 15 | 16 | if (valueConverter) { 17 | return valueConverter.toView(value, convertParams, rowData); 18 | } 19 | 20 | this.logger.error('No ValueConverter named "' + converter + '" was found!'); 21 | 22 | return value; 23 | } 24 | 25 | toView(value, converters, rowData) { 26 | if (!converters) { 27 | return value; 28 | } 29 | 30 | if (typeof converters === 'string') { 31 | converters = converters.split(' | '); 32 | } 33 | 34 | for (let converter of converters) { 35 | let index = converter.indexOf(':'); 36 | 37 | if (index < 0) { 38 | value = this.runConverter(value, converter, null, rowData); 39 | 40 | continue; 41 | } 42 | 43 | let name = converter.slice(0, index); 44 | let param = this.parseParams(converter.slice(index + 1).trim()); 45 | 46 | value = this.runConverter(value, name, param, rowData); 47 | } 48 | 49 | return value; 50 | } 51 | 52 | parseParams(str) { 53 | if (!str) { 54 | return null; 55 | } 56 | 57 | if (typer.detect(str) === 'string' && str[0] !== '{') { 58 | return str.substr(1, str.length - 2); 59 | } 60 | 61 | return typer.cast(str); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /dist/es2015/convert-manager.js: -------------------------------------------------------------------------------- 1 | var _dec, _class; 2 | 3 | import { inject } from 'aurelia-dependency-injection'; 4 | import { ViewResources } from 'aurelia-templating'; 5 | import { getLogger } from 'aurelia-logging'; 6 | import typer from 'typer'; 7 | 8 | export let ConvertManagerValueConverter = (_dec = inject(ViewResources), _dec(_class = class ConvertManagerValueConverter { 9 | constructor(viewResources) { 10 | this.viewResources = viewResources; 11 | this.logger = getLogger('aurelia-datatable'); 12 | } 13 | 14 | runConverter(value, converter, convertParams, rowData) { 15 | let valueConverter = this.viewResources.getValueConverter(converter); 16 | 17 | if (valueConverter) { 18 | return valueConverter.toView(value, convertParams, rowData); 19 | } 20 | 21 | this.logger.error('No ValueConverter named "' + converter + '" was found!'); 22 | 23 | return value; 24 | } 25 | 26 | toView(value, converters, rowData) { 27 | if (!converters) { 28 | return value; 29 | } 30 | 31 | if (typeof converters === 'string') { 32 | converters = converters.split(' | '); 33 | } 34 | 35 | for (let converter of converters) { 36 | let index = converter.indexOf(':'); 37 | 38 | if (index < 0) { 39 | value = this.runConverter(value, converter, null, rowData); 40 | 41 | continue; 42 | } 43 | 44 | let name = converter.slice(0, index); 45 | let param = this.parseParams(converter.slice(index + 1).trim()); 46 | 47 | value = this.runConverter(value, name, param, rowData); 48 | } 49 | 50 | return value; 51 | } 52 | 53 | parseParams(str) { 54 | if (!str) { 55 | return null; 56 | } 57 | 58 | if (typer.detect(str) === 'string' && str[0] !== '{') { 59 | return str.substr(1, str.length - 2); 60 | } 61 | 62 | return typer.cast(str); 63 | } 64 | }) || _class); -------------------------------------------------------------------------------- /spoonx.js: -------------------------------------------------------------------------------- 1 | /************************************************/ 2 | /* spoonx-tools configuration */ 3 | /* @see https://github.com/SpoonX/spoonx-tools */ 4 | /************************************************/ 5 | 6 | var appRoot = 'src/'; 7 | 8 | module.exports = { 9 | path: { 10 | root: appRoot, 11 | 12 | /* options and their defaults */ 13 | 14 | /* js files to ignore 15 | * 16 | * ignore: [], 17 | */ 18 | 19 | /* future use: use TypeScript or Babel for transpiling 20 | * 21 | * useTypeScriptForDTS: false, 22 | */ 23 | 24 | /* Imports to append to the import block of the main file. 25 | * Add here eg. non-concated local imports in the main file as they will 26 | * get removed during the build process (ValueConverters, CustomElements). 27 | * 28 | * importsToAdd: ["import {AssociationSelect} from './association-select';"], 29 | */ 30 | importsToAdd: [ 31 | "import {Datatable} from './datatable';", 32 | "import {ColumnsFilterValueConverter} from './columns-filter';", 33 | "import {ConvertManagerValueConverter} from './convert-manager';" 34 | ], 35 | 36 | /* js to be transpiled, but not be concated 37 | * (ValueConverters, CustomElements) 38 | * 39 | * jsResources: [appRoot + 'association-select.js'], 40 | */ 41 | jsResources: [ 42 | appRoot + 'datatable.js', 43 | appRoot + 'columns-filter.js', 44 | appRoot + 'convert-manager.js' 45 | ], 46 | 47 | /* other resources that need to get copied keeping their path 48 | * resources: appRoot + '{** / *.css,** / *.html}', 49 | */ 50 | resources: appRoot + '{**/*.css,**/*.html}', 51 | 52 | /* imports that are only used internally, eg 'extend'. no need to d.ts export them 53 | * 54 | * importsToIgnoreForDts: ['extend'], 55 | */ 56 | importsToIgnoreForDts: ['typer'], 57 | 58 | /* sort when concating 59 | * sort: true, 60 | */ 61 | sort: true, 62 | 63 | /* concat js files 64 | * concat: true, 65 | */ 66 | concat: true, 67 | 68 | /* default options overwrites for karma 69 | * karma: {browsers: ['Chrome']} 70 | */ 71 | karma: { 72 | jspm: { 73 | // Edit this to your needs 74 | loadFiles: ['test/setup.js', 'test/**/*.spec.js'], 75 | serveFiles: ['src/**/*', 'test/resources/**/*'] 76 | } 77 | } 78 | } 79 | }; 80 | -------------------------------------------------------------------------------- /doc/installation.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | 3 | ## Uses 4 | 5 | Aurelia-datatable needs following plugins installed and configured: 6 | 7 | * [aurelia-view-manager](https://www.npmjs.com/package/aurelia-view-manager) 8 | * [aurelia-pager](https://www.npmjs.com/package/aurelia-pager) 9 | * [aurelia-orm](https://www.npmjs.com/package/aurelia-orm). 10 | 11 | ## Aureli-Cli 12 | 13 | Run `npm i aurelia-datatable --save` from your project root. 14 | 15 | Aurelia-view-manager uses [homefront](https://www.npmjs.com/package/homefront), so add following to the `build.bundles.dependencies` section of `aurelia-project/aurelia.json`: 16 | 17 | ```js 18 | "dependencies": [ 19 | { 20 | "name": "homefront", 21 | "path": "../node_modules/homefront/dist", 22 | "main": "index" 23 | }, 24 | { 25 | "name": "aurelia-datatable", 26 | "path": "../node_modules/aurelia-datatable/dist/amd", 27 | "main": "aurelia-datatable", 28 | "resources": [ 29 | "bootstrap/datatable.html" 30 | ] 31 | }, 32 | // ... 33 | ], 34 | ``` 35 | 36 | ## Jspm 37 | 38 | Run `jspm i aurelia-datatable` from your project root. 39 | 40 | Aurelia-view-manager uses [homefront](https://www.npmjs.com/package/homefront), so add following to the `bundles.dist.aurelia.includes` section of `build/bundles.js`: 41 | 42 | ```js 43 | "homefront", 44 | "aurelia-datatable", 45 | "[aurelia-datatable/**/*.js]", 46 | "aurelia-datatable/**/*.html!text", 47 | ``` 48 | 49 | If the installation results in having forks, try resolving them by running: 50 | 51 | ```sh 52 | jspm inspect --forks 53 | jspm resolve --only registry:package-name@version 54 | ``` 55 | 56 | ## Webpack 57 | 58 | Run `npm i aurelia-datatable --save` from your project root. 59 | 60 | And add `aurelia-datatable` in the `coreBundles.aurelia` section of your `webpack.config.js`. 61 | 62 | ## Typescript 63 | 64 | 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`. 65 | 66 | ## Configuration 67 | 68 | ### Activate 69 | Activate the plugin in `main.js`: 70 | 71 | ```js 72 | export function configure(aurelia) { 73 | aurelia.use 74 | .standardConfiguration() 75 | .developmentLogging() 76 | .plugin('aurelia-datatable'); 77 | 78 | aurelia.start().then(() => aurelia.setRoot()); 79 | } 80 | ``` 81 | 82 | ### ORM 83 | Follow the steps in the [aurelia-orm documentation](https://aurelia-orm.spoonx.org/quick-start.html) to configure your api endpoints. 84 | -------------------------------------------------------------------------------- /dist/aurelia-datatable.d.ts: -------------------------------------------------------------------------------- 1 | import {Config,resolvedView} from 'aurelia-view-manager'; 2 | import {inject} from 'aurelia-dependency-injection'; 3 | import {ViewResources,bindable,customElement} from 'aurelia-templating'; 4 | import {getLogger} from 'aurelia-logging'; 5 | import {PLATFORM} from 'aurelia-pal'; 6 | import {bindingMode,computedFrom} from 'aurelia-binding'; 7 | import {EntityManager} from 'aurelia-orm'; 8 | import {Router} from 'aurelia-router'; 9 | import {Homefront} from 'homefront'; 10 | 11 | // added for bundling 12 | // eslint-disable-line no-unused-vars 13 | // eslint-disable-line no-unused-vars 14 | // eslint-disable-line no-unused-vars 15 | export declare function configure(aurelia?: any): any; 16 | export declare class ColumnsFilterValueConverter { 17 | toView(array?: any): any; 18 | } 19 | export declare class ConvertManagerValueConverter { 20 | constructor(viewResources?: any); 21 | runConverter(value?: any, converter?: any, convertParams?: any, rowData?: any): any; 22 | toView(value?: any, converters?: any, rowData?: any): any; 23 | parseParams(str?: any): any; 24 | } 25 | export declare class DataTable { 26 | criteria: any; 27 | where: any; 28 | limit: any; 29 | columns: any; 30 | searchColumn: any; 31 | actions: any; 32 | searchable: any; 33 | sortable: any; 34 | edit: any; 35 | destroy: any; 36 | page: any; 37 | loadingIndicator: any; 38 | populate: any; 39 | detailView: any; 40 | sortNested: any; 41 | select: any; 42 | repository: any; 43 | resource: any; 44 | data: any; 45 | route: any; 46 | pages: any; 47 | footer: any; 48 | loading: any; 49 | hasVisibleActions: any; 50 | offlineMode: any; 51 | constructor(router?: any, element?: any, entityManager?: any); 52 | attached(): any; 53 | detached(): any; 54 | pageChanged(): any; 55 | limitChanged(): any; 56 | load(): any; 57 | gatherData(criteria?: any): any; 58 | populateEntity(row?: any): any; 59 | doDestroy(row?: any, index?: any): any; 60 | doEdit(row?: any, index?: any): any; 61 | doCustomAction(action?: any, row?: any, index?: any): any; 62 | checkDisabled(action?: any, row?: any): any; 63 | checkVisibility(action?: any, row?: any): any; 64 | showActions(): any; 65 | doSort(columnLabel?: any): any; 66 | searchColumnChanged(newValue?: any, oldValue?: any): any; 67 | doSearch(): any; 68 | reload(): any; 69 | colspan: any; 70 | columnLabels: any; 71 | triggerEvent(event?: any, payload?: any): any; 72 | selected(row?: any, columnOptions?: any): any; 73 | isSortable(column?: any): any; 74 | displayValue(row?: any, propertyName?: any): any; 75 | collapseRow(row?: any): any; 76 | } -------------------------------------------------------------------------------- /dist/native-modules/convert-manager.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | exports.__esModule = true; 4 | exports.ConvertManagerValueConverter = undefined; 5 | 6 | var _dec, _class; 7 | 8 | var _aureliaDependencyInjection = require('aurelia-dependency-injection'); 9 | 10 | var _aureliaTemplating = require('aurelia-templating'); 11 | 12 | var _aureliaLogging = require('aurelia-logging'); 13 | 14 | var _typer = require('typer'); 15 | 16 | var _typer2 = _interopRequireDefault(_typer); 17 | 18 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 19 | 20 | 21 | 22 | var ConvertManagerValueConverter = exports.ConvertManagerValueConverter = (_dec = (0, _aureliaDependencyInjection.inject)(_aureliaTemplating.ViewResources), _dec(_class = function () { 23 | function ConvertManagerValueConverter(viewResources) { 24 | 25 | 26 | this.viewResources = viewResources; 27 | this.logger = (0, _aureliaLogging.getLogger)('aurelia-datatable'); 28 | } 29 | 30 | ConvertManagerValueConverter.prototype.runConverter = function runConverter(value, converter, convertParams, rowData) { 31 | var valueConverter = this.viewResources.getValueConverter(converter); 32 | 33 | if (valueConverter) { 34 | return valueConverter.toView(value, convertParams, rowData); 35 | } 36 | 37 | this.logger.error('No ValueConverter named "' + converter + '" was found!'); 38 | 39 | return value; 40 | }; 41 | 42 | ConvertManagerValueConverter.prototype.toView = function toView(value, converters, rowData) { 43 | if (!converters) { 44 | return value; 45 | } 46 | 47 | if (typeof converters === 'string') { 48 | converters = converters.split(' | '); 49 | } 50 | 51 | for (var _iterator = converters, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { 52 | var _ref; 53 | 54 | if (_isArray) { 55 | if (_i >= _iterator.length) break; 56 | _ref = _iterator[_i++]; 57 | } else { 58 | _i = _iterator.next(); 59 | if (_i.done) break; 60 | _ref = _i.value; 61 | } 62 | 63 | var converter = _ref; 64 | 65 | var index = converter.indexOf(':'); 66 | 67 | if (index < 0) { 68 | value = this.runConverter(value, converter, null, rowData); 69 | 70 | continue; 71 | } 72 | 73 | var name = converter.slice(0, index); 74 | var param = this.parseParams(converter.slice(index + 1).trim()); 75 | 76 | value = this.runConverter(value, name, param, rowData); 77 | } 78 | 79 | return value; 80 | }; 81 | 82 | ConvertManagerValueConverter.prototype.parseParams = function parseParams(str) { 83 | if (!str) { 84 | return null; 85 | } 86 | 87 | if (_typer2.default.detect(str) === 'string' && str[0] !== '{') { 88 | return str.substr(1, str.length - 2); 89 | } 90 | 91 | return _typer2.default.cast(str); 92 | }; 93 | 94 | return ConvertManagerValueConverter; 95 | }()) || _class); -------------------------------------------------------------------------------- /dist/commonjs/convert-manager.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.ConvertManagerValueConverter = undefined; 7 | 8 | var _dec, _class; 9 | 10 | var _aureliaDependencyInjection = require('aurelia-dependency-injection'); 11 | 12 | var _aureliaTemplating = require('aurelia-templating'); 13 | 14 | var _aureliaLogging = require('aurelia-logging'); 15 | 16 | var _typer = require('typer'); 17 | 18 | var _typer2 = _interopRequireDefault(_typer); 19 | 20 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 21 | 22 | 23 | 24 | var ConvertManagerValueConverter = exports.ConvertManagerValueConverter = (_dec = (0, _aureliaDependencyInjection.inject)(_aureliaTemplating.ViewResources), _dec(_class = function () { 25 | function ConvertManagerValueConverter(viewResources) { 26 | 27 | 28 | this.viewResources = viewResources; 29 | this.logger = (0, _aureliaLogging.getLogger)('aurelia-datatable'); 30 | } 31 | 32 | ConvertManagerValueConverter.prototype.runConverter = function runConverter(value, converter, convertParams, rowData) { 33 | var valueConverter = this.viewResources.getValueConverter(converter); 34 | 35 | if (valueConverter) { 36 | return valueConverter.toView(value, convertParams, rowData); 37 | } 38 | 39 | this.logger.error('No ValueConverter named "' + converter + '" was found!'); 40 | 41 | return value; 42 | }; 43 | 44 | ConvertManagerValueConverter.prototype.toView = function toView(value, converters, rowData) { 45 | if (!converters) { 46 | return value; 47 | } 48 | 49 | if (typeof converters === 'string') { 50 | converters = converters.split(' | '); 51 | } 52 | 53 | for (var _iterator = converters, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { 54 | var _ref; 55 | 56 | if (_isArray) { 57 | if (_i >= _iterator.length) break; 58 | _ref = _iterator[_i++]; 59 | } else { 60 | _i = _iterator.next(); 61 | if (_i.done) break; 62 | _ref = _i.value; 63 | } 64 | 65 | var converter = _ref; 66 | 67 | var index = converter.indexOf(':'); 68 | 69 | if (index < 0) { 70 | value = this.runConverter(value, converter, null, rowData); 71 | 72 | continue; 73 | } 74 | 75 | var name = converter.slice(0, index); 76 | var param = this.parseParams(converter.slice(index + 1).trim()); 77 | 78 | value = this.runConverter(value, name, param, rowData); 79 | } 80 | 81 | return value; 82 | }; 83 | 84 | ConvertManagerValueConverter.prototype.parseParams = function parseParams(str) { 85 | if (!str) { 86 | return null; 87 | } 88 | 89 | if (_typer2.default.detect(str) === 'string' && str[0] !== '{') { 90 | return str.substr(1, str.length - 2); 91 | } 92 | 93 | return _typer2.default.cast(str); 94 | }; 95 | 96 | return ConvertManagerValueConverter; 97 | }()) || _class); -------------------------------------------------------------------------------- /dist/amd/convert-manager.js: -------------------------------------------------------------------------------- 1 | define(['exports', 'aurelia-dependency-injection', 'aurelia-templating', 'aurelia-logging', 'typer'], function (exports, _aureliaDependencyInjection, _aureliaTemplating, _aureliaLogging, _typer) { 2 | 'use strict'; 3 | 4 | Object.defineProperty(exports, "__esModule", { 5 | value: true 6 | }); 7 | exports.ConvertManagerValueConverter = undefined; 8 | 9 | var _typer2 = _interopRequireDefault(_typer); 10 | 11 | function _interopRequireDefault(obj) { 12 | return obj && obj.__esModule ? obj : { 13 | default: obj 14 | }; 15 | } 16 | 17 | 18 | 19 | var _dec, _class; 20 | 21 | var ConvertManagerValueConverter = exports.ConvertManagerValueConverter = (_dec = (0, _aureliaDependencyInjection.inject)(_aureliaTemplating.ViewResources), _dec(_class = function () { 22 | function ConvertManagerValueConverter(viewResources) { 23 | 24 | 25 | this.viewResources = viewResources; 26 | this.logger = (0, _aureliaLogging.getLogger)('aurelia-datatable'); 27 | } 28 | 29 | ConvertManagerValueConverter.prototype.runConverter = function runConverter(value, converter, convertParams, rowData) { 30 | var valueConverter = this.viewResources.getValueConverter(converter); 31 | 32 | if (valueConverter) { 33 | return valueConverter.toView(value, convertParams, rowData); 34 | } 35 | 36 | this.logger.error('No ValueConverter named "' + converter + '" was found!'); 37 | 38 | return value; 39 | }; 40 | 41 | ConvertManagerValueConverter.prototype.toView = function toView(value, converters, rowData) { 42 | if (!converters) { 43 | return value; 44 | } 45 | 46 | if (typeof converters === 'string') { 47 | converters = converters.split(' | '); 48 | } 49 | 50 | for (var _iterator = converters, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { 51 | var _ref; 52 | 53 | if (_isArray) { 54 | if (_i >= _iterator.length) break; 55 | _ref = _iterator[_i++]; 56 | } else { 57 | _i = _iterator.next(); 58 | if (_i.done) break; 59 | _ref = _i.value; 60 | } 61 | 62 | var converter = _ref; 63 | 64 | var index = converter.indexOf(':'); 65 | 66 | if (index < 0) { 67 | value = this.runConverter(value, converter, null, rowData); 68 | 69 | continue; 70 | } 71 | 72 | var name = converter.slice(0, index); 73 | var param = this.parseParams(converter.slice(index + 1).trim()); 74 | 75 | value = this.runConverter(value, name, param, rowData); 76 | } 77 | 78 | return value; 79 | }; 80 | 81 | ConvertManagerValueConverter.prototype.parseParams = function parseParams(str) { 82 | if (!str) { 83 | return null; 84 | } 85 | 86 | if (_typer2.default.detect(str) === 'string' && str[0] !== '{') { 87 | return str.substr(1, str.length - 2); 88 | } 89 | 90 | return _typer2.default.cast(str); 91 | }; 92 | 93 | return ConvertManagerValueConverter; 94 | }()) || _class); 95 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aurelia-datatable", 3 | "version": "0.9.2", 4 | "description": "Aurelia-only data tables", 5 | "keywords": [ 6 | "spoonx", 7 | "aurelia", 8 | "plugin", 9 | "data", 10 | "table", 11 | "datatable" 12 | ], 13 | "homepage": "https://github.com/SpoonX/aurelia-datatable#readme", 14 | "bugs": { 15 | "url": "https://github.com/SpoonX/aurelia-datatable/issues" 16 | }, 17 | "license": "MIT", 18 | "author": "RWOverdijk ", 19 | "contributors": [ 20 | "VMBindraban ", 21 | "jeremyvergnas = _iterator.length) break; 55 | _ref = _iterator[_i++]; 56 | } else { 57 | _i = _iterator.next(); 58 | if (_i.done) break; 59 | _ref = _i.value; 60 | } 61 | 62 | var converter = _ref; 63 | 64 | var index = converter.indexOf(':'); 65 | 66 | if (index < 0) { 67 | value = this.runConverter(value, converter, null, rowData); 68 | 69 | continue; 70 | } 71 | 72 | var name = converter.slice(0, index); 73 | var param = this.parseParams(converter.slice(index + 1).trim()); 74 | 75 | value = this.runConverter(value, name, param, rowData); 76 | } 77 | 78 | return value; 79 | }; 80 | 81 | ConvertManagerValueConverter.prototype.parseParams = function parseParams(str) { 82 | if (!str) { 83 | return null; 84 | } 85 | 86 | if (typer.detect(str) === 'string' && str[0] !== '{') { 87 | return str.substr(1, str.length - 2); 88 | } 89 | 90 | return typer.cast(str); 91 | }; 92 | 93 | return ConvertManagerValueConverter; 94 | }()) || _class)); 95 | 96 | _export('ConvertManagerValueConverter', ConvertManagerValueConverter); 97 | } 98 | }; 99 | }); -------------------------------------------------------------------------------- /src/bootstrap/datatable.html: -------------------------------------------------------------------------------- 1 | 108 | -------------------------------------------------------------------------------- /dist/amd/bootstrap/datatable.html: -------------------------------------------------------------------------------- 1 | 108 | -------------------------------------------------------------------------------- /dist/bootstrap/datatable.html: -------------------------------------------------------------------------------- 1 | 108 | -------------------------------------------------------------------------------- /dist/commonjs/bootstrap/datatable.html: -------------------------------------------------------------------------------- 1 | 108 | -------------------------------------------------------------------------------- /dist/es2015/bootstrap/datatable.html: -------------------------------------------------------------------------------- 1 | 108 | -------------------------------------------------------------------------------- /dist/system/bootstrap/datatable.html: -------------------------------------------------------------------------------- 1 | 108 | -------------------------------------------------------------------------------- /dist/native-modules/bootstrap/datatable.html: -------------------------------------------------------------------------------- 1 | 108 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Archived 2 | 3 | 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. 4 | 5 | You deserve better, and for that reason we've decided to archive some repositories, which includes this one. 6 | 7 | Feel free to fork and alter the repositories, and go forth making awesome stuff. 8 | 9 | # aurelia-datatable 10 | 11 | [![Build Status](https://travis-ci.org/SpoonX/aurelia-datatable.svg)](https://travis-ci.org/SpoonX/aurelia-datatable) 12 | [![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg?maxAge=2592000?style=plastic)](https://gitter.im/SpoonX/Dev) 13 | 14 | A data-table using [aurelia-orm](https://github.com/SpoonX/aurelia-orm) and [aurelia-pager](https://github.com/SpoonX/aurelia-pager) 15 | 16 | Features: 17 | 18 | * Pagination 19 | * Sorting 20 | * Integrated ORM 21 | * Search 22 | * Custom columns 23 | * Custom button actions 24 | * Custom valueConverters 25 | * Expand data to view additional data 26 | * And more 27 | 28 | ## Uses 29 | 30 | Aurelia-datatable needs following plugins installed and configured: 31 | 32 | * [aurelia-view-manager](https://www.npmjs.com/package/aurelia-view-manager) 33 | * [aurelia-pager](https://www.npmjs.com/package/aurelia-pager) 34 | * [aurelia-orm](https://www.npmjs.com/package/aurelia-orm). 35 | 36 | ## Documentation 37 | 38 | You can find usage examples and the documentation [here](http://aurelia-datatable.spoonx.org/). 39 | 40 | The [changelog](doc/changelog.md) provides you with information about important changes. 41 | 42 | ## Example 43 | Here's a snippet to give you an idea of what this module supports. 44 | ### Online mode 45 | ```js 46 | this.repository = entityManager.getRepository('users'); 47 | ``` 48 | 49 | ```html 50 | 62 | ``` 63 | 64 | ### Offline mode 65 | ```js 66 | this.data = [{id: 1, name: 'Pipo'}, {id: 2, name: 'Mario'}]; 67 | ``` 68 | 69 | ```html 70 | 79 | ``` 80 | ## Installation 81 | 82 | ### Aureli-Cli 83 | 84 | Run `npm i aurelia-datatable --save` from your project root. 85 | 86 | Aurelia-view-manager uses [homefront](https://www.npmjs.com/package/homefront), so add following to the `build.bundles.dependencies` section of `aurelia-project/aurelia.json`: 87 | 88 | ```js 89 | "dependencies": [ 90 | { 91 | "name": "homefront", 92 | "path": "../node_modules/homefront/dist", 93 | "main": "index" 94 | }, 95 | { 96 | "name": "aurelia-datatable", 97 | "path": "../node_modules/aurelia-datatable/dist/amd", 98 | "main": "aurelia-datatable", 99 | "resources": [ 100 | "bootstrap/datatable.html" 101 | ] 102 | }, 103 | // ... 104 | ], 105 | ``` 106 | 107 | ### Jspm 108 | 109 | Run `jspm i aurelia-datatable` from your project root. 110 | 111 | Aurelia-datatable uses [homefront](https://www.npmjs.com/package/homefront), so add following to the `bundles.dist.aurelia.includes` section of `build/bundles.js`: 112 | 113 | ```js 114 | "homefront", 115 | "aurelia-datatable", 116 | "[aurelia-datatable/**/*.js]", 117 | "aurelia-datatable/**/*.html!text", 118 | ``` 119 | 120 | If the installation results in having forks, try resolving them by running: 121 | 122 | ```sh 123 | jspm inspect --forks 124 | jspm resolve --only registry:package-name@version 125 | ``` 126 | 127 | ### Webpack 128 | 129 | Run `npm i aurelia-datatable --save` from your project root. 130 | 131 | And add `aurelia-datatable` in the `coreBundles.aurelia` section of your `webpack.config.js`. 132 | 133 | ### Typescript 134 | 135 | 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`. 136 | 137 | ## Configuration 138 | 139 | ### Activate 140 | Activate the plugin in `main.js`: 141 | 142 | ```js 143 | export function configure(aurelia) { 144 | aurelia.use 145 | .standardConfiguration() 146 | .developmentLogging() 147 | .plugin('aurelia-datatable'); 148 | 149 | aurelia.start().then(() => aurelia.setRoot()); 150 | } 151 | ``` 152 | 153 | ### ORM 154 | Follow the steps in the [aurelia-orm documentation](https://aurelia-orm.spoonx.org/quick-start.html) to configure your api endpoints. 155 | -------------------------------------------------------------------------------- /doc/usage.md: -------------------------------------------------------------------------------- 1 | # Usage 2 | ## Online mode 3 | ```js 4 | this.repository = entityManager.getRepository('users'); 5 | ``` 6 | 7 | ```html 8 | 20 | ``` 21 | ## Offline mode 22 | ```js 23 | this.data = [{id: 1, name: 'Pipo'}, {id: 2, name: 'Mario'}]; 24 | ``` 25 | 26 | ```html 27 | 36 | ``` 37 | ## Attributes 38 | Datatable supports a couple of attributes allowing you to customize behavior. 39 | 40 | ### columns 41 | Comma-separated string representing the column names to display. Or Array of objects describing the columns. 42 | 43 | Example: 44 | 45 | ```html 46 | 47 | ``` 48 | 49 | ```js 50 | export class List { 51 | columns = [{ 52 | property: 'id' 53 | }, { 54 | property: 'name', 55 | label : 'username', 56 | valueConverters: ['toLowerCase'] 57 | }, { 58 | property : 'group.name', 59 | label : 'Group name', 60 | route : { 61 | name : 'groups', // The name of your route in your application 62 | params: {group: 'id'} // Optional. Paramaters required for the given route. ({name: 'value'}) 63 | }, 64 | { 65 | property: 'created_at', 66 | label: 'created_at', 67 | searchable: false 68 | } 69 | }]; 70 | } 71 | ``` 72 | By default, searchable for each column will be set `true`. If you dont want to search on that column, let set `searchable` to `false`. 73 | 74 | This is used for table content, but also the table headers. There's support for nested objects, as well as aliases. Example: 75 | 76 | #### Simple 77 | ```html 78 | 79 | ``` 80 | 81 | #### Aliased 82 | ```html 83 | 84 | ``` 85 | 86 | #### Full-blown 87 | ```html 88 | 89 | ``` 90 | 91 | #### valueConverters 92 | You can give every colum one or more `valueConverter`s (`|` seperated). You need to define the converters in your `main.js` as a global resource. *[More information](http://eisenbergeffect.bluespire.com/binding-with-value-converters-in-aurelia/)() 93 | 94 | Note: In the `toView()` of the valueConverter there is a 3rd parameter that includes the data of the row. This can be useful if you want to convert something based on a other column. For example price and currency. 95 | 96 | Example: 97 | 98 | ```js 99 | export function configure(aurelia) { 100 | aurelia.use 101 | .standardConfiguration() 102 | .globalResources('dateFormatValueConverter') 103 | .globalResources('priceFormatValueConverter') 104 | } 105 | ``` 106 | 107 | ```html 108 | 112 | ``` 113 | 114 | ### repository (Online mode only) 115 | When given a repository, the datatable will use it to populate the table with. 116 | 117 | This is as simple as `EntityManager.getRepository('resource')`. 118 | 119 | *[More information](http://aurelia-orm.spoonx.org/api_repository.html)*. 120 | 121 | ### resource (Online mode only) 122 | This tells the component which repository to get. 123 | This takes away the code you'd otherwise have to write with the `repository` attribute. 124 | 125 | ### limit (Online mode only) 126 | Number of rows to show per-page. Defaults to 30. 127 | 128 | ### where (Online mode only) 129 | A simple object containing a where clause to restrict the data returned from the API. 130 | 131 | **Note:** Only useful when combined with `resource` or `repository`. 132 | 133 | Example: 134 | 135 | ```js 136 | this.where = {group: 5, price: {'>': 10}}; 137 | ``` 138 | 139 | ```html 140 | 141 | ``` 142 | 143 | ### searchable (Online mode only) 144 | Allow the user to search through the datatable. This will display a dropdown (`