jtneill / aurelia-datagrid

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

aurelia-grid

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

  <grid css-framework="bootstrap" data-source.bind="samples">
    <template replace-part="grid-template">
      <grid-column property="name" filterable sortable></grid-column>
      <grid-column property="title" alignment="center" filterable sortable></grid-column>
      <grid-column-checkbox property="active" filterable sortable></grid-column-checkbox>
      <grid-column-button heading="Action" caption="Select" 
          button-click.call="select(row.id)">
      </grid-column-button>
      
      <grid-column-template heading="Custom">
        <template replace-part="custom-template">
          <div class="input-group">
            <span class="input-group-addon">
              <input type="radio" aria-label="...">
              <input type="radio" aria-label="...">
            </span>
            <input type="text" class="form-control" aria-label="...">
          </div>
        </template>
      </grid-column-template>
      
      <grid-column-edit></grid-column-edit>
    </template>

    <template replace-part="grid-footer-template">
      <td colspan.bind="columns.length">
        Total Items: ${samples.length}
      </td>
    </template>
  </grid>

Live Demo

Aurelia-DataGrid Demo

Sample Web App Using the Plugin

Aurelia-DataGrid Examples

Documentation

Current Release (@v0.1.5)

• Installation
• Getting started
  • Bootstrap
  • Semantic-UI
• Grid
  • Row selected event
• 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
• Custom sorting
  • applySort(sort) method

Release @v0.1.4

Release @v0.1.3

Examples

• All Examples
• Paging

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.