ember-bootstrap-table v1.0.0

Ember-bootstrap-table

Table component built using Ember 2.5. It is built as ember component and available as ember-cli addon. It support both in memory operations and server side operations to support large data. it also allows you to handle very large data by only rendering the rows that are being displayed.

Supported features

Supports all features of Bootstrap Table with below additional features

• Column sorting, both ascending and decending.
• Default column sorting, sort table by a column when table is rendered
• Free text filter, can be extended to add customised filter
• Default filter is supported, filters table rows by default key when table is rendered
• Navigation buttons, rendered using block content and hence can be customizable as needed
• Row selection, single and multiple
• Pagination, page size is configurable
• Customizable as needed like to add action buttons in column cells, to highlight a row or a cell
• Server side pagination, sorting and filtering

Dependencies

• Ember 2.5.0
• Ember-cli 2.5.0
• Twitter Bootstrap 3.3.4, only CSS

Instalation

bower install ember-bootstrap-table --save

Developing or setting up this project on your computer

• git clone https://github.com/radireddy/ember-bootstrap-table.git
• npm install
• bower install
• bower install bootstrap

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests (no test cases added as of now)

• npm test (Runs ember try:testall to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

Contributing

Interested in contributing to this addon, please contact me on adireddyravindra@gmail.com

For more information on using ember-cli, visit http://ember-cli.com/.

Developer Guide

Usage

To create simple table, do following,

• In your template use component as below

     {{#eb-table
          pageSize=10
          content=users
          columns=columns}}
      {{/eb-table}}

• In your controller define columns and users array as below

  import Ember from 'ember';
  import ColumnDefinition from 'ember-bootstrap-table/models/column-definition';
  
  export default Ember.Controller.extend({
  
      users: [{firstName: 'James', lastName: 'Carter', age: 30},
                  {firstName: 'Steven', lastName: 'Smith', age: 35}]
  
      columns: Ember.computed(function() {
          var col1 = ColumnDefinition.create({
              header: 'First Name',
              isSortable: false,
              contentPath: 'firstName',
              isFilterable: true
          });
          var col2 = ColumnDefinition.create({
              header: 'Last Name',
              isSortable: false,
              contentPath: 'lastName',
              isFilterable: true
          });
          var col3 = ColumnDefinition.create({
              header: 'Age',
              isSortable: false,
              contentPath: 'age',
              textAlign: 'center',
              isFilterable: true
          });
          return [col1, col2, col3];
      })
  };

• Table looks like this

Table Options

Column Options

Column options are passed to table as an array of 'column-definition' model. Each column need to extend 'column-definition' model and override column options if required.

Remote Table Options

All options mentioned above are applicable along with some additional options mentioned below.

Table images