'];
82 |
83 | expectedNavItems.forEach(expectedText => {
84 | assert.true(
85 | navItems.some(li => li.innerText.includes(expectedText)),
86 | `"${expectedText}" nav item is exists`
87 | );
88 | });
89 | });
90 |
91 | test('sorting: 2-state sorting works as expected', async function(assert) {
92 | await visit('/docs/guides/header/sorting');
93 | let DemoTable = TablePage.extend({
94 | scope: '[data-test-demo="docs-example-2-state-sortings"] [data-test-ember-table]',
95 | });
96 |
97 | let table = new DemoTable();
98 | let header = table.headers.objectAt(0);
99 |
100 | assert.false(header.sortIndicator.isPresent, 'precond - sortIndicator is not present');
101 |
102 | await header.click();
103 | assert.true(
104 | // eslint-disable-next-line qunit/no-assert-logical-expression
105 | header.sortIndicator.isPresent && header.sortIndicator.isDescending,
106 | 'sort descending'
107 | );
108 |
109 | await header.click();
110 | assert.true(
111 | // eslint-disable-next-line qunit/no-assert-logical-expression
112 | header.sortIndicator.isPresent && header.sortIndicator.isAscending,
113 | 'sort ascending'
114 | );
115 |
116 | await header.click();
117 | assert.true(
118 | // eslint-disable-next-line qunit/no-assert-logical-expression
119 | header.sortIndicator.isPresent && header.sortIndicator.isDescending,
120 | 'sort cycles back to descending'
121 | );
122 | });
123 | });
124 |
--------------------------------------------------------------------------------
/tests/dummy/app/app.js:
--------------------------------------------------------------------------------
1 | import Application from '@ember/application';
2 | import Resolver from 'ember-resolver';
3 | import loadInitializers from 'ember-load-initializers';
4 | import config from 'dummy/config/environment';
5 |
6 | export default class App extends Application {
7 | modulePrefix = config.modulePrefix;
8 | podModulePrefix = config.podModulePrefix;
9 | Resolver = Resolver;
10 | }
11 |
12 | loadInitializers(App, config.modulePrefix);
13 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/custom-cell/component.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 |
3 | export default Component.extend({
4 | tagName: '',
5 | color: null,
6 | });
7 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/custom-cell/template.hbs:
--------------------------------------------------------------------------------
1 | {{! BEGIN-SNIPPET custom-cell.hbs }}
2 |
5 | {{! END-SNIPPET }}
6 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/custom-header/component.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 |
3 | export default Component.extend({
4 | tagName: '',
5 | color: null,
6 | });
7 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/custom-header/template.hbs:
--------------------------------------------------------------------------------
1 | {{! BEGIN-SNIPPET custom-header.hbs }}
2 |
5 | {{! END-SNIPPET }}
6 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/custom-row/component.js:
--------------------------------------------------------------------------------
1 | import EmberTableRow from 'ember-table/components/ember-tr/component';
2 |
3 | export default EmberTableRow.extend({
4 | classNames: ['custom-row'],
5 | });
6 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/examples/aborting-a-selection/component.js:
--------------------------------------------------------------------------------
1 | import Component from '@glimmer/component';
2 | import { action } from '@ember/object';
3 |
4 | let shouldAbortSelection;
5 |
6 | export default class AbortingASelectionExampleComponent extends Component {
7 | // BEGIN-SNIPPET docs-example-aborting-a-selection.js
8 | @action
9 | selectRows(selection, { abort }) {
10 | if (shouldAbortSelection(selection)) {
11 | abort();
12 | return;
13 | }
14 |
15 | this.selection = selection;
16 | }
17 | // END-SNIPPET
18 | }
19 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/examples/aborting-a-selection/template.hbs:
--------------------------------------------------------------------------------
1 | {{! BEGIN-SNIPPET docs-example-aborting-a-selection.hbs }}
2 |
3 |
11 | {{! END-SNIPPET }}
12 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/examples/fixed-columns-dynamic/component.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 |
3 | export default Component.extend();
4 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/examples/fixed-columns-dynamic/template.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{! BEGIN-SNIPPET docs-example-dynamic-fixed-columns.hbs }}
3 |
4 |
5 |
6 |
7 |
11 |
12 |
13 |
14 |
16 | {{! END-SNIPPET }}
17 |
18 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/examples/infinite-scroll/component.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import { computed } from '@ember/object';
3 | import { task, timeout } from 'ember-concurrency';
4 | import { A } from '@ember/array';
5 |
6 | export default Component.extend({
7 | // BEGIN-SNIPPET docs-example-infinite-scroll.js
8 | // count of records loaded so far
9 | offset: 0,
10 |
11 | // count of records per "page"
12 | limit: 20,
13 |
14 | // substitute total count of records from API response meta data
15 | maxRows: 100,
16 |
17 | // center spinner horizontally in scroll viewport
18 | centerSpinner: true,
19 |
20 | canLoadMore: computed('offset', 'maxRows', function() {
21 | return this.offset < this.maxRows;
22 | }),
23 |
24 | columns: computed(function() {
25 | return [
26 | { name: 'ID', valuePath: 'id', width: 180 },
27 | { name: 'A', valuePath: 'a', width: 180 },
28 | { name: 'B', valuePath: 'b', width: 180 },
29 | { name: 'C', valuePath: 'c', width: 180 },
30 | ];
31 | }),
32 |
33 | rows: computed(function() {
34 | return A();
35 | }),
36 |
37 | didInsertElement() {
38 | this._super(...arguments);
39 | this.loadMore.perform();
40 | },
41 |
42 | // ember-concurrency task
43 | loadMore: task(function*() {
44 | let offset = this.offset;
45 | let limit = this.limit;
46 |
47 | if (!this.canLoadMore) {
48 | return;
49 | }
50 |
51 | // substitute paginated API request
52 | yield timeout(1000);
53 |
54 | let newRows = [];
55 | for (let i = 0; i < limit; i++) {
56 | newRows.push({ id: offset + i + 1, a: 'A', b: 'B', c: 'C' });
57 | }
58 |
59 | this.rows.pushObjects(newRows);
60 | this.set('offset', offset + limit);
61 | }).drop(),
62 |
63 | // END-SNIPPET
64 | });
65 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/examples/infinite-scroll/template.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
9 | {{! BEGIN-SNIPPET docs-example-infinite-scroll.hbs }}
10 |
11 |
21 |
22 |
23 |
25 |
26 | {{! END-SNIPPET }}
27 |
2 | {{! BEGIN-SNIPPET docs-example-row-selection.hbs }}
3 |
4 |
12 | {{! END-SNIPPET }}
13 |
14 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/examples/selected-rows/component.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 |
3 | export default Component.extend();
4 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/examples/selected-rows/template.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{! BEGIN-SNIPPET docs-example-selected-rows.hbs }}
3 |
4 |
12 | {{! END-SNIPPET }}
13 |
14 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/examples/selection-modes/component.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 |
3 | export default Component.extend();
4 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/examples/selection-modes/template.hbs:
--------------------------------------------------------------------------------
1 | {{! BEGIN-SNIPPET docs-example-selection-modes.hbs }}
2 |
3 |
4 |
17 |
18 |
19 |
Current selection
20 |
{{currentSelection}}
21 |
23 |
rowSelectionMode
24 |
25 |
26 |
27 |
28 |
29 |
checkboxSelectionMode
30 |
31 |
32 |
33 |
34 |
35 |
selectingChildrenSelectsParent
36 |
37 |
38 |
39 | {{! END-SNIPPET }}
--------------------------------------------------------------------------------
/tests/dummy/app/components/examples/sorting-empty-values/component.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import { computed } from '@ember/object';
3 | import faker from 'faker';
4 | import { getRandomInt } from 'dummy/utils/generators';
5 |
6 | export default Component.extend({
7 | // BEGIN-SNIPPET docs-example-sorting-empty-values.js
8 | columns: computed(function() {
9 | return [
10 | { name: 'Product', valuePath: 'name' },
11 | { name: 'Material', valuePath: 'material' },
12 | { name: 'Price', valuePath: 'price' },
13 | { name: 'Sold', valuePath: 'sold' },
14 | { name: 'Unsold', valuePath: 'unsold' },
15 | { name: 'Total Revenue', valuePath: 'totalRevenue' },
16 | ];
17 | }),
18 |
19 | sortEmptyLast: true,
20 | // END-SNIPPET
21 |
22 | rows: computed(function() {
23 | let rows = [];
24 |
25 | for (let k = 0; k < 10; k++) {
26 | let sold = getRandomInt(100, 10);
27 | let unsold = getRandomInt(100, 10);
28 | let price = getRandomInt(50, 10);
29 | let totalRevenue = price * sold;
30 |
31 | let product = {
32 | name: faker.commerce.productName(),
33 | material: faker.commerce.productMaterial(),
34 | price: `$${price}`,
35 | sold,
36 | unsold,
37 | totalRevenue: `$${totalRevenue}`,
38 | };
39 |
40 | rows.push(product);
41 | }
42 |
43 | for (let k = 0; k < 5; k++) {
44 | let sold = getRandomInt(100, 10);
45 | let unsold = getRandomInt(100, 10);
46 | let price = getRandomInt(50, 10);
47 | let totalRevenue = price * sold;
48 |
49 | let product = {
50 | name: faker.commerce.productName(),
51 | material: '',
52 | price: `$${price}`,
53 | sold,
54 | unsold,
55 | totalRevenue: `$${totalRevenue}`,
56 | };
57 |
58 | rows.push(product);
59 | }
60 |
61 | return rows;
62 | }),
63 | });
64 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/examples/sorting-empty-values/template.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{! BEGIN-SNIPPET docs-example-sorting-empty-values.hbs }}
4 |
5 |
6 |
9 |
10 |
11 |
12 |
25 |
26 | {{! END-SNIPPET }}
27 |
28 |
29 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/index-content/template.md:
--------------------------------------------------------------------------------
1 | Ember Table is a power table made for users who need a full-fledged,
2 | fully-customizable table component for their apps. It is built to be flexible,
3 | scalable, and ergonomic for day-to-day use.
4 |
5 | Unlike other table components, Ember Table seeks to provide as many common table
6 | features as it can _without_ sacrificing flexibility or composeability. You can
7 | still use standard component idioms to customize, extend, and build on top of
8 | Ember Table at every level, ensuring that it never gets in your way or prevents
9 | you from doing what you want.
10 |
11 | ## Features
12 |
13 | - Fixed headers and footers
14 | - Fixed columns
15 | - Row selection
16 | - Row sorting
17 | - Tree tables (with group collapsing)
18 | - Column resizing and reordering
19 | - Nested subcolumns (e.g. to create pivot tables)
20 | - Scalability - Can render thousands of rows performantly
21 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/main/table-meta-data/cell-selection/component.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import { computed, action } from '@ember/object';
3 | import { generateRows } from 'dummy/utils/generators';
4 |
5 | export default Component.extend({
6 | rows: computed(function() {
7 | return generateRows(100);
8 | }),
9 |
10 | columns: computed(function() {
11 | return [
12 | { name: 'A', valuePath: 'A' },
13 | { name: 'B', valuePath: 'B' },
14 | { name: 'C', valuePath: 'C' },
15 | { name: 'D', valuePath: 'D' },
16 | { name: 'E', valuePath: 'E' },
17 | { name: 'F', valuePath: 'F' },
18 | { name: 'G', valuePath: 'G' },
19 | ];
20 | }),
21 |
22 | // BEGIN-SNIPPET table-meta-data-cell-selection.js
23 | setSelected: action(function(cellMeta, columnMeta, rowMeta) {
24 | // If we have selected before, unselect the previous selection
25 | if (this._hasSelection) {
26 | this._lastSelectedCellMeta.set('selected', false);
27 | this._lastSelectedColumnMeta.set('selected', false);
28 | this._lastSelectedRowMeta.set('selected', false);
29 | }
30 |
31 | // Set selection on the meta objects
32 | cellMeta.set('selected', true);
33 | columnMeta.set('selected', true);
34 | rowMeta.set('selected', true);
35 |
36 | // Store the meta objects to unset in the future
37 | this._lastSelectedCellMeta = cellMeta;
38 | this._lastSelectedColumnMeta = columnMeta;
39 | this._lastSelectedRowMeta = rowMeta;
40 | this._hasSelection = true;
41 | }),
42 | // END-SNIPPET
43 | });
44 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/main/table-meta-data/cell-selection/template.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{! BEGIN-SNIPPET table-meta-data-cell-selection.hbs }}
6 |
7 |
8 |
9 |
14 | {{column.name}}
15 |
16 |
17 |
18 |
19 |
20 |
25 |
30 |
31 | {{cell}}
32 |
33 |
34 |
35 |
36 |
37 | {{! END-SNIPPET }}
38 |
40 |
41 |
44 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/docs/guides/body/occlusion.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 | import { computed } from '@ember/object';
3 |
4 | export default Controller.extend({
5 | // BEGIN-SNIPPET docs-example-occlusion.js
6 | columns: computed(function() {
7 | return [
8 | { name: 'A', valuePath: 'A', width: 180 },
9 | { name: 'B', valuePath: 'B', width: 180 },
10 | { name: 'C', valuePath: 'C', width: 180 },
11 | { name: 'D', valuePath: 'D', width: 180 },
12 | ];
13 | }),
14 |
15 | rows: computed(function() {
16 | return [
17 | { A: 'A', B: 'B', C: 'C', D: 'D' },
18 | { A: 'A', B: 'B', C: 'C', D: 'D' },
19 | { A: 'A', B: 'B', C: 'C', D: 'D' },
20 | { A: 'A', B: 'B', C: 'C', D: 'D' },
21 | { A: 'A', B: 'B', C: 'C', D: 'D' },
22 | { A: 'A', B: 'B', C: 'C', D: 'D' },
23 | { A: 'A', B: 'B', C: 'C', D: 'D' },
24 | { A: 'A', B: 'B', C: 'C', D: 'D' },
25 | { A: 'A', B: 'B', C: 'C', D: 'D' },
26 | { A: 'A', B: 'B', C: 'C', D: 'D' },
27 | { A: 'A', B: 'B', C: 'C', D: 'D' },
28 | ];
29 | }),
30 | // END-SNIPPET
31 | });
32 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/docs/guides/body/row-selection.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 | import { computed } from '@ember/object';
3 |
4 | export default Controller.extend({
5 | // BEGIN-SNIPPET docs-example-row-selection.js
6 | columns: computed(function() {
7 | return [
8 | { name: 'A', valuePath: 'A', width: 180 },
9 | { name: 'B', valuePath: 'B', width: 180 },
10 | { name: 'C', valuePath: 'C', width: 180 },
11 | { name: 'D', valuePath: 'D', width: 180 },
12 | ];
13 | }),
14 |
15 | rows: computed(function() {
16 | return [
17 | { A: 'A', B: 'B', C: 'C', D: 'D' },
18 | { A: 'A', B: 'B', C: 'C', D: 'D' },
19 | { A: 'A', B: 'B', C: 'C', D: 'D' },
20 | { A: 'A', B: 'B', C: 'C', D: 'D' },
21 | { A: 'A', B: 'B', C: 'C', D: 'D' },
22 | { A: 'A', B: 'B', C: 'C', D: 'D' },
23 | { A: 'A', B: 'B', C: 'C', D: 'D' },
24 | { A: 'A', B: 'B', C: 'C', D: 'D' },
25 | { A: 'A', B: 'B', C: 'C', D: 'D' },
26 | { A: 'A', B: 'B', C: 'C', D: 'D' },
27 | { A: 'A', B: 'B', C: 'C', D: 'D' },
28 | ];
29 | }),
30 | // END-SNIPPET
31 |
32 | // BEGIN-SNIPPET docs-example-selected-rows.js
33 | init() {
34 | this._super(...arguments);
35 |
36 | let [rowWithChildren] = this.rowWithChildren;
37 |
38 | this.preselection = [rowWithChildren];
39 | },
40 |
41 | rowWithChildren: computed(function() {
42 | return [
43 | {
44 | A: 'A',
45 | B: 'B',
46 | C: 'C',
47 | D: 'D',
48 |
49 | children: [
50 | { A: 'A', B: 'B', C: 'C', D: 'D' },
51 | { A: 'A', B: 'B', C: 'C', D: 'D' },
52 | { A: 'A', B: 'B', C: 'C', D: 'D' },
53 | { A: 'A', B: 'B', C: 'C', D: 'D' },
54 | { A: 'A', B: 'B', C: 'C', D: 'D' },
55 | { A: 'A', B: 'B', C: 'C', D: 'D' },
56 | { A: 'A', B: 'B', C: 'C', D: 'D' },
57 | { A: 'A', B: 'B', C: 'C', D: 'D' },
58 | { A: 'A', B: 'B', C: 'C', D: 'D' },
59 | { A: 'A', B: 'B', C: 'C', D: 'D' },
60 | { A: 'A', B: 'B', C: 'C', D: 'D' },
61 | { A: 'A', B: 'B', C: 'C', D: 'D' },
62 | ],
63 | },
64 | ];
65 | }),
66 | // END-SNIPPET
67 |
68 | // BEGIN-SNIPPET docs-example-selection-modes.js
69 | rowSelectionMode: 'multiple',
70 | checkboxSelectionMode: 'multiple',
71 | selectingChildrenSelectsParent: true,
72 |
73 | rowsWithChildren: computed(function() {
74 | let makeRow = (id, { children } = { children: [] }) => {
75 | return {
76 | A: `A${id}`,
77 | B: 'B',
78 | C: 'C',
79 | D: 'D',
80 | children,
81 | };
82 | };
83 | return [
84 | makeRow(1, {
85 | children: [
86 | makeRow(2, {
87 | children: [makeRow(3), makeRow(4), makeRow(5)],
88 | }),
89 | makeRow(6),
90 | makeRow(7),
91 | makeRow(8, {
92 | children: [makeRow(9), makeRow(10), makeRow(11)],
93 | }),
94 | ],
95 | }),
96 | ];
97 | }),
98 |
99 | currentSelection: computed('demoSelection', function() {
100 | let selection = this.demoSelection;
101 | if (!selection || selection.length === 0) {
102 | return 'Nothing selected';
103 | } else {
104 | if (Array.isArray(selection)) {
105 | return `Array: [${selection.map(row => row.A).join(',')}]`;
106 | } else {
107 | let row = selection;
108 | return `Single: ${row.A}`;
109 | }
110 | }
111 | }),
112 | // END-SNIPPET
113 | });
114 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/docs/guides/body/rows-and-trees.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 | import { computed } from '@ember/object';
3 |
4 | export default Controller.extend({
5 | // BEGIN-SNIPPET docs-example-rows.js
6 | columns: computed(function() {
7 | return [
8 | { name: 'A', valuePath: 'A', width: 180 },
9 | { name: 'B', valuePath: 'B', width: 180 },
10 | { name: 'C', valuePath: 'C', width: 180 },
11 | { name: 'D', valuePath: 'D', width: 180 },
12 | ];
13 | }),
14 |
15 | rows: computed(function() {
16 | return [
17 | { A: 'A', B: 'B', C: 'C', D: 'D' },
18 | { A: 'A', B: 'B', C: 'C', D: 'D' },
19 | { A: 'A', B: 'B', C: 'C', D: 'D' },
20 | { A: 'A', B: 'B', C: 'C', D: 'D' },
21 | { A: 'A', B: 'B', C: 'C', D: 'D' },
22 | { A: 'A', B: 'B', C: 'C', D: 'D' },
23 | { A: 'A', B: 'B', C: 'C', D: 'D' },
24 | { A: 'A', B: 'B', C: 'C', D: 'D' },
25 | { A: 'A', B: 'B', C: 'C', D: 'D' },
26 | { A: 'A', B: 'B', C: 'C', D: 'D' },
27 | { A: 'A', B: 'B', C: 'C', D: 'D' },
28 | ];
29 | }),
30 | // END-SNIPPET
31 |
32 | // BEGIN-SNIPPET docs-example-tree-rows.js
33 | treeEnabled: true,
34 |
35 | rowsWithChildren: computed(function() {
36 | return [
37 | {
38 | A: 'A',
39 | B: 'B',
40 | C: 'C',
41 | D: 'D',
42 |
43 | children: [
44 | { A: 'A', B: 'B', C: 'C', D: 'D' },
45 | { A: 'A', B: 'B', C: 'C', D: 'D' },
46 | { A: 'A', B: 'B', C: 'C', D: 'D' },
47 | ],
48 | },
49 | {
50 | A: 'A',
51 | B: 'B',
52 | C: 'C',
53 | D: 'D',
54 |
55 | children: [
56 | { A: 'A', B: 'B', C: 'C', D: 'D' },
57 | { A: 'A', B: 'B', C: 'C', D: 'D' },
58 | { A: 'A', B: 'B', C: 'C', D: 'D' },
59 | ],
60 | },
61 | {
62 | A: 'A',
63 | B: 'B',
64 | C: 'C',
65 | D: 'D',
66 |
67 | children: [
68 | { A: 'A', B: 'B', C: 'C', D: 'D' },
69 | { A: 'A', B: 'B', C: 'C', D: 'D' },
70 | { A: 'A', B: 'B', C: 'C', D: 'D' },
71 | ],
72 | },
73 | ];
74 | }),
75 | // END-SNIPPET
76 |
77 | // BEGIN-SNIPPET docs-example-rows-with-collapse.js
78 | collapseEnabled: true,
79 |
80 | rowsWithCollapse: computed(function() {
81 | return [
82 | {
83 | A: 'A',
84 | B: 'B',
85 | C: 'C',
86 | D: 'D',
87 |
88 | isCollapsed: true,
89 | children: [
90 | { A: 'A', B: 'B', C: 'C', D: 'D' },
91 | { A: 'A', B: 'B', C: 'C', D: 'D' },
92 | { A: 'A', B: 'B', C: 'C', D: 'D' },
93 | ],
94 | },
95 | {
96 | A: 'A',
97 | B: 'B',
98 | C: 'C',
99 | D: 'D',
100 |
101 | isCollapsed: true,
102 | children: [
103 | { A: 'A', B: 'B', C: 'C', D: 'D' },
104 | { A: 'A', B: 'B', C: 'C', D: 'D' },
105 | { A: 'A', B: 'B', C: 'C', D: 'D' },
106 | ],
107 | },
108 | {
109 | A: 'A',
110 | B: 'B',
111 | C: 'C',
112 | D: 'D',
113 |
114 | isCollapsed: true,
115 | children: [
116 | { A: 'A', B: 'B', C: 'C', D: 'D' },
117 | { A: 'A', B: 'B', C: 'C', D: 'D' },
118 | { A: 'A', B: 'B', C: 'C', D: 'D' },
119 | ],
120 | },
121 | ];
122 | }),
123 | // END-SNIPPET
124 | });
125 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/docs/guides/header/columns.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 | import { computed } from '@ember/object';
3 | import { generateRows } from 'dummy/utils/generators';
4 |
5 | export default Controller.extend({
6 | rows: computed(function() {
7 | return generateRows(100);
8 | }),
9 |
10 | // BEGIN-SNIPPET docs-example-columns.js
11 | columns: computed(function() {
12 | return [
13 | { name: 'A', valuePath: 'A' },
14 | { name: 'B', valuePath: 'B' },
15 | { name: 'C', valuePath: 'C' },
16 | { name: 'D', valuePath: 'D' },
17 | { name: 'E', valuePath: 'E' },
18 | { name: 'F', valuePath: 'F' },
19 | { name: 'G', valuePath: 'G' },
20 | ];
21 | }),
22 | // END-SNIPPET
23 |
24 | // BEGIN-SNIPPET docs-example-columns-with-components.js
25 | columnsWithComponents: computed(function() {
26 | return [
27 | { heading: 'A', valuePath: 'A', component: 'custom-header', color: 'navy' },
28 | { heading: 'B', valuePath: 'B', component: 'custom-header', color: 'blue' },
29 | { heading: 'C', valuePath: 'C', component: 'custom-header', color: 'aqua' },
30 | { heading: 'D', valuePath: 'D', component: 'custom-header', color: 'teal' },
31 | { heading: 'E', valuePath: 'E', component: 'custom-header', color: 'orange' },
32 | { heading: 'F', valuePath: 'F', component: 'custom-header', color: 'red' },
33 | { heading: 'G', valuePath: 'G', component: 'custom-header', color: 'maroon' },
34 | ];
35 | }),
36 | // END-SNIPPET
37 |
38 | // BEGIN-SNIPPET docs-example-columns-with-widths.js
39 | columnsWithWidths: computed(function() {
40 | return [
41 | { name: 'A', valuePath: 'A', width: 100 },
42 | { name: 'B', valuePath: 'B', width: 100 },
43 | { name: 'C', valuePath: 'C', width: 100 },
44 | { name: 'D', valuePath: 'D', width: 100 },
45 | { name: 'E', valuePath: 'E', width: 100 },
46 | { name: 'F', valuePath: 'F', width: 100 },
47 | { name: 'G', valuePath: 'G', width: 100 },
48 | ];
49 | }),
50 | // END-SNIPPET
51 |
52 | // BEGIN-SNIPPET docs-example-column-resize-reorder.js
53 | resizeEnabled: false,
54 | reorderEnabled: false,
55 | resizeModeFluid: false,
56 | // END-SNIPPET
57 |
58 | resizeCount: 0,
59 | reorderCount: 0,
60 |
61 | // BEGIN-SNIPPET docs-example-text-align.js
62 | columnsWithTextAlign: computed(function() {
63 | return [
64 | { name: 'No alignment', valuePath: 'A' },
65 | { name: 'Left alignment', valuePath: 'B', textAlign: 'left' },
66 | { name: 'Center alignment', valuePath: 'C', textAlign: 'center' },
67 | { name: 'Right alignment', valuePath: 'D', textAlign: 'right' },
68 | ];
69 | }),
70 | // END-SNIPPET
71 | });
72 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/docs/guides/header/fixed-columns.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 | import { A as emberA } from '@ember/array';
3 | import { set, action } from '@ember/object';
4 |
5 | import { generateRows } from 'dummy/utils/generators';
6 | import { computed } from '@ember/object';
7 |
8 | export default Controller.extend({
9 | rows: computed(function() {
10 | return generateRows(100);
11 | }),
12 |
13 | // BEGIN-SNIPPET docs-example-fixed-columns.js
14 | columns: computed(function() {
15 | return [
16 | { name: 'A', valuePath: 'A', isFixed: 'left' },
17 | { name: 'B', valuePath: 'B' },
18 | { name: 'C', valuePath: 'C' },
19 | { name: 'D', valuePath: 'D' },
20 | { name: 'E', valuePath: 'E' },
21 | { name: 'F', valuePath: 'F' },
22 | { name: 'G', valuePath: 'G' },
23 | { name: 'H', valuePath: 'H' },
24 | { name: 'I', valuePath: 'I' },
25 | { name: 'J', valuePath: 'J' },
26 | { name: 'K', valuePath: 'K', isFixed: 'right' },
27 | ];
28 | }),
29 | // END-SNIPPET
30 |
31 | // BEGIN-SNIPPET docs-example-out-of-order-fixed-columns.js
32 | outOfOrderFixedColumns: computed(function() {
33 | return [
34 | { name: 'A', valuePath: 'A', isFixed: 'right' },
35 | { name: 'B', valuePath: 'B' },
36 | { name: 'C', valuePath: 'C' },
37 | { name: 'D', valuePath: 'D', isFixed: 'left' },
38 | { name: 'E', valuePath: 'E' },
39 | { name: 'F', valuePath: 'F' },
40 | { name: 'G', valuePath: 'G' },
41 | { name: 'H', valuePath: 'H', isFixed: 'right' },
42 | { name: 'I', valuePath: 'I' },
43 | { name: 'J', valuePath: 'J' },
44 | { name: 'K', valuePath: 'K', isFixed: 'left' },
45 | ];
46 | }),
47 | // END-SNIPPET
48 |
49 | // BEGIN-SNIPPET docs-example-dynamic-fixed-columns.js
50 | dynamicFixedColumns: computed(function() {
51 | return emberA([
52 | { name: 'A', valuePath: 'A' },
53 | { name: 'B', valuePath: 'B' },
54 | { name: 'C', valuePath: 'C' },
55 | { name: 'D', valuePath: 'D' },
56 | { name: 'E', valuePath: 'E' },
57 | { name: 'F', valuePath: 'F' },
58 | { name: 'G', valuePath: 'G' },
59 | { name: 'H', valuePath: 'H' },
60 | { name: 'I', valuePath: 'I' },
61 | { name: 'J', valuePath: 'J' },
62 | { name: 'K', valuePath: 'K' },
63 | ]);
64 | }),
65 | // END-SNIPPET
66 |
67 | toggleFixed: action(function(column) {
68 | if (column.isFixed) {
69 | set(column, 'isFixed', false);
70 | } else {
71 | set(column, 'isFixed', 'left');
72 | }
73 | }),
74 | });
75 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/docs/guides/header/scroll-indicators.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 | import { computed } from '@ember/object';
3 |
4 | import { generateRows } from 'dummy/utils/generators';
5 |
6 | export default Controller.extend({
7 | // BEGIN-SNIPPET docs-example-scroll-indicators.js
8 | columns: computed(function() {
9 | return [
10 | { name: 'A', valuePath: 'A' },
11 | { name: 'B', valuePath: 'B' },
12 | { name: 'C', valuePath: 'C' },
13 | { name: 'D', valuePath: 'D' },
14 | { name: 'E', valuePath: 'E' },
15 | { name: 'F', valuePath: 'F' },
16 | { name: 'G', valuePath: 'G' },
17 | { name: 'H', valuePath: 'H' },
18 | { name: 'I', valuePath: 'I' },
19 | { name: 'J', valuePath: 'J' },
20 | { name: 'K', valuePath: 'K' },
21 | ];
22 | }),
23 | // END-SNIPPET
24 |
25 | // BEGIN-SNIPPET docs-example-scroll-indicators-with-fixed.js
26 | columnsWithFixed: computed(function() {
27 | return [
28 | { name: 'A', valuePath: 'A', isFixed: 'left' },
29 | { name: 'B', valuePath: 'B' },
30 | { name: 'C', valuePath: 'C' },
31 | { name: 'D', valuePath: 'D' },
32 | { name: 'E', valuePath: 'E' },
33 | { name: 'F', valuePath: 'F' },
34 | { name: 'G', valuePath: 'G' },
35 | { name: 'H', valuePath: 'H' },
36 | { name: 'I', valuePath: 'I' },
37 | { name: 'J', valuePath: 'J' },
38 | { name: 'K', valuePath: 'K', isFixed: 'right' },
39 | ];
40 | }),
41 | // END-SNIPPET
42 |
43 | // BEGIN-SNIPPET docs-example-scroll-indicators-with-footer.js
44 | columnsWithFooter: computed(function() {
45 | return [
46 | { name: 'A', valuePath: 'A' },
47 | { name: 'B', valuePath: 'B' },
48 | { name: 'C', valuePath: 'C' },
49 | { name: 'D', valuePath: 'D' },
50 | { name: 'E', valuePath: 'E' },
51 | { name: 'F', valuePath: 'F' },
52 | { name: 'G', valuePath: 'G' },
53 | { name: 'H', valuePath: 'H' },
54 | { name: 'I', valuePath: 'I' },
55 | { name: 'J', valuePath: 'J' },
56 | { name: 'K', valuePath: 'K' },
57 | ];
58 | }),
59 | // END-SNIPPET
60 |
61 | rows: computed(function() {
62 | return generateRows(100);
63 | }),
64 |
65 | footerRows: computed(function() {
66 | return generateRows(100, 1, (row, key) => {
67 | return String.fromCharCode(key.charCodeAt(0) + 7);
68 | });
69 | }),
70 | });
71 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/docs/guides/header/size-constraints.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 | import { computed } from '@ember/object';
3 | import { addObserver } from '@ember/object/observers'; // eslint-disable-line no-restricted-imports
4 | import { generateRows } from 'dummy/utils/generators';
5 |
6 | const defaultResizeMode = {
7 | 'eq-container': 'fluid',
8 | 'eq-container-slack': 'standard',
9 | 'gte-container': 'standard',
10 | 'gte-container-slack': 'standard',
11 | 'lte-container': 'standard',
12 | };
13 |
14 | export default Controller.extend({
15 | rows: computed(function() {
16 | return generateRows(100);
17 | }),
18 |
19 | widthConstraint: 'eq-container',
20 | fillMode: 'equal-column',
21 | resizeMode: 'fluid',
22 |
23 | init() {
24 | this._super(...arguments);
25 |
26 | // eslint-disable-next-line ember/no-observers
27 | addObserver(this, 'widthConstraint', this.setDefaultResizeMode);
28 | },
29 |
30 | setDefaultResizeMode() {
31 | let widthConstraint = this.widthConstraint;
32 | let resizeMode = defaultResizeMode[widthConstraint];
33 |
34 | if (resizeMode) {
35 | this.set('resizeMode', resizeMode);
36 | }
37 | },
38 |
39 | // BEGIN-SNIPPET docs-example-header-size-constraints.js
40 | columns: computed(function() {
41 | return [
42 | { name: 'A', valuePath: 'A' },
43 | { name: 'B', valuePath: 'B' },
44 | { name: 'C', valuePath: 'C' },
45 | { name: 'D', valuePath: 'D' },
46 | ];
47 | }),
48 | // END-SNIPPET
49 | });
50 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/docs/guides/header/sorting.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 | import { computed, action } from '@ember/object';
3 | import faker from 'faker';
4 | import { getRandomInt } from 'dummy/utils/generators';
5 |
6 | export default Controller.extend({
7 | // BEGIN-SNIPPET docs-example-sortings.js
8 | columns: computed(function() {
9 | return [
10 | { name: 'Company ▸ Department ▸ Product', valuePath: 'name' },
11 | { name: 'Price', valuePath: 'price' },
12 | { name: 'Sold', valuePath: 'sold' },
13 | { name: 'Unsold', valuePath: 'unsold' },
14 | { name: 'Total Revenue', valuePath: 'totalRevenue' },
15 | ];
16 | }),
17 | // END-SNIPPET
18 |
19 | rows: computed(function() {
20 | let rows = [];
21 |
22 | for (let i = 0; i < getRandomInt(5, 2); i++) {
23 | let companyRow = {
24 | name: faker.company.companyName(),
25 | price: 'N/A',
26 | sold: 0,
27 | unsold: 0,
28 | totalRevenue: 0,
29 | children: [],
30 | };
31 |
32 | for (let j = 0; j < getRandomInt(5, 2); j++) {
33 | let departmentRow = {
34 | name: faker.commerce.department(),
35 | price: 'N/A',
36 | sold: 0,
37 | unsold: 0,
38 | totalRevenue: 0,
39 | children: [],
40 | };
41 |
42 | for (let k = 0; k < getRandomInt(100, 10); k++) {
43 | let sold = getRandomInt(100, 10);
44 | let unsold = getRandomInt(100, 10);
45 | let price = getRandomInt(50, 10);
46 | let totalRevenue = price * sold;
47 |
48 | let product = {
49 | name: faker.commerce.productName(),
50 | price: `$${price}`,
51 | sold,
52 | unsold,
53 | totalRevenue: `$${totalRevenue}`,
54 | };
55 |
56 | departmentRow.sold += sold;
57 | departmentRow.unsold += unsold;
58 | departmentRow.totalRevenue += totalRevenue;
59 | departmentRow.children.push(product);
60 | }
61 |
62 | companyRow.sold += departmentRow.sold;
63 | companyRow.unsold += departmentRow.unsold;
64 | companyRow.totalRevenue += departmentRow.totalRevenue;
65 |
66 | departmentRow.totalRevenue = `$${departmentRow.totalRevenue}`;
67 |
68 | companyRow.children.push(departmentRow);
69 | }
70 |
71 | companyRow.totalRevenue = `$${companyRow.totalRevenue}`;
72 |
73 | rows.push(companyRow);
74 | }
75 |
76 | return rows;
77 | }),
78 |
79 | // BEGIN-SNIPPET docs-example-2-state-sortings.js
80 | twoStateSorting: action(function(sorts) {
81 | if (sorts.length > 1) {
82 | // multi-column sort, default behavior
83 | this.set('sorts', sorts);
84 | return;
85 | }
86 |
87 | let hasExistingSort = this.sorts && this.sorts.length;
88 | let isDefaultSort = !sorts.length;
89 |
90 | if (hasExistingSort && isDefaultSort) {
91 | // override empty sorts with reversed previous sort
92 | let newSorts = [
93 | {
94 | valuePath: this.sorts[0].valuePath,
95 | isAscending: !this.sorts[0].isAscending,
96 | },
97 | ];
98 | this.set('sorts', newSorts);
99 | return;
100 | }
101 |
102 | this.set('sorts', sorts);
103 | }),
104 | // END-SNIPPET
105 | });
106 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/docs/guides/header/subcolumns.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 | import { A as emberA } from '@ember/array';
3 | import { computed } from '@ember/object';
4 | import { generateRows, generateColumn } from 'dummy/utils/generators';
5 |
6 | const COLUMN_COUNT = 4;
7 |
8 | export default Controller.extend({
9 | rows: computed(function() {
10 | return generateRows(100);
11 | }),
12 |
13 | // BEGIN-SNIPPET docs-example-subcolumns.js
14 | simpleColumns: computed(function() {
15 | return [
16 | {
17 | name: 'A',
18 | subcolumns: [
19 | { name: 'A A', valuePath: 'A A' },
20 | { name: 'A B', valuePath: 'A B' },
21 | { name: 'A C', valuePath: 'A C' },
22 | ],
23 | },
24 | {
25 | name: 'B',
26 | subcolumns: [
27 | { name: 'B A', valuePath: 'B A' },
28 | { name: 'B B', valuePath: 'B B' },
29 | { name: 'B C', valuePath: 'B C' },
30 | ],
31 | },
32 | {
33 | name: 'C',
34 | subcolumns: [
35 | { name: 'C A', valuePath: 'C A' },
36 | { name: 'C B', valuePath: 'C B' },
37 | { name: 'C C', valuePath: 'C C' },
38 | ],
39 | },
40 | ];
41 | }),
42 | // END-SNIPPET
43 |
44 | complexColumns: computed(function() {
45 | let columns = emberA();
46 |
47 | for (let i = 0; i < COLUMN_COUNT; i++) {
48 | let column = generateColumn(i, { subcolumns: [] });
49 |
50 | if (Math.random() > 0.5) {
51 | for (let j = 0; j < COLUMN_COUNT - 1; j++) {
52 | let subcolumn = generateColumn([i, j], { subcolumns: [] });
53 |
54 | if (Math.random() > 0.5) {
55 | for (let k = 0; k < COLUMN_COUNT - 2; k++) {
56 | subcolumn.subcolumns.push(generateColumn([i, j, k]));
57 | }
58 | }
59 |
60 | column.subcolumns.push(subcolumn);
61 | }
62 | }
63 |
64 | columns.pushObject(column);
65 | }
66 |
67 | return columns;
68 | }),
69 | });
70 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/docs/guides/main/basic-table.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 | import { computed } from '@ember/object';
3 |
4 | export default Controller.extend({
5 | // BEGIN-SNIPPET docs-example-basic-table.js
6 | columns: computed(function() {
7 | return [
8 | { name: 'A', valuePath: 'A', width: 180 },
9 | { name: 'B', valuePath: 'B', width: 180 },
10 | { name: 'C', valuePath: 'C', width: 180 },
11 | { name: 'D', valuePath: 'D', width: 180 },
12 | ];
13 | }),
14 |
15 | rows: computed(function() {
16 | return [
17 | { A: 'A', B: 'B', C: 'C', D: 'D' },
18 | { A: 'A', B: 'B', C: 'C', D: 'D' },
19 | { A: 'A', B: 'B', C: 'C', D: 'D' },
20 | { A: 'A', B: 'B', C: 'C', D: 'D' },
21 | { A: 'A', B: 'B', C: 'C', D: 'D' },
22 | { A: 'A', B: 'B', C: 'C', D: 'D' },
23 | { A: 'A', B: 'B', C: 'C', D: 'D' },
24 | { A: 'A', B: 'B', C: 'C', D: 'D' },
25 | { A: 'A', B: 'B', C: 'C', D: 'D' },
26 | { A: 'A', B: 'B', C: 'C', D: 'D' },
27 | { A: 'A', B: 'B', C: 'C', D: 'D' },
28 | ];
29 | }),
30 | // END-SNIPPET
31 | });
32 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/docs/guides/main/styling-the-table.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 |
3 | export default class SimpleController extends Controller {}
4 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/docs/guides/main/table-meta-data.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 | import { computed } from '@ember/object';
3 | import { generateRows } from 'dummy/utils/generators';
4 |
5 | export default Controller.extend({
6 | rows: computed(function() {
7 | return generateRows(100);
8 | }),
9 |
10 | columns: computed(function() {
11 | return [
12 | { name: 'A', valuePath: 'A' },
13 | { name: 'B', valuePath: 'B' },
14 | { name: 'C', valuePath: 'C' },
15 | { name: 'D', valuePath: 'D' },
16 | { name: 'E', valuePath: 'E' },
17 | { name: 'F', valuePath: 'F' },
18 | { name: 'G', valuePath: 'G' },
19 | ];
20 | }),
21 | });
22 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/scenarios/performance.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 | import { computed, action } from '@ember/object';
3 | import { generateRows, generateColumns } from 'dummy/utils/generators';
4 |
5 | export default Controller.extend({
6 | rows: computed(function() {
7 | let rows = generateRows(10, 3, (row, key) => `${row.id}${key}`);
8 |
9 | rows[0].children[0].children[0].children = generateRows(10, 1, (row, key) => `${row.id}${key}`);
10 |
11 | return rows;
12 | }),
13 |
14 | columns: computed(function() {
15 | let columns = generateColumns(20);
16 |
17 | columns[0].width = 300;
18 | columns[0].isResizable = false;
19 | columns[0].isReorderable = false;
20 |
21 | columns[1].subcolumns = generateColumns(3);
22 | columns[1].subcolumns[0].isReorderable = false;
23 | columns[1].subcolumns[1].isResizable = false;
24 | columns[1].subcolumns[2].isSortable = false;
25 |
26 | return columns;
27 | }),
28 |
29 | onSelect: action(function(selection) {
30 | this.set('selection', selection);
31 | }),
32 | onUpdateSorts: action(function(sorts) {
33 | this.set('sorts', sorts);
34 | }),
35 | });
36 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/scenarios/simple.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 | import { computed } from '@ember/object';
3 | import { generateRows, generateColumns } from 'dummy/utils/generators';
4 |
5 | export default Controller.extend({
6 | rows: computed(function() {
7 | return generateRows(100);
8 | }),
9 |
10 | columns: computed(function() {
11 | return generateColumns(7);
12 | }),
13 | });
14 |
--------------------------------------------------------------------------------
/tests/dummy/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Ember Table
7 |
2 |
3 |
4 |
39 |
40 |
41 | {{outlet}}
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/docs/guides/body/occlusion.md:
--------------------------------------------------------------------------------
1 | # Occlusion
2 |
3 | Rendering lots and lots of HTML is really expensive for the browser, much more
4 | expensive than tracking those things in Javascript. Occlusion is a technique
5 | where we only render the HTML that is visible to the user at a given time. This
6 | allows us to load and present much more data than would otherwise be possible.
7 |
8 | Ember Table uses [vertical-collection](https://github.com/html-next/vertical-collection)
9 | by default to occlude rows of the table. This allows the table to render tens of
10 | thousands of rows without any performance hiccups.
11 |
12 | The occlusion also accounts for variable row heights automatically - no need to
13 | have static row heights, or to know the row heights in advance.
14 |
15 | ## Configuring Occlusion
16 |
17 | You can pass some parameters to the table body to fine tune the occlusion
18 | settings. The current options are:
19 |
20 | * `estimateRowHeight`: Vertical-collection figures out what your row heights
21 | are by measuring them after they have rendered. The first time each row is
22 | rendered, it assumes the row's height will be whatever value is provided by
23 | the `estimateRowHeight` in pixels (defaults to `30`). A more accurate estimate
24 | is always better, as it means vertical-collection will have less work to do
25 | if the "guess" was incorrect.
26 |
27 | * `staticHeight`: This field is a boolean flag that defaults to `false`. If you
28 | enable this field, vertical-collection will assume that all of the rows'
29 | heights are _exactly_ the value of `estimateRowHeight`. This will mean less
30 | work for vertical-collection and will be slightly more performant.
31 |
32 | Vertical-collection will **not** apply style changes to your rows if you
33 | pass `staticHeight=true`. You are responsible for ensuring that your rows are
34 | styled to always be the same as `estimateRowHeight`.
35 |
36 | * `key`: This key is the property used by the vertical-collection to determine
37 | whether an array mutation is an append, prepend, or complete replacement. It
38 | defaults to the object identity `"@identity"`.
39 |
40 | * `containerSelector`: A selector string used by the vertical-collection to select
41 | the element from which to calculate the viewable height. It defaults to the
42 | table id `"#{tableId}"`.
43 |
44 | {{#docs-demo as |demo|}}
45 | {{#demo.example}}
46 | {{! BEGIN-SNIPPET docs-example-occlusion.hbs }}
47 |
48 |
49 |
58 |
59 | {{! END-SNIPPET }}
60 | {{/demo.example}}
61 |
62 | {{demo.snippet name='docs-example-occlusion.hbs'}}
63 | {{demo.snippet label='component.js' name='docs-example-occlusion.js'}}
64 | {{/docs-demo}}
65 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/docs/guides/body/rows-and-trees.md:
--------------------------------------------------------------------------------
1 | # Rows and Trees
2 |
3 | Table body components must receive an `rows` array. The items in this array must
4 | all be objects, but beyond that there are no specific requirements for the
5 | objects themselves - they can be anything.
6 |
7 | {{#docs-demo as |demo|}}
8 | {{#demo.example}}
9 |
10 | {{! BEGIN-SNIPPET docs-example-rows.hbs }}
11 |
12 |
15 | {{! END-SNIPPET }}
16 |
17 | {{/demo.example}}
18 |
19 | {{demo.snippet name='docs-example-rows.hbs'}}
20 | {{demo.snippet label='component.js' name='docs-example-rows.js'}}
21 | {{/docs-demo}}
22 |
23 | The value passed to each cell in the table is determined by the `valuePath` of
24 | the `column` object. A simplified version of this in handlebars would look like
25 | this:
26 |
27 | ```hbs
28 | {{#each this.rows as |row|}}
29 |
30 | {{#each columns as |column|}}
31 |
32 | {{yield (get row column.valuePath)}}
33 |
34 | {{/each}}
35 |
36 | {{/each}}
37 | ```
38 |
39 | ## Trees and Children
40 |
41 | By default, Ember Table handles trees of rows. Each row can have a `children`
42 | property which is another array of rows. Children are treated the same way as
43 | parents - cells will attempt to find a value by getting the value at the value
44 | path on the child.
45 |
46 | If you want to disable the tree behavior, you can pass `enableTree=false` to
47 | the table body.
48 |
49 | {{#docs-demo as |demo|}}
50 | {{#demo.example name="trees"}}
51 | {{! BEGIN-SNIPPET docs-example-tree-rows.hbs }}
52 |
53 |
54 | {{input type="checkbox" checked=this.treeEnabled}}
55 | Enable Tree
56 |
57 |
58 |
59 |
60 |
67 |
68 | {{! END-SNIPPET }}
69 | {{/demo.example}}
70 |
71 | {{demo.snippet label='component.js' name='docs-example-tree-rows.js'}}
72 | {{demo.snippet name='docs-example-tree-rows.hbs'}}
73 | {{/docs-demo}}
74 |
75 | ## Collapsing Rows
76 |
77 | Trees with children are collapsible by default. You can set the `isCollapsed`
78 | property directly on rows to control the collapse state of rows externally. If
79 | you set `isCollapsed`, the table will update it when the user collapses or
80 | uncollapses a row. Otherwise, it will keep the state internally only.
81 |
82 | If you want to disable collapsing, you can pass `enableCollapse=false` to the
83 | table body.
84 |
85 | If you want to disable collapsing at a row level, you can pass
86 | `disableCollapse=true` to the row.
87 |
88 | {{#docs-demo as |demo|}}
89 | {{#demo.example name="collapse"}}
90 | {{! BEGIN-SNIPPET docs-example-rows-with-collapse.hbs }}
91 |
92 |
93 | {{input type="checkbox" checked=this.collapseEnabled}}
94 | Enable Collapse
95 |
96 |
97 |
98 |
99 |
106 |
107 | {{! END-SNIPPET }}
108 | {{/demo.example}}
109 |
110 | {{demo.snippet label='component.js' name='docs-example-rows-with-collapse.js'}}
111 | {{demo.snippet name='docs-example-rows-with-collapse.hbs'}}
112 | {{/docs-demo}}
113 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/docs/guides/header/column-keys.md:
--------------------------------------------------------------------------------
1 | ## Column Keys
2 |
3 | Ember Table will update the table layout as the `columns` array changes. When
4 | objects are removed and re-added to the array, meta data about the state of
5 | the column is preserved and recovered. By default, Ember Table uses the objects
6 | themselves as keys to save and retrieve this data.
7 |
8 | If your application is written in a functional style, this can pose a problem.
9 | For example, if your columns are generated by a getter that depends on tracked
10 | properties, you may be frequently passing new columns to Ember Table that aren't
11 | really new at all.
12 |
13 | ```js
14 | get columns() {
15 | // `data` could be a tracked property that updates frequently
16 | return this.data.headers.map((header, index) => {
17 | heading: header.name,
18 | valuePath: `${index}`,
19 | // ...
20 | });
21 | }
22 | ```
23 |
24 | This can have unexpected consequences, as meta data about your columns
25 | is being lost each time `columns` is re-computed.
26 |
27 | To handle this scenario, you can specify a `columnKeyPath` property that
28 | identifies a "key" property on each column object. This acts like a primary key
29 | in a database, identifying when two objects represent the same underlying
30 | entity. When `columns` is updated, these keys are used to preserve the state
31 | of your table, even if the replacement column objects are not identical to the
32 | originals.
33 |
34 | ```js
35 | get columns() {
36 | return this.data.headers.map((header, index) => {
37 | heading: header.name,
38 | valuePath: `${index}`,
39 |
40 | // assumes headers have distinct names
41 | key: header.name,
42 |
43 | // ...
44 | });
45 | }
46 | ```
47 |
48 | ```hbs
49 |
50 |
57 | ```
58 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/docs/guides/header/fixed-columns.md:
--------------------------------------------------------------------------------
1 | # Fixed Columns
2 |
3 | Columns can be fixed to the left or the right side of a table by setting the
4 | `isFixed` property on the column to `'left'` or `'right'`. Only root columns
5 | may be fixed, subcolumns will ignore their own `isFixed` property and use their
6 | parent's value instead.
7 |
8 | {{#docs-demo as |demo|}}
9 | {{#demo.example name='fixed-columns'}}
10 |
11 | {{! BEGIN-SNIPPET docs-example-fixed-columns.hbs }}
12 |
13 |
17 | {{! END-SNIPPET }}
18 |
19 | {{/demo.example}}
20 |
21 | {{demo.snippet name='docs-example-fixed-columns.hbs'}}
22 | {{demo.snippet name='docs-example-fixed-columns.js' label='component.js'}}
23 | {{/docs-demo}}
24 |
25 | ## Multiple Fixed Columns and Ordering
26 |
27 | Multiple columns may be fixed to either side of the table. Fixed columns _must_
28 | be placed contiguously at the start or end of the `columns` array. If columns
29 | are marked as fixed and are out of order, Ember Table will sort the columns
30 | array directly to fix the ordering.
31 |
32 | {{#docs-demo as |demo|}}
33 | {{#demo.example name='out-of-order-fixed-columns'}}
34 |
35 | {{! BEGIN-SNIPPET docs-example-out-of-order-fixed-columns.hbs }}
36 |
37 |
41 | {{! END-SNIPPET }}
42 |
43 | {{/demo.example}}
44 |
45 | {{demo.snippet name='docs-example-out-of-order-fixed-columns.hbs'}}
46 | {{demo.snippet name='docs-example-out-of-order-fixed-columns.js' label='component.js'}}
47 | {{/docs-demo}}
48 |
49 | ## Dynamic Fixed Columns
50 |
51 | Fixed positioning can be changed at any time, the below example demonstrates how
52 | you can make fixed columns toggleable for your users.
53 |
54 | {{#docs-demo as |demo|}}
55 | {{#demo.example name='dynamic-fixed-columns'}}
56 | {{examples/fixed-columns-dynamic
57 | rows=this.rows
58 | columns=this.dynamicFixedColumns
59 | toggleFixed=this.toggleFixed
60 | }}
61 | {{/demo.example}}
62 |
63 | {{demo.snippet name='docs-example-dynamic-fixed-columns.hbs'}}
64 | {{demo.snippet name='docs-example-dynamic-fixed-columns.js' label='component.js'}}
65 | {{/docs-demo}}
66 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/docs/guides/header/scroll-indicators.md:
--------------------------------------------------------------------------------
1 | # Scroll Indicators
2 |
3 | Set the `scrollIndicators` argument to `all`, `horizontal`, `vertical`, or `none` to
4 | shade the edges of the table where the user can scroll to see more data.
5 | These indicators will show/hide when there is content overflowing in their
6 | respective direction.
7 |
8 | {{#docs-demo as |demo|}}
9 | {{#demo.example name='scroll-indicators'}}
10 |
11 | {{! BEGIN-SNIPPET docs-example-scroll-indicators.hbs }}
12 |
13 |
14 |
20 | {{! END-SNIPPET }}
21 |
22 | {{/demo.example}}
23 |
24 | {{demo.snippet name='docs-example-scroll-indicators.hbs'}}
25 | {{demo.snippet name='docs-example-scroll-indicators.js' label='component.js'}}
26 | {{/docs-demo}}
27 |
28 | ## Horizontal Scroll Indicators with Fixed Columns
29 |
30 | Horizontal indicators will respect fixed columns, appearing inside of
31 | them when they are present, or at the edges of the table when they are not.
32 |
33 | {{#docs-demo as |demo|}}
34 | {{#demo.example name='scroll-indicators-with-fixed'}}
35 |
36 | {{! BEGIN-SNIPPET docs-example-scroll-indicators-with-fixed.hbs }}
37 |
38 |
39 |
45 | {{! END-SNIPPET }}
46 |
47 | {{/demo.example}}
48 |
49 | {{demo.snippet name='docs-example-scroll-indicators-with-fixed.hbs'}}
50 | {{demo.snippet name='docs-example-scroll-indicators-with-fixed.js' label='component.js'}}
51 | {{/docs-demo}}
52 |
53 | ## Vertical Scroll Indicators with a Header & Footer
54 |
55 | Vertical scroll indicators respect both headers and footers, appearing just
56 | inside any sticky rows at the top or bottom of the table.
57 |
58 | {{#docs-demo as |demo|}}
59 | {{#demo.example name='scroll-indicators-with-footer'}}
60 |
61 | {{! BEGIN-SNIPPET docs-example-scroll-indicators-with-footer.hbs }}
62 |
63 |
64 |
70 |
72 |
73 | {{! END-SNIPPET }}
74 |
75 | {{/demo.example}}
76 |
77 | {{demo.snippet name='docs-example-scroll-indicators-with-footer.hbs'}}
78 | {{demo.snippet name='docs-example-scroll-indicators-with-footer.js' label='component.js'}}
79 | {{/docs-demo}}
80 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/docs/guides/header/subcolumns.md:
--------------------------------------------------------------------------------
1 | # Subcolumns
2 |
3 | Columns can have an array of `subcolumns`, which should be objects that are
4 | exactly the same as any other column. Subcolumns can have their own subcolumns,
5 | and when rendering the rows of the table, cells will be matched up with the
6 | lowest level of subcolumns (the leaves of the column tree). This means that
7 | `valuePath` is optional for columns that have subcolumns.
8 |
9 | {{#docs-demo as |demo|}}
10 | {{#demo.example}}
11 |
12 | {{! BEGIN-SNIPPET docs-example-subcolumns.hbs }}
13 |
14 |
18 | {{! END-SNIPPET }}
19 |
20 | {{/demo.example}}
21 |
22 | {{demo.snippet name='docs-example-subcolumns.hbs'}}
23 | {{demo.snippet name='docs-example-subcolumns.js' label='component.js'}}
24 | {{/docs-demo}}
25 |
26 | ## Resizing and Reordering
27 |
28 | Subcolumns can be resized like any other column. When resizing a column with
29 | subcolumns, changes in width will be spread throughout the subcolumns.
30 | Subcolumns can only be reordered within their group - it is not currently
31 | possible to reorder move columns around arbitrarily.
32 |
33 | Columns do not need to have the same numbers of subcolumns, they can mix and
34 | match as much as you would like. This table's columns have generated completely
35 | randomly, demonstrating the flexibility of subcolumns.
36 |
37 |
38 |
39 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/docs/guides/main/basic-table.md:
--------------------------------------------------------------------------------
1 | # A Basic Table
2 |
3 | Tables can get very complicated, and it's not easy to have a table API that is
4 | powerful, flexible, and succinct. Ember Table makes this tradeoff by providing a
5 | very flexible API, but at the cost of being fairly verbose. Because this table
6 | is meant for power users who need a lot of functionality and flexibility, this
7 | tradeoff generally makes sense.
8 |
9 | The table has a set of sane defaults. If you don't need much customization,
10 | setting up a minimal instance of Ember Table will only require you to define a
11 | header and a body, with columns and rows passed to it.
12 |
13 | {{#docs-demo as |demo|}}
14 | {{#demo.example}}
15 |
16 | {{! BEGIN-SNIPPET docs-example-basic-table.hbs }}
17 |
18 |
22 | {{! END-SNIPPET }}
23 |
24 | {{/demo.example}}
25 |
26 | {{demo.snippet name='docs-example-basic-table.hbs'}}
27 | {{demo.snippet label='component.js' name='docs-example-basic-table.js'}}
28 | {{/docs-demo}}
29 |
30 | ## High Level Structure
31 |
32 | At a high level, the structure of Ember Table is meant to mimic the structure of
33 | HTML tables directly. This allows you to customize each element in the table;
34 | you can add class names, setup actions, and handle events anywhere.
35 |
36 | This example demonstrates the same table as above, but with each level yielded.
37 |
38 | {{#docs-demo as |demo|}}
39 | {{#demo.example name='expanded'}}
40 |
41 | {{! BEGIN-SNIPPET docs-example-basic-expanded-table.hbs }}
42 |
43 |
44 |
45 |
46 | {{column.name}}
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | {{value}}
55 |
56 |
57 |
58 |
59 | {{! END-SNIPPET }}
60 |
61 | {{/demo.example}}
62 |
63 | {{demo.snippet name='docs-example-basic-expanded-table.hbs'}}
64 | {{/docs-demo}}
65 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/docs/guides/main/infinite-scroll.md:
--------------------------------------------------------------------------------
1 | # Infinite Scroll
2 |
3 | Infinite scroll is a common UI pattern where additional table rows are loaded as the user scrolls toward the bottom of the table. Ember Table does not provide infinite scrolling out of the box, but it has all the parts required to build an infinite scrolling table.
4 |
5 | {{#docs-demo as |demo|}}
6 | {{#demo.example}}
7 | {{examples/infinite-scroll}}
8 | {{/demo.example}}
9 |
10 | {{demo.snippet name='docs-example-infinite-scroll.hbs'}}
11 | {{demo.snippet label='component.js' name='docs-example-infinite-scroll.js'}}
12 | {{/docs-demo}}
13 |
14 | Ember Table does not provide a built-in spinner. You must specify your own by passing a block to `` like in the example above. See the {{#link-to route='docs.api.item' model='components/ember-table-loading-more'}}`EmberTableLoadingMore`{{/link-to}} component docs for more information.
15 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/docs/guides/main/styling-the-table.md:
--------------------------------------------------------------------------------
1 | # Styling the Table [WIP]
2 |
3 | Ember Table by default only ships with the minimum CSS necessary for it to
4 | function. This includes the `sticky` positioning of the header, footer, and
5 | fixed columns, along with a few other things.
6 |
7 | You can style the table by directly styling the `.ember-table` class, and the
8 | HTML structure beneath it. The examples in this documentation app use Addepar's
9 | own [CSS framework](https://github.com/Addepar/addepar-style-toolbox), which is
10 | tailored to our specific needs. You can check out the [table styles](https://github.com/Addepar/addepar-style-toolbox/blob/master/styles/onyx/components/table/_core.scss)
11 | applied there for inspiration.
12 |
13 | In the future, this page will contain a class list and outline of the base HTML
14 | for Ember Table.
15 |
16 | ## Reorder indicators
17 |
18 | When reordering the columns, two elements are created to be customized and allow the user to understand what he is doing.
19 |
20 | A first `.et-reorder-main-indicator` element is created, which basically is a ghost copy of the header cell currently grabbed. By default, it has no CSS property, giving a `position: absolute;` so this element is positioned on the `` is recommended.
21 |
22 | A second `.et-reorder-drop-indicator` element is created, which is the target header cell. It has two CSS classes `.et-reorder-direction-left` and `.et-reorder-direction-right` depending on the current drop position to show whether the drop will be directed on the left or on the right. Styling these will give the user a more intuitive experience of how they is reordering their table.
23 |
24 | ## Styling Examples
25 |
26 | Here is an example of using CSS Flex properties to create a layout that has a fixed page header and footer and a content area that is split for a search input area on the left and a data table on the right: [CSS Flex](https://ember-twiddle.com/4cb616452e3316ddcec242192fc4a96c?openFiles=templates.application.hbs%2C). The same layout using Bootstrap classes: [Bootstrap Flex](https://ember-twiddle.com/d27c9f154050688518a7ca9a0b055a26?openFiles=templates.application.hbs%2C). This version is also somewhat responsive, so change your window sizes to see it respond.
27 |
28 |
29 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/docs/guides/main/table-meta-data.md:
--------------------------------------------------------------------------------
1 | # Table Meta Data
2 |
3 | So far you've seen how Ember Table revolves around three central concepts:
4 |
5 | 1. The `rowValue`, which is one of the rows that are provided to the body
6 | 2. The `columnValue`, which is one of the columns that are provided to the
7 | header
8 | 3. The `cellValue`, which is produced by using the `columnValue` to lookup a
9 | value on the `rowValue`
10 |
11 | These are the fundamental building blocks of any table, so it makes sense that
12 | they would be what is given to you when using the table API.
13 |
14 | You'll also find that Ember Table provides a meta object that is associated
15 | with each of these. These meta objects are yielded after the main
16 | cell/column/row values at the cell level, and are generally accessible wherever
17 | their corresponding values are:
18 |
19 | ```hbs
20 |
21 | ```
22 |
23 | ## What are meta objects?
24 |
25 | The meta objects are unique POJOs that are associated with a corresponding
26 | value. That is to say, for every `cell`, `column`, and `row` in the table, there
27 | are corresponding `cellMeta`, `columnMeta`, and `rowMeta` objects.
28 |
29 | `columnMeta` and `rowMeta` objects are used by the table to accomplish some
30 | internal bookkeeping such as collapse and selection state, but you are free to
31 | use these objects to store whatever meta information you would like in the
32 | table.
33 |
34 | `rowsCount` is also yielded by the cell component. This count is a reflection
35 | of how many rows the user can currently see by scrolling through the table. It
36 | is typically smaller than the total number of rows passed into, say, the
37 | `ember-tbody` component, because it excludes rows that have been hidden by
38 | collapsing a parent.
39 |
40 | ## What are they used for?
41 |
42 | Complex data tables have lots of functionality that requires some amount of
43 | state to be tracked. This state is generally unique to the table, and oftentimes
44 | related to a particular cell, column, or row. A good example of this is cell
45 | selection, like in Excel.
46 |
47 | When you click a cell in Excel, the row, column, and cell are all marked as
48 | active to show the user where they are in the table. Ember Table does _not_ have
49 | this functionality out of the box - let's see how we would implement it with
50 | meta objects:
51 |
52 |
53 | {{main/table-meta-data/cell-selection}}
54 |
55 | ## Accessing row indices in templates
56 |
57 | Meta objects can be used in templates to render conditional markdown based on
58 | the index of the current row.
59 |
60 | {{#docs-demo as |demo|}}
61 | {{#demo.example name="row-indices"}}
62 |
63 |
74 |
75 | {{! BEGIN-SNIPPET table-meta-data-row-indices.hbs }}
76 |
77 |
79 |
80 |
81 | {{#if (eq rowMeta.index 0)}}
82 | {{cell}}
83 | {{!-- `dec` helper is part of `ember-composable-helpers` --}}
84 | {{else if (lt rowMeta.index (dec rowsCount))}}
85 | {{cell}}
86 | {{else}}
87 | {{cell}}
88 | {{/if}}
89 |
90 |
91 |
92 |
93 | {{! END-SNIPPET }}
94 |
95 | {{/demo.example}}
96 |
97 | {{demo.snippet name='table-meta-data-row-indices.hbs'}}
98 | {{demo.snippet name='table-meta-data-row-indices.css'}}
99 | {{/docs-demo}}
100 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/docs/index.md:
--------------------------------------------------------------------------------
1 |
51 |
54 | ```
55 |
56 | And voila! You should have a basic table up and running!
57 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/docs/testing/test-page.md:
--------------------------------------------------------------------------------
1 | # Testing Ember Table
2 |
3 | ## Table Page Object
4 |
5 | Ember Table includes a test helper that you can import in your app's acceptance tests and use to interact with a table on the page. The Page helper is based on [`ember-classy-page-object`](https://github.com/pzuraq/ember-classy-page-object).
6 |
7 | To import it:
8 |
9 | ```js
10 | import { TablePage } from 'ember-table/test-support';
11 | ```
12 |
13 | Usage:
14 |
15 | ```js
16 | // ... in an acceptance test:
17 | const table = new TablePage();
18 |
19 | assert.strictEqual(table.body.rowCount, 5, 'the table has 5 body rows');
20 | assert.strictEqual(table.header.rows.length, 1, 'the table has 1 row of headers');
21 | assert.strictEqual(table.footer.rows.length, 1, 'the table has 1 row of footers');
22 |
23 | await table.selectRow(0); // The first body row is selected
24 | assert.true(table.body.rows.objectAt(0).isSelected, 'first row is selected');
25 | assert.false(table.body.rows.objectAt(1).isSelected, 'second row is not selected');
26 | ```
27 |
28 | To learn more about the properties that are present on the table page object, refer to [its source](https://github.com/Addepar/ember-table/blob/master/addon-test-support/pages/ember-table.js) or
29 | to [its usage in the ember-table tests](https://github.com/Addepar/ember-table/blob/master/tests/integration/components/basic-test.js).
30 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/docs/why-ember-table.md:
--------------------------------------------------------------------------------
1 | # Why Ember Table?
2 |
3 | ## Tables are Hard
4 |
5 | They've been with us, for better or for worse, since the early
6 | days of computing, helping us sort through mounds of data and generate TPS
7 | reports. Excel macros are practically Turing complete at this point, and just
8 | about every UX pattern imaginable has been explored and implemented in a table
9 | in some application somewhere.
10 |
11 | Building that functionality into your Single Page App is a long, tiresome
12 | process, and as the datasets scale it just gets harder. There are a lot of
13 | different off the shelf tables out there, but customizing them is difficult and
14 | time consuming, and if they don't implement the feature you need there's no easy
15 | way to add it.
16 |
17 | ## What makes Ember Table different?
18 |
19 | Most table components try to abstract the complexity of the table away from
20 | users. They provide a few top components that are meant to make declaring a
21 | table simple, avoiding the nested HTML structure of traditional tables. After
22 | all, who wants to deal with figuring out the right ordering of `tbody`, `th`,
23 | and `td` tags to get everything working?
24 |
25 | The truth, however, is that tables _are_ complicated, and most attempts to
26 | reduce that complexity through abstraction actually make the problem worse. You
27 | end up having to pass tens or hundreds of configuration options to your table
28 | component to get it to work the way you want.
29 |
30 | Ember Table has decided to do the opposite. The structure of a table component
31 | mirrors the structure of an actual HTML table, giving you the ability to
32 | customize every level of your table using standard Ember templates, components,
33 | and actions:
34 |
35 | ```hbs
36 |
37 |
38 |
39 |
40 |
41 |
42 | Header
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | Cell
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | Footer
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 | Header
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 | Cell
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | Footer
87 |
88 |
89 |
90 |
91 | ```
92 |
93 | Our stance is that rather than attempting to hide this complexity from you, we
94 | would rather give you full flexibility. It's very likely that you will want to
95 | customize the behavior of your table, and conversely, it's very _unlikely_ that
96 | you will have hundreds or thousands of data tables sprinkled throughout your
97 | app. Data tables tend to be used in a few central locations, so having a
98 | flexible API that allows you to easily flesh out those (relatively) few use
99 | cases is very valuable.
100 |
101 | ## Feature Complete OOTB
102 |
103 | Ember Table doesn't stop at giving you a solid API to build on, it also provides
104 | many features that you would expect a modern data table to have, including:
105 |
106 | - Fixed headers and footers
107 | - Fixed columns
108 | - Row selection
109 | - Row sorting
110 | - Tree tables (with group collapsing)
111 | - Column resizing and reordering
112 | - Nested subcolumns (e.g. to create pivot tables)
113 | - Scalability - Can render thousands of rows performantly
114 |
115 | By default, Ember Table is a feature complete data table solution that you can
116 | drop in to your app. We aim to support most standard data table features, and
117 | provide escape hatches where possible.
118 |
119 | ## Lightweight
120 |
121 | Ember Table is also a relatively lightweight table solution, currently weighing
122 | in at `22kb` (minified and gzipped) with plenty of extra weight to shed. Compare
123 | that to standalone table solutions like ag-grid (`152kb`) or HandsOnTable
124 | (`196kb`) and you can see how a table solution that integrates with the
125 | framework directly can save quite a few bytes.
126 |
127 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/not-found.hbs:
--------------------------------------------------------------------------------
1 |
2 |
Not found
3 |
This page doesn't exist. Head home?
4 |
2 | Simple scenarios.performance scenarios.blank
6 |
7 | {{outlet}}
8 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/scenarios/blank.hbs:
--------------------------------------------------------------------------------
1 | blank
2 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/scenarios/performance.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
8 |
9 |
10 |
11 |
12 | {{value}}
13 |
14 | {{#if (eq columnMeta.index 0)}}lorem ipsum dolor{{/if}}
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/scenarios/simple.hbs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
--------------------------------------------------------------------------------
/tests/dummy/app/utils/base-26.js:
--------------------------------------------------------------------------------
1 | import { assert } from '@ember/debug';
2 |
3 | const ALPHA = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
4 | const BASE = 26;
5 |
6 | /**
7 | * Convert an integer to bijective hexavigesimal notation (alphabetic base-26).
8 | *
9 | * @param {number} int - A positive integer above zero
10 | */
11 | export function toBase26(int) {
12 | assert('base 26 conversion must receive an integer', Number.isInteger(int));
13 | assert('base 26 conversion must receive a positive value', int >= 0);
14 |
15 | if (int < BASE) {
16 | return ALPHA[int];
17 | }
18 |
19 | let result = '';
20 | int += 1;
21 |
22 | while (int > 0) {
23 | let index = int % BASE || BASE;
24 | result = ALPHA[index - 1] + result;
25 | int = Math.floor((int - 1) / BASE);
26 | }
27 |
28 | return result;
29 | }
30 |
--------------------------------------------------------------------------------
/tests/dummy/app/utils/generators.js:
--------------------------------------------------------------------------------
1 | import { A as emberA } from '@ember/array';
2 | import { toBase26 } from './base-26';
3 | import faker from 'faker';
4 |
5 | const DEFAULT_USE_EMBER_ARRAY = true;
6 | let useEmberArray = DEFAULT_USE_EMBER_ARRAY;
7 |
8 | export function configureTableGeneration({ useEmberArray: _useEmberArray }) {
9 | useEmberArray = _useEmberArray;
10 | }
11 |
12 | export function resetTableGenerationConfig() {
13 | useEmberArray = DEFAULT_USE_EMBER_ARRAY;
14 | }
15 |
16 | export function getRandomInt(max, min) {
17 | return faker.random.number({ min, max });
18 | }
19 |
20 | function identity(row, key) {
21 | return key;
22 | }
23 |
24 | export class DummyRow {
25 | constructor(id, format = identity) {
26 | this.id = id;
27 | this.format = format;
28 |
29 | // Set these so that they are not picked up by `unknownProperty` below
30 | this.disableCollapse = null;
31 | this.children = null;
32 | }
33 |
34 | unknownProperty(key) {
35 | return this.format(this, key);
36 | }
37 | }
38 |
39 | export function generateRow(id, format) {
40 | return new DummyRow(id, format);
41 | }
42 |
43 | export function generateRows(rowCount, depth, format, idPrefix = '') {
44 | let arr = [];
45 |
46 | for (let i = 0; i < rowCount; i++) {
47 | let id = idPrefix + i;
48 | let row = generateRow(id, format);
49 |
50 | if (depth > 1) {
51 | row.children = generateRows(rowCount, depth - 1, format, id);
52 | }
53 |
54 | arr.push(row);
55 | }
56 |
57 | return useEmberArray ? emberA(arr) : arr;
58 | }
59 |
60 | export function generateColumn(id, options) {
61 | let formattedId = Array.isArray(id) ? id.map(toBase26).join(' ') : toBase26(id);
62 |
63 | return {
64 | name: formattedId,
65 | valuePath: formattedId,
66 |
67 | ...options,
68 | };
69 | }
70 |
71 | export function generateColumns(
72 | columnCount,
73 | {
74 | id = [],
75 | subcolumnCount = 0,
76 | fixedLeftCount = 0,
77 | fixedRightCount = 0,
78 |
79 | ...columnOptions
80 | } = {}
81 | ) {
82 | let columns = [];
83 |
84 | for (let i = 0; i < columnCount; i++) {
85 | let columnId = id.slice();
86 |
87 | columnId.push(i);
88 |
89 | let columnDefinition = generateColumn(columnId, columnOptions);
90 |
91 | if (subcolumnCount) {
92 | columnDefinition.subcolumns = generateColumns(subcolumnCount, {
93 | id: columnId,
94 | ...columnOptions,
95 | });
96 | }
97 |
98 | columns.push(columnDefinition);
99 | }
100 |
101 | for (let i = 0; i < fixedLeftCount; i++) {
102 | columns[i].isFixed = 'left';
103 | }
104 |
105 | for (let i = 0; i < fixedRightCount; i++) {
106 | columns[columnCount - i - 1].isFixed = 'right';
107 | }
108 |
109 | return useEmberArray ? emberA(columns) : columns;
110 | }
111 |
--------------------------------------------------------------------------------
/tests/dummy/config/ember-try.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const { embroiderSafe, embroiderOptimized } = require('@embroider/test-setup');
4 |
5 | module.exports = async function() {
6 | let { default: latestVersion } = await import('latest-version');
7 |
8 | return {
9 | packageManager: 'yarn',
10 | scenarios: [
11 | embroiderSafe(),
12 | embroiderOptimized(),
13 | {
14 | name: 'ember-lts-3.28',
15 | npm: {
16 | devDependencies: {
17 | '@ember/test-helpers': '2.9.4',
18 | 'ember-a11y-testing': '5.2.1',
19 | 'ember-qunit': '6.0.0',
20 | 'ember-source': '~3.28.0',
21 | },
22 | },
23 | },
24 | {
25 | name: 'ember-lts-4.4',
26 | npm: {
27 | devDependencies: {
28 | '@ember/test-helpers': '2.9.4',
29 | 'ember-a11y-testing': '5.2.1',
30 | 'ember-qunit': '6.0.0',
31 | 'ember-source': '~4.4.0',
32 | },
33 | },
34 | },
35 | {
36 | name: 'ember-lts-4.12',
37 | npm: {
38 | devDependencies: {
39 | 'ember-source': '~4.12.0',
40 | },
41 | },
42 | },
43 | {
44 | name: 'ember-lts-5.4',
45 | npm: {
46 | devDependencies: {
47 | 'ember-source': '~5.4.0',
48 | },
49 | },
50 | },
51 | {
52 | name: 'ember-lts-5.12',
53 | npm: {
54 | devDependencies: {
55 | 'ember-source': '~5.12.0',
56 | },
57 | },
58 | },
59 | {
60 | name: 'ember-release',
61 | npm: {
62 | devDependencies: {
63 | 'ember-source': await latestVersion('ember-source'),
64 | },
65 | },
66 | },
67 | {
68 | name: 'ember-beta',
69 | npm: {
70 | devDependencies: {
71 | 'ember-source': await latestVersion('ember-source', {
72 | version: 'beta',
73 | }),
74 | },
75 | },
76 | },
77 | {
78 | name: 'ember-canary',
79 | npm: {
80 | devDependencies: {
81 | 'ember-source': await latestVersion('ember-source', {
82 | version: 'alpha',
83 | }),
84 | },
85 | },
86 | },
87 | {
88 | name: 'ember-default',
89 | npm: {
90 | devDependencies: {},
91 | },
92 | },
93 | {
94 | name: 'ember-production',
95 | command: 'ember test -e production',
96 | npm: {
97 | devDependencies: {},
98 | },
99 | },
100 | {
101 | name: 'ember-default-docs',
102 | command: 'ember test --filter="Acceptance | docs"',
103 | npm: {
104 | devDependencies: {
105 | 'ember-data': '~3.24.0',
106 | 'ember-cli-addon-docs': '^5.2.0',
107 | 'ember-cli-addon-docs-yuidoc': '^1.0.0',
108 | 'ember-cli-deploy': '^1.0.2',
109 | 'ember-cli-deploy-build': '^1.1.1',
110 | 'ember-cli-deploy-git': '^1.3.3',
111 | 'ember-cli-deploy-git-ci': '^1.0.1',
112 | },
113 | resolutions: {
114 | '@handlebars/parser': '~2.1.0',
115 | },
116 | },
117 | },
118 | ],
119 | };
120 | };
121 |
--------------------------------------------------------------------------------
/tests/dummy/config/environment.js:
--------------------------------------------------------------------------------
1 | const ADDON_DOCS_INSTALLED = Object.keys(require('../../../package.json').devDependencies).includes(
2 | 'ember-cli-addon-docs'
3 | );
4 |
5 | module.exports = function(environment) {
6 | let ENV = {
7 | modulePrefix: 'dummy',
8 | environment,
9 | rootURL: '/',
10 | locationType: 'history',
11 | ADDON_DOCS_INSTALLED,
12 | EmberENV: {
13 | EXTEND_PROTOTYPES: false,
14 | FEATURES: {
15 | // Here you can enable experimental features on an ember canary build
16 | // e.g. 'with-controller': true
17 | },
18 | },
19 |
20 | APP: {
21 | // Here you can pass flags/options to your application instance
22 | // when it is created
23 | },
24 | };
25 |
26 | if (environment === 'development') {
27 | // ENV.APP.LOG_RESOLVER = true;
28 | // ENV.APP.LOG_ACTIVE_GENERATION = true;
29 | // ENV.APP.LOG_TRANSITIONS = true;
30 | // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
31 | // ENV.APP.LOG_VIEW_LOOKUPS = true;
32 | }
33 |
34 | if (environment === 'test') {
35 | // Testem prefers this...
36 | ENV.locationType = 'none';
37 |
38 | // keep test console output quieter
39 | ENV.APP.LOG_ACTIVE_GENERATION = false;
40 | ENV.APP.LOG_VIEW_LOOKUPS = false;
41 |
42 | ENV.APP.rootElement = '#ember-testing';
43 | ENV.APP.autoboot = false;
44 | }
45 |
46 | if (environment === 'production') {
47 | // Allow ember-cli-addon-docs to update the rootURL in compiled assets
48 | ENV.rootURL = 'ADDON_DOCS_ROOT_URL';
49 | }
50 |
51 | return ENV;
52 | };
53 |
--------------------------------------------------------------------------------
/tests/dummy/config/optional-features.json:
--------------------------------------------------------------------------------
1 | {
2 | "application-template-wrapper": false,
3 | "jquery-integration": false,
4 | "template-only-glimmer-components": true
5 | }
6 |
--------------------------------------------------------------------------------
/tests/dummy/config/targets.js:
--------------------------------------------------------------------------------
1 | const browsers = ['last 1 Chrome versions', 'last 1 Firefox versions', 'last 1 Safari versions'];
2 |
3 | module.exports = {
4 | browsers,
5 | };
6 |
--------------------------------------------------------------------------------
/tests/dummy/public/404.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Single Page Apps for GitHub Pages
6 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/tests/dummy/public/assets/images/checkmark.svg:
--------------------------------------------------------------------------------
1 | Dummy Tests
7 |
22 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | {{content-for "body-footer"}} {{content-for "test-body-footer"}}
35 |
36 |
37 |
--------------------------------------------------------------------------------
/tests/integration/components/footer-test.js:
--------------------------------------------------------------------------------
1 | import { module, test } from 'qunit';
2 |
3 | import { generateTable } from '../../helpers/generate-table';
4 | import { componentModule } from '../../helpers/module';
5 |
6 | import TablePage from 'ember-table/test-support/pages/ember-table';
7 |
8 | const table = new TablePage();
9 |
10 | module('Integration | footer', function() {
11 | componentModule('basic', function() {
12 | test('renders if footerRows are set', async function(assert) {
13 | await generateTable(this, { footerRowCount: 3 });
14 |
15 | assert.true(table.footer.isPresent, 'Footer is present in the table');
16 | assert.strictEqual(table.footer.rows.length, 3, 'correct number of footer rows rendered');
17 | assert.strictEqual(
18 | table.footer.rowCount,
19 | 3,
20 | 'The total number of rows in the footer is available through the page object'
21 | );
22 |
23 | this.set('footerRows', []);
24 |
25 | assert.true(table.footer.isPresent, 'Footer is present in the table');
26 | assert.strictEqual(table.footer.rows.length, 0, 'Footer rows are removed');
27 | });
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/tests/integration/components/headers/cell-test.js:
--------------------------------------------------------------------------------
1 | import { module, test } from 'qunit';
2 | import { componentModule } from '../../../helpers/module';
3 |
4 | import { generateTable } from '../../../helpers/generate-table';
5 | import TablePage from 'ember-table/test-support/pages/ember-table';
6 |
7 | let table = new TablePage();
8 |
9 | module('Integration | header | th', function() {
10 | componentModule('basic', function() {
11 | test('sends onContextMenu action', async function(assert) {
12 | this.set('onHeaderCellContextMenu', event => {
13 | assert.ok(event, 'event sent');
14 | });
15 |
16 | await generateTable(this);
17 | await table.headers.objectAt(0).contextMenu();
18 | });
19 | });
20 | });
21 |
--------------------------------------------------------------------------------
/tests/integration/components/headers/resize-handle-test.js:
--------------------------------------------------------------------------------
1 | import { module, test } from 'qunit';
2 | import { render } from '@ember/test-helpers';
3 | import hbs from 'htmlbars-inline-precompile';
4 |
5 | import { ResizePage } from 'ember-table/test-support/pages/-private/ember-table-header';
6 |
7 | import { componentModule } from '../../../helpers/module';
8 |
9 | let resize = new ResizePage();
10 |
11 | module('Integration | Component | ember-th/resize-handle', function() {
12 | componentModule('basic', function() {
13 | test('it renders', async function(assert) {
14 | this.set('columnMeta', {
15 | isResizable: true,
16 | });
17 |
18 | await render(hbs`
25 | template block text
26 |
27 | `);
28 |
29 | assert.strictEqual(sort.indicator.text, 'template block text');
30 | });
31 |
32 | test('it is hidden when not sorted', async function(assert) {
33 | this.set('columnMeta', {
34 | isSorted: false,
35 | });
36 |
37 | await render(hbs`
44 | template block text
45 |
46 | `);
47 |
48 | assert.false(sort.indicator.isPresent);
49 | });
50 |
51 | test('it displays the sort order', async function(assert) {
52 | this.set('columnMeta', {
53 | isSorted: true,
54 | isSortedAsc: true,
55 | });
56 |
57 | await render(hbs` {}
13 |
--------------------------------------------------------------------------------
/types/components/ember-table/component.d.ts:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import { EmberTableColumn, EmberTableRow } from 'ember-table';
3 | import EmberTbodyComponent from 'ember-table/components/ember-tbody/component';
4 | import EmberTfootComponent from 'ember-table/components/ember-tfoot/component';
5 | import EmberTheadComponent from 'ember-table/components/ember-thead/component';
6 | import EmberTableLoadingMoreComponent from 'ember-table/components/ember-table-loading-more/component';
7 |
8 | export interface EmberTableSignature<
9 | RowType extends EmberTableRow,
10 | ColumnType extends EmberTableColumn
11 | > {
12 | Element: HTMLDivElement;
13 | Blocks: {
14 | default: [
15 | {
16 | body: typeof EmberTbodyComponent;
17 | foot: typeof EmberTfootComponent;
18 | head: typeof EmberTheadComponent;
19 | loadingMore: typeof EmberTableLoadingMoreComponent;
20 | }
21 | ];
22 | };
23 | }
24 |
25 | export default class EmberTableComponent<
26 | RowType extends EmberTableRow = EmberTableRow,
27 | ColumnType extends EmberTableColumn = EmberTableColumn
28 | > extends Component> {}
29 |
--------------------------------------------------------------------------------
/types/components/ember-td/component.d.ts:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import { EmberTableColumn, EmberTableRow, TableColumnMeta, TableRowMeta } from 'ember-table';
3 |
4 | export interface EmberTdSignature {
5 | Element: HTMLTableCellElement;
6 | Args: {
7 | /**
8 | * Action sent when the user clicks this element.
9 | */
10 | onClick?: ((row: RowType, event: Event) => void) | undefined;
11 |
12 | /**
13 | * Action sent when the user double clicks this element.
14 | */
15 | onDoubleClick?: ((row: RowType, event: Event) => void) | undefined;
16 | };
17 | Blocks: {
18 | default: [
19 | cellValue: RowType[keyof RowType],
20 | columnValue: ColumnType,
21 | rowValue: RowType,
22 | cellMeta: unknown,
23 | columnMeta: TableColumnMeta,
24 | rowMeta: TableRowMeta,
25 | ];
26 | };
27 | }
28 |
29 | export default class EmberTdComponent<
30 | RowType extends EmberTableRow = EmberTableRow,
31 | ColumnType extends EmberTableColumn = EmberTableColumn
32 | > extends Component> {}
33 |
--------------------------------------------------------------------------------
/types/components/ember-tfoot/component.d.ts:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import { EmberTableColumn, EmberTableRow, TableRowMeta } from 'ember-table';
3 | import EmberTrComponent from 'ember-table/components/ember-tr/component';
4 |
5 | export interface EmberTfootSignature<
6 | RowType extends EmberTableRow,
7 | ColumnType extends EmberTableColumn
8 | > {
9 | Element: HTMLDivElement;
10 | Args: {
11 | rows: RowType[];
12 | };
13 | Blocks: {
14 | default: [
15 | {
16 | row: typeof EmberTrComponent;
17 | rowMeta: TableRowMeta;
18 | rowValue: RowType;
19 | }
20 | ];
21 | };
22 | }
23 |
24 | export default class EmberTfootComponent<
25 | RowType extends EmberTableRow = EmberTableRow,
26 | ColumnType extends EmberTableColumn = EmberTableColumn
27 | > extends Component> {}
28 |
--------------------------------------------------------------------------------
/types/components/ember-th/component.d.ts:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import { TableColumnMeta } from 'ember-table';
3 |
4 | export interface EmberThSignature {
5 | Element: HTMLTableCellElement;
6 | Args: {
7 | /**
8 | * Action sent when the user clicks right this element.
9 | */
10 | onContextMenu?: ((event: Event) => void);
11 | };
12 | Blocks: {
13 | default: [
14 | columnValue: ColumnType,
15 | columnMeta: TableColumnMeta,
16 | ];
17 | };
18 | }
19 |
20 | export default class EmberThComponent extends Component> {}
21 |
--------------------------------------------------------------------------------
/types/components/ember-th/resize-handle/component.d.ts:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import { TableColumnMeta } from 'ember-table';
3 |
4 | export interface ResizeHandleSignature {
5 | Element: HTMLTableCellElement;
6 | Args: {
7 | columnMeta: TableColumnMeta;
8 | };
9 | }
10 |
11 | export default class ResizeHandleComponent extends Component {}
12 |
--------------------------------------------------------------------------------
/types/components/ember-th/sort-indicator/component.d.ts:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import { TableColumnMeta } from 'ember-table';
3 |
4 | export interface SortIndicatorSignature {
5 | Element: HTMLTableCellElement;
6 | Args: {
7 | columnMeta: TableColumnMeta;
8 | };
9 | }
10 |
11 | export default class SortIndicatorComponent extends Component {}
12 |
--------------------------------------------------------------------------------
/types/components/ember-tr/component.d.ts:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import { EmberTableColumn, EmberTableRow, TableColumnMeta, TableRowMeta } from 'ember-table';
3 | import EmberTdComponent from 'ember-table/components/ember-td/component';
4 |
5 | export interface EmberTrSignature<
6 | RowType extends EmberTableRow,
7 | ColumnType extends EmberTableColumn,
8 | CellComponentType
9 | > {
10 | Element: HTMLTableRowElement;
11 | Args: {
12 | /**
13 | * An action that is called when a row is clicked. Will be called with the row and the event.
14 | */
15 | onClick?: (event: { event: Event, rowValue: RowType, rowMeta: TableRowMeta }) => void;
16 |
17 | /**
18 | * An action that is called when a row is double clicked. Will be called with the row and the event.
19 | */
20 | onDoubleClick?: (event: { event: Event, rowValue: RowType, rowMeta: TableRowMeta }) => void;
21 | };
22 | Blocks: {
23 | default: [
24 | {
25 | cell: CellComponentType;
26 | cellMeta: unknown;
27 | cellValue: RowType[keyof RowType];
28 | columnMeta: TableColumnMeta;
29 | columnValue: ColumnType;
30 | rowMeta: TableRowMeta;
31 | rowValue: RowType;
32 | }
33 | ];
34 | };
35 | }
36 |
37 | export default class EmberTrComponent<
38 | RowType extends EmberTableRow = EmberTableRow,
39 | ColumnType extends EmberTableColumn = EmberTableColumn,
40 | CellComponentType = typeof EmberTdComponent
41 | > extends Component> {}
42 |
--------------------------------------------------------------------------------
/types/index.d.ts:
--------------------------------------------------------------------------------
1 | export interface EmberTableColumn {
2 | name?: string;
3 | valuePath?: string;
4 |
5 | isFixed?: 'left' | 'right';
6 | isResizable?: boolean;
7 | isSortable?: boolean;
8 | maxWidth?: number;
9 | minWidth?: number;
10 | subcolumns?: EmberTableColumn[];
11 | textAlign?: 'left' | 'center' | 'right';
12 | width?: number;
13 | }
14 |
15 | export interface EmberTableRow {}
16 |
17 | export interface EmberTableSort {
18 | isAscending: boolean;
19 | valuePath: string;
20 | }
21 |
22 | export interface TableRowMeta {
23 | isCollapsed: boolean;
24 | isSelected: boolean;
25 | isGroupSelected: boolean;
26 | canCollapse: boolean;
27 | depth: number;
28 | first: unknown | null;
29 | last: unknown | null;
30 | next: unknown | null;
31 | prev: unknown | null;
32 | }
33 |
34 | export interface TableColumnMeta {
35 | isLeaf: boolean;
36 | isFixed: 'left' | 'right' | undefined;
37 | isSortable: boolean;
38 | isResizable: boolean;
39 | isReorderable: boolean;
40 | isSlack: boolean;
41 | width: number;
42 | offsetLeft: number;
43 | offsetRight: number;
44 | rowSpan: number;
45 | columnSpan: number;
46 | index: number | undefined;
47 | isLastRendered: boolean;
48 | sortIndex: number;
49 | isSorted: boolean;
50 | isMultiSorted: boolean;
51 | isSortedAsc: boolean;
52 | }
53 |
--------------------------------------------------------------------------------
/types/template-registry.d.ts:
--------------------------------------------------------------------------------
1 | import EmberTableComponent from 'ember-table/components/ember-table/component';
2 | import ResizeHandleComponent from 'ember-table/components/ember-th/resize-handle/component';
3 | import SortIndicatorComponent from 'ember-table/components/ember-th/sort-indicator/component';
4 |
5 | export default interface Registry {
6 | EmberTable: typeof EmberTableComponent;
7 | 'ember-table': typeof EmberTableComponent;
8 | 'EmberTh::ResizeHandle': typeof ResizeHandleComponent;
9 | 'ember-th/resize-handle': typeof ResizeHandleComponent;
10 | 'EmberTh::SortIndicator': typeof SortIndicatorComponent;
11 | 'ember-th/sort-indicator': typeof SortIndicatorComponent;
12 | }
13 |
--------------------------------------------------------------------------------
/vendor/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Addepar/ember-table/5d70fc82dfe50c238aabb4995a0ea62dadb3a944/vendor/.gitkeep
--------------------------------------------------------------------------------
24 |