aurelia-grid

A data grid plugin for Aurelia with sorting and filtering capabilities.

<grid>
  <template replace-part="grid-template">
    <grid-column property="name" filterable sortable></grid-column>
    <grid-column-checkbox property="active" filterable sortable></grid-column-checkbox>
    <grid-column-button 
         caption="Select"
         button-click.call="$parent.$parent.select($event)">
    </grid-column-button>
    <grid-column-template heading="Custom">
      <template replace-part="custom-template">
        <compose view="./demo-custom-column-template.html" 
                 containerless>
        </compose>
      </template>
    </grid-column-template>
    <grid-column-edit></grid-column-edit>
  </template>

  <template replace-part="grid-footer-template">
    <td colspan.bind="columns.length">Footer Here!</td>
  </template>
</grid>

Live Demo

Aurelia-DataGrid Demo

Documentation

• Installation
• Getting started
  • Bootstrap
  • Semantic-UI
• Grid
• Column Templates
  • grid-column
  • grid-column-button
  • grid-column-checkbox
  • grid-column-edit
  • grid-column-template
• Footer template
• Configuration
  • Global settings
  • Grid level settings
• Custom filtering
  • applyFilter(filter) method
• Custom sorting
  • applySort(sort) method

Dependencies

• aurelia-binding
• aurelia-dependency-injection
• aurelia-templating
• lodash
• bootstrap**
• Semantic-UI**

** The grid can be configured to use either Bootstrap or Semantic-UI. One of these packages must be manually installed depending on which framework you wish to use. By default, the grid is configured to use Bootstrap.

Used By

This library isn't used by Aurelia. It is an optional plugin.

Platform Support

This library can be used in the browser.

Building The Code

To build the code, follow these steps.

1. Ensure that NodeJS is installed. This provides the platform on which the build tooling runs.
2. From the project folder, execute the following command:

npm install

3. Ensure that Gulp is installed. If you need to install it, use the following command:

npm install -g gulp

4. To build the code, you can now run:

gulp build

5. You will find the compiled code in the dist folder, available in four module formats: AMD, CommonJS and ES6.

6. See gulpfile.js for other tasks related to generating the docs and linting.