GithubHelp home page GithubHelp logo

balos1 / ember-table Goto Github PK

View Code? Open in Web Editor NEW

This project forked from addepar/ember-table

0.0 2.0 0.0 12.91 MB

Home Page: http://addepar.github.com/ember-table/

License: Other

JavaScript 88.04% CSS 3.59% HTML 8.37%

ember-table's Introduction

Ember Table

An addon to support large data set and a number of features around table. Ember Table can handle over 100,000 rows without and rendering or performance issue. This version of Ember Table supports Ember 1.11 to latest version of Ember.

Install

ember install ember-table

Features

  • Column resizing, column reordering.
  • Table resizing.
  • Fixed first column.
  • Custom row and custom header.
  • Handles transient state at cell level.
  • Single, multiple row selection.
  • Table grouping.

Usage.

To use Ember Table, you need to create columns and rows dataset.

columns is an array of objects which has multiple fields to define behavior of column. Two required field in each object is columnName and valuePath.

  columns: [
    {
      columnName: `Open time`,
      valuePath: `open`
    },
    {
      columnName: `Close time`,
      valuePath: `close`
    }
  ]

rows could be a javascript array, ember array or any data structure that implements length and objectAt(index). This flexibity gives application to avoid having all data at front but loads more data as user scrolls. Each object in the rows data structure should contains all fields defined by all valuePath in columns array.

  rows: computed(function() {
    const rows = emberA();

    rows.pushObject({
      open: '8AM',
      close: '8PM'
    });

    rows.pushObject({
      open: '11AM',
      close: '9PM'
    });

    return rows;
  })

Template

The following template renders a simple table.

  {{#ember-table
    rows=rows
    columns=columns
    as |row|
  }}
    {{#ember-table-row
      row=row
      as |cell|
    }}
      {{cell.value}}
    {{/ember-table-row}}
  {{/ember-table}}

To have your own custom cell, pass in the cell component name in each element of columns array and specify it in the template.

  {{#ember-table
    rows=rows
    columns=columns
    as |row|
  }}
    {{#ember-table-row
      row=row
      as |cell|
    }}
      {{#component cell.column.cellComponent
        cell=cell
      }}
    {{/ember-table-row}}
  {{/ember-table}}

The rendered table is a plain table without any styling. You can define styling for your own table. If you want to use default table style, import the ember-table/default SASS file.

Optional Footer

To use footer for your table, pass footerRows param to ember table. Each element in footerRows represents a row in table footer. The footer row takes valuePath field in each column to render data for each footer cell, similar to table body.

Custom header and custom footer

By default Ember table header renders text defined by columnName or footerValue inside each column. To customize table header or footer, you can pass in headerComponent and footerComponent fields in each column data. When the headerComponent(or footerComponent) is defined, the columnName(or footerValue) field is ignored.

Usage

{
  headerComponent: 'complex-header',
  footerComponent: 'custom-footer',
  valuePath: 'url',
  width: 180
}

Migrating from old Ember table

To support smooth migration from old version of Ember table (support only till ember 1.11), we have move the old source code to separate package ember-table-legacy. It's a separate package from this Ember table package and you can install it using yarn or npm. This allows you to have 2 versions of ember table in your code base and you can start your migrating one table at at time. The recommended migration steps are as follows (if you are using ember 1.11):

  1. Rename all your ember-table import to ember-table-legacy. (for example: import EmberTable from 'ember-table/components/ember-table' becomes import EmberTableLegacy from 'ember-table-legacy/components/ember-table-legacy'. Remove reference of ember-table in package.json.
  2. Install ember-table-legacy using yarn add ember-table-legacy or npm install ember-table-legacy
  3. Run your app to make sure that it works without issue.
  4. Reinstall the latest version of this ember-table repo.
  5. You can start using new version of Ember table from now or replacing the old ones.

ember-table's People

Contributors

azirbel avatar billy-addepar avatar bradleypriest avatar cyjia avatar cyril-sf avatar davewasmer avatar drglitch avatar ebryn avatar ember-tomster avatar gunn avatar jiangty-addepar avatar jimnanney avatar jrhe avatar juggy avatar kkirsche avatar korczis avatar liuyang-li avatar lydiabarnes avatar meelash avatar morten-holm avatar nhan avatar opendba avatar pbenes avatar petrvolny avatar pzuraq avatar randometc avatar rykov avatar taras avatar taytay avatar wagenet avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.