forked from adopted-ember-addons/ember-light-table
/
index.js
124 lines (123 loc) · 3.14 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import Table from './classes/Table';
import Column from './classes/Column';
import Row from './classes/Row';
/**
* A lightweight contextual component based table addon that follows Ember's actions up, data down ideology.
*
* ## Features
*
* * Custom component based column headers and cells
* * Infinite scroll support
* * Select & Multi-select
* * Grouped columns
* * Expandable rows
* * Easy table manipulation
* * Easy override to table header and footer
* * Contextual component for header, body, and footer, as well as loading, no data, and expanded row
*
* ## Installation
* ```shell
* ember install ember-light-table
* ```
*
* ## Looking for help?
* If it is a bug [please open an issue on GitHub](http://github.com/offirgolan/ember-light-table/issues).
*
* ## Usage
* There are two parts to this addon. The first is the [Table](../classes/Table.html) which you create with column definitions and rows, and the second is the component declaration.
*
* ### Table Declaration
* The `Table` constructor accepts an array of `Columns` or column options and an array of rows.
*
* ```javascript
* import Table from 'ember-light-table';
* const table = new Table(columns, rows);
* ```
*
* Here is a more real-word example
*
* ```javascript
* // components/my-table.js
* import Ember from 'ember';
* import Table from 'ember-light-table';
*
* const computed = Ember.computed;
*
* export default Ember.Component.extend({
* model: null,
* table: null,
*
* columns: computed(function() {
* return [{
* label: 'Avatar',
* valuePath: 'avatar',
* width: '60px',
* sortable: false,
* cellComponent: 'user-avatar'
* }, {
* label: 'First Name',
* valuePath: 'firstName',
* width: '150px'
* }, {
* label: 'Last Name',
* valuePath: 'lastName',
* width: '150px'
* }, {
* label: 'Address',
* valuePath: 'address'
* }, {
* label: 'State',
* valuePath: 'state'
* }, {
* label: 'Country',
* valuePath: 'country'
* }];
* }),
*
* init() {
* this._super(...arguments);
* this.set('table', new Table(this.get('columns'), this.get('model')));
* }
* });
* ```
*
* For a list of possible column options, please
* [checkout out the docs](../classes/Column.html).
*
* ### Component Declaration
*
* Now that we have our `table`, we can declare our component in our template.
*
* ```hbs
* {{#light-table table as |t|}}
* {{t.head}}
*
* {{#t.body as |body|}}
* {{#body.expanded-row as |row|}}
* Hello <b>{{row.firstName}}</b>
* {{/body.expanded-row}}
*
* {{#if isLoading}}
* {{#body.loader}}
* Loading...
* {{/body.loader}}
* {{/if}}
*
* {{#if table.isEmpty}}
* {{#body.no-data}}
* No users found.
* {{/body.no-data}}
* {{/if}}
* {{/t.body}}
*
* {{t.foot}}
* {{/light-table}}
* ```
*
* Please note that each of these contextual components have a wide array of options so it is advised to look
* through the documentation.
*
* @module Home
*/
export default Table;
export { Table, Column, Row };