2 | {{! BEGIN-SNIPPET docs-example-row-selection.hbs }}
3 |
4 |
12 | {{! END-SNIPPET }}
13 |
14 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 |
8 | [*]
9 | end_of_line = lf
10 | charset = utf-8
11 | trim_trailing_whitespace = true
12 | insert_final_newline = true
13 | indent_style = space
14 | indent_size = 2
15 |
16 | [*.hbs]
17 | insert_final_newline = false
18 |
19 | [*.{diff,md}]
20 | trim_trailing_whitespace = false
21 |
--------------------------------------------------------------------------------
/tests/dummy/app/styles/fixes.scss:
--------------------------------------------------------------------------------
1 | /* CSS fixes for Chrome table rendering issues */
2 | .table-fixes {
3 | table {
4 | /* fix for vanishing borders */
5 | border-spacing: 0;
6 | border-collapse: separate;
7 | }
8 |
9 | thead {
10 | /* fix for buggy Ember Table headers, especially with `isFixed` */
11 | position: sticky !important;
12 | z-index: 5;
13 |
14 | th {
15 | /* paint over Ember Table header bleed */
16 | box-shadow: 0 -1px 0 0 white;
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/.ls-lint.yml:
--------------------------------------------------------------------------------
1 | # Docs on ls-lint: https://ls-lint.org/
2 | # The linter can be run locally by `npx ls-lint [files]`
3 | # Pass `--debug` flag to see the list of all files/dirs that are linted
4 | ls:
5 | .js: kebab-case
6 | .d.ts: kebab-case
7 | .ts: kebab-case
8 | .html: kebab-case
9 | .md: kebab-case | screamingsnakecase
10 | .css: kebab-case
11 | .scss: kebab-case
12 | .dir: kebab-case
13 |
14 | ignore:
15 | - .git
16 | - node_modules
17 | - dist
18 | - ./.*
19 | - yarn.lock
20 | - yarn-error.log
21 |
--------------------------------------------------------------------------------
/addon/components/ember-th/sort-indicator/template.hbs:
--------------------------------------------------------------------------------
1 | {{#if this.isSorted}}
2 |
3 | {{#if (has-block)}}
4 | {{yield this.columnMeta}}
5 | {{else}}
6 | {{#if this.isMultiSorted}}
7 | {{this.sortIndex}}
8 | {{/if}}
9 | {{/if}}
10 |
11 | {{/if}}
12 |
13 | {{#if this.isSortable}}
14 |
15 | {{/if}}
16 |
--------------------------------------------------------------------------------
/addon/components/ember-table/template.hbs:
--------------------------------------------------------------------------------
1 |
6 |
7 | {{yield (hash
8 | api=this.api
9 | head=(component "ember-thead" api=this.api)
10 | body=(component "ember-tbody" api=this.api)
11 | foot=(component "ember-tfoot" api=this.api)
12 | loadingMore=(component "ember-table-loading-more" api=this.api)
13 | )}}
14 |
15 |
16 |
2 | {{! BEGIN-SNIPPET docs-example-dynamic-fixed-columns.hbs }}
3 |
4 |
5 |
6 |
7 |
8 |
9 | {{column.name}}
10 |
11 |
12 |
13 |
14 |
16 | {{! END-SNIPPET }}
17 |
18 |
--------------------------------------------------------------------------------
/addon-test-support/index.js:
--------------------------------------------------------------------------------
1 | import TablePage from './pages/ember-table';
2 | import registerWaiter from 'ember-raf-scheduler/test-support/register-waiter';
3 | import { setSetupRowCountForTest } from 'ember-table/components/ember-tbody/component';
4 | import { setupTHeadForTest } from 'ember-table/components/ember-thead/component';
5 | import { setSimpleCheckboxForTest } from 'ember-table/components/ember-td/component';
6 |
7 | function setupForTest() {
8 | registerWaiter();
9 | setSetupRowCountForTest(true);
10 | setupTHeadForTest(true);
11 | setSimpleCheckboxForTest(true);
12 | }
13 |
14 | export { TablePage, setupForTest };
15 |
--------------------------------------------------------------------------------
/types/components/ember-th/component.d.ts:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import { TableColumnMeta } from 'ember-table';
3 |
4 | export interface EmberThSignature
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/helpers/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/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/helpers/warn-handlers.js:
--------------------------------------------------------------------------------
1 | import { registerWarnHandler } from '@ember/debug';
2 |
3 | let _registeredHandler = null;
4 | let _didRegisterWarnHandler = false;
5 |
6 | export function setup() {
7 | if (_didRegisterWarnHandler) {
8 | // We cannot unregister a warn handler, so make sure to only register the
9 | // handler one time during all tests.
10 | return;
11 | }
12 | _didRegisterWarnHandler = true;
13 | registerWarnHandler((message, options, next) => {
14 | if (_registeredHandler) {
15 | _registeredHandler(message, options);
16 | } else {
17 | next(message, options);
18 | }
19 | });
20 | }
21 |
22 | export function registerTestWarnHandler(callback) {
23 | _registeredHandler = callback;
24 | }
25 |
26 | export function teardown() {
27 | _registeredHandler = null;
28 | }
29 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/examples/infinite-scroll/template.hbs:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 | {{! BEGIN-SNIPPET docs-example-infinite-scroll.hbs }}
10 |
11 |
21 |
22 |
23 | 
24 |
25 |
26 | {{! END-SNIPPET }}
27 |
28 |
--------------------------------------------------------------------------------
/addon/components/-private/scroll-indicators/template.hbs:
--------------------------------------------------------------------------------
1 | {{#if this.showLeft}}
2 |
7 | {{/if}}
8 | {{#if this.showRight}}
9 |
14 | {{/if}}
15 | {{#if this.showTop}}
16 |
21 | {{/if}}
22 | {{#if this.showBottom}}
23 |
28 | {{/if}}
29 |
--------------------------------------------------------------------------------
/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
24 |
11 |
12 |
25 |
26 | {{! END-SNIPPET }}
27 |
23 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | {{content-for "body-footer"}} {{content-for "test-body-footer"}}
35 |
36 |
37 |
--------------------------------------------------------------------------------
/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/quickstart.md:
--------------------------------------------------------------------------------
1 | # Quickstart.
2 |
3 | ## Installation
4 |
5 | ```sh
6 | ember install ember-table
7 | ```
8 |
9 | ## Basic Usage
10 |
11 | To use `Ember Table`, you'll need to create column definitions, and you'll need
12 | to pass in an array of rows. Here is a component definition with some basic
13 | column definitions and a rows array:
14 |
15 | ```javascript
16 | import Component from '@ember/component';
17 |
18 | class DemoComponent extends Component {
19 | columns = [
20 | {
21 | name: `First Name`,
22 | valuePath: `firstName`
23 | },
24 | {
25 | name: `Last Name`,
26 | valuePath: `lastName`
27 | }
28 | ];
29 |
30 | rows = [
31 | {
32 | firstName: 'Tony',
33 | lastName: 'Stark',
34 | },
35 | {
36 | firstName: 'Tom',
37 | lastName: 'Dale',
38 | }
39 | ];
40 | }
41 | ```
42 |
43 | Note how each item in the rows array has `firstName` and `lastName` properties,
44 | which matches up with the `valuePath` properties from the column definitions.
45 | This is how the table will get the values for each column.
46 |
47 | Now let's setup the template for this component:
48 |
49 | ```hbs
50 |
24 |
25 |
26 |
5 | {{! BEGIN-SNIPPET table-meta-data-cell-selection.hbs }}
6 |
7 |
8 |
9 |
14 | {{column.name}}
15 |
16 |
17 |
18 |
19 |
20 |
25 |
30 |
34 |
35 |
36 |
37 | {{! END-SNIPPET }}
38 |
39 |
31 | {{cell}}
32 |
33 |
3 | {{#if this.canSelect}}
4 |
8 |
40 | {{else}}
41 | {{#if (has-block)}}
42 | {{yield this.cellValue this.columnValue this.rowValue this.cellMeta this.columnMeta this.rowMeta this.rowsCount}}
43 | {{else}}
44 | {{this.cellValue}}
45 | {{/if}}
46 | {{/if}}
47 |
--------------------------------------------------------------------------------
/tests/dummy/app/router.js:
--------------------------------------------------------------------------------
1 | import AddonDocsRouter, { docsRoute } from 'ember-cli-addon-docs/router';
2 | import config from './config/environment';
3 |
4 | const Router = AddonDocsRouter.extend({
5 | location: config.locationType,
6 | rootURL: config.rootURL,
7 | });
8 |
9 | Router.map(function() {
10 | docsRoute(this, function() {
11 | this.route('quickstart');
12 | this.route('why-ember-table');
13 |
14 | this.route('guides', function() {
15 | this.route('main', function() {
16 | this.route('basic-table');
17 | this.route('table-customization');
18 | this.route('table-meta-data');
19 | this.route('styling-the-table');
20 | this.route('infinite-scroll');
21 | });
22 |
23 | this.route('header', function() {
24 | this.route('columns');
25 | this.route('subcolumns');
26 | this.route('fixed-columns');
27 | this.route('size-constraints');
28 | this.route('sorting');
29 | this.route('scroll-indicators');
30 | this.route('column-keys');
31 | });
32 |
33 | this.route('body', function() {
34 | this.route('rows-and-trees');
35 | this.route('row-selection');
36 | this.route('occlusion');
37 | });
38 | });
39 |
40 | this.route('testing', function() {
41 | this.route('test-page');
42 | });
43 |
44 | this.route('api', function() {
45 | this.route('class', { path: '/:class_id' });
46 | });
47 | });
48 |
49 | this.route('scenarios', function() {
50 | this.route('simple');
51 | this.route('performance');
52 | this.route('blank');
53 | });
54 |
55 | this.route('not-found', { path: '/*path' });
56 | });
57 |
58 | export default Router;
59 |
--------------------------------------------------------------------------------
/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 |
33 | {{#if (has-block)}}
34 | {{yield this.cellValue this.columnValue this.rowValue this.cellMeta this.columnMeta this.rowMeta this.rowsCount}}
35 | {{else}}
36 | {{this.cellValue}}
37 | {{/if}}
38 |
39 |
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/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 |
--------------------------------------------------------------------------------
/addon/-private/meta-cache.js:
--------------------------------------------------------------------------------
1 | import { get } from '@ember/object';
2 |
3 | export function getOrCreate(obj, cache, Class) {
4 | if (cache.has(obj) === false) {
5 | cache.set(obj, Class.create ? Class.create() : new Class());
6 | }
7 |
8 | return cache.get(obj);
9 | }
10 |
11 | /**
12 | * Substitute for `Map` that allows non-identical object keys to share
13 | * identical values by specifying a key path for the associating keys.
14 | *
15 | * If no key path is specified, it behaves like a `Map`.
16 | *
17 | * @class MetaCache
18 | * @constructor
19 | * @param {Object} options
20 | */
21 | export default class MetaCache {
22 | constructor({ keyPath } = {}) {
23 | this.keyPath = keyPath;
24 |
25 | // in order to prevent memory leaks, we need to be able to clean the cache
26 | // manually when the table is destroyed or updated; this is why we use a
27 | // Map instead of WeakMap
28 | this._map = new Map();
29 | }
30 |
31 | get(obj) {
32 | let key = this._keyFor(obj);
33 | let entry = this._map.get(key);
34 | return entry ? entry[1] : entry;
35 | }
36 |
37 | getOrCreate(obj, Class) {
38 | return getOrCreate(obj, this, Class);
39 | }
40 |
41 | set(obj, meta) {
42 | let key = this._keyFor(obj);
43 | this._map.set(key, [obj, meta]);
44 | }
45 |
46 | has(obj) {
47 | let key = this._keyFor(obj);
48 | return this._map.has(key);
49 | }
50 |
51 | delete(obj) {
52 | let key = this._keyFor(obj);
53 | this._map.delete(key);
54 | }
55 |
56 | entries() {
57 | return this._map.values();
58 | }
59 |
60 | _keyFor(obj) {
61 | // falls back to `obj` as key if a legitimate key cannot be produced
62 | if (!obj || !this.keyPath) {
63 | return obj;
64 | }
65 |
66 | let key = get(obj, this.keyPath);
67 | return key ? key : obj;
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/tests/dummy/public/404.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
3 |
4 |
17 |
18 |
22 |
28 |
34 |
38 |
39 | {{! END-SNIPPET }}
--------------------------------------------------------------------------------
/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 |
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/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 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: Ember-Table CI
2 | on:
3 | pull_request:
4 | types: [opened, synchronize, reopened, ready_for_review]
5 |
6 | jobs:
7 | test:
8 | name: Run Tests
9 | runs-on: ubuntu-latest
10 | timeout-minutes: 7
11 |
12 | steps:
13 | - name: Checkout
14 | uses: actions/checkout@v6
15 |
16 | - name: Use Volta
17 | uses: volta-cli/action@v4
18 |
19 | - name: Node Modules Cache
20 | id: cache-npm
21 | uses: actions/cache@v5
22 | with:
23 | path: '**/node_modules'
24 | key: ci-yarn-${{ hashFiles('**/yarn.lock') }}
25 |
26 | - name: Install Dependencies
27 | if: steps.cache-npm.outputs.cache-hit != 'true'
28 | run: yarn install --frozen-lockfile
29 |
30 | - name: Lint
31 | run: yarn lint
32 |
33 | - name: Run Tests
34 | run: yarn test
35 | env:
36 | CI: true
37 |
38 | test-ember-try:
39 | name: Run Tests
40 | runs-on: ubuntu-latest
41 | timeout-minutes: 10
42 |
43 | strategy:
44 | fail-fast: false
45 | matrix:
46 | ember-version:
47 | [
48 | embroider-safe,
49 | # embroider-optimized,
50 | ember-lts-3.28,
51 | ember-lts-4.4,
52 | ember-lts-4.12,
53 | ember-lts-5.4,
54 | ember-lts-5.12,
55 | ember-release,
56 | # ember-production,
57 | ember-default-docs
58 | ]
59 |
60 | steps:
61 | - name: Checkout
62 | uses: actions/checkout@v6
63 |
64 | - name: Use Volta
65 | uses: volta-cli/action@v4
66 |
67 | - name: Stash yarn.lock for cache key
68 | run: cp yarn.lock __cache-key
69 |
70 | - name: Node Modules Cache
71 | id: cache-npm
72 | uses: actions/cache@v5
73 | with:
74 | path: |
75 | node_modules
76 | package.json
77 | yarn.lock
78 | __env
79 | key: ci-yarn-v3-${{ matrix.ember-version }}-${{ hashFiles('tests/dummy/config/ember-try.js', '__cache-key') }}
80 | restore-keys: |
81 | ci-yarn-${{ hashFiles('yarn.lock') }}
82 |
83 | - name: Install Dependencies
84 | if: steps.cache-npm.outputs.cache-hit != 'true'
85 | run: yarn install --frozen-lockfile
86 |
87 | - name: Run Tests
88 | run: yarn test:ember-compatibility ${{ matrix.ember-version }} --skip-cleanup
89 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/addon/components/ember-table/component.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import { computed } from '@ember/object';
3 | import { htmlSafe } from '@ember/template';
4 | import {
5 | setupTableStickyPolyfill,
6 | teardownTableStickyPolyfill,
7 | } from '../../-private/sticky/table-sticky-polyfill';
8 |
9 | import layout from './template';
10 |
11 | /**
12 | The primary Ember Table component. This component represents the root of the
13 | table, and manages high level state of all of its subcomponents. It does not
14 | have any arguments or actions itself - instead, all of those concerns are
15 | delegated to its children, who communicate to each other via the API.
16 |
17 | ```hbs
18 |
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 |
--------------------------------------------------------------------------------
/addon/-private/utils/reorder-indicators.js:
--------------------------------------------------------------------------------
1 | import { getOuterClientRect, getInnerClientRect } from './element';
2 |
3 | function createElement(mainClass, dimensions) {
4 | let element = document.createElement('div');
5 |
6 | element.classList.add(mainClass);
7 |
8 | for (let key in dimensions) {
9 | element.style[key] = `${dimensions[key]}px`;
10 | }
11 |
12 | return element;
13 | }
14 |
15 | class ReorderIndicator {
16 | constructor(container, scale, element, bounds, mainClass, child) {
17 | this.container = container;
18 | this.element = element;
19 | this.bounds = bounds;
20 | this.child = child;
21 |
22 | let scrollTop = this.container.scrollTop;
23 | let scrollLeft = this.container.scrollLeft;
24 |
25 | let { top: containerTop, left: containerLeft } = getInnerClientRect(this.container, scale);
26 |
27 | let { top: elementTop, left: elementLeft, width: elementWidth } = getOuterClientRect(
28 | this.element
29 | );
30 |
31 | let top = (elementTop - containerTop) * scale + scrollTop;
32 | let left = (elementLeft - containerLeft) * scale + scrollLeft;
33 | let width = elementWidth * scale;
34 |
35 | this.originLeft = left;
36 | this.indicatorElement = createElement(mainClass, { top, left, width });
37 |
38 | if (child) {
39 | this.indicatorElement.appendChild(child);
40 | }
41 |
42 | this.container.appendChild(this.indicatorElement);
43 | this._left = left;
44 | }
45 |
46 | destroy() {
47 | this.container.removeChild(this.indicatorElement);
48 | }
49 |
50 | set width(newWidth) {
51 | this.indicatorElement.style.width = `${newWidth}px`;
52 | }
53 |
54 | get left() {
55 | return this._left;
56 | }
57 |
58 | set left(newLeft) {
59 | let { leftBound, rightBound } = this.bounds;
60 |
61 | let width = this.indicatorElement.offsetWidth;
62 |
63 | if (newLeft < leftBound) {
64 | newLeft = leftBound;
65 | } else if (newLeft + width > rightBound) {
66 | newLeft = rightBound - width;
67 | }
68 |
69 | if (newLeft < this.originLeft) {
70 | this.indicatorElement.classList.remove('et-reorder-direction-right');
71 | this.indicatorElement.classList.add('et-reorder-direction-left');
72 | } else {
73 | this.indicatorElement.classList.remove('et-reorder-direction-left');
74 | this.indicatorElement.classList.add('et-reorder-direction-right');
75 | }
76 |
77 | this.indicatorElement.style.left = `${newLeft}px`;
78 | this._left = newLeft;
79 | }
80 | }
81 |
82 | export class MainIndicator extends ReorderIndicator {
83 | constructor(container, scale, element, bounds) {
84 | let child = element.cloneNode(true);
85 |
86 | super(container, scale, element, bounds, 'et-reorder-main-indicator', child);
87 | }
88 | }
89 |
90 | export class DropIndicator extends ReorderIndicator {
91 | constructor(container, scale, element, bounds) {
92 | super(container, scale, element, bounds, 'et-reorder-drop-indicator');
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/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/styles/app.scss:
--------------------------------------------------------------------------------
1 | @import './tables';
2 | @import './fixes';
3 | @import '@addepar/style-toolbox/onyx/index';
4 |
5 | // Override the url for the checkmark that indicates row selection.
6 | // This overrides a style in style-toolbox that uses the absolute url
7 | // '/@addepar/style-toolbox/assets/images/checkmark.svg'. When addon docs
8 | // are deployed, the root URL is '/ember-table/', and thus the checkmark asset
9 | // is not able to be loaded.
10 | // So instead we override the style and use a checkmark svg that has been added to this project:
11 | // See https://github.com/Addepar/ember-table/issues/593
12 | // The style-toolbox style is here: https://github.com/Addepar/addepar-style-toolbox/blob/640825d7722571c223f4b93e78a5c528018521e5/styles/onyx/elements/inputs/checkbox/_checkbox-core.scss#L68
13 | .ember-table .et-toggle-select input[type='checkbox'] + *:after {
14 | background-image: url('images/checkmark.svg');
15 | }
16 |
17 | $colors: (
18 | navy: #001f3f,
19 | blue: #0074d9,
20 | aqua: #7fdbff,
21 | teal: #39cccc,
22 | olive: #3d9970,
23 | green: #2ecc40,
24 | lime: #01ff70,
25 | yellow: #ffdc00,
26 | orange: #ff851b,
27 | red: #ff4136,
28 | maroon: #85144b,
29 | fuchsia: #f012be,
30 | purple: #b10dc9,
31 | black: #111111,
32 | grey: #aaaaaa,
33 | silver: #dddddd,
34 | );
35 |
36 | @each $color-name, $color-value in $colors {
37 | .bg-#{'' + $color-name} {
38 | background-color: #{$color-value};
39 | color: white;
40 | }
41 | .text-#{'' + $color-name} {
42 | color: #{$color-value};
43 | }
44 | }
45 |
46 | .resize-container {
47 | resize: both;
48 | overflow: scroll;
49 | border: solid 1px #dae1e7;
50 | width: 400px;
51 | height: 200px;
52 | padding: 10px;
53 |
54 | &.w-100 {
55 | width: 100%;
56 | }
57 | }
58 |
59 | .docs-hero {
60 | > div {
61 | padding-top: 2rem;
62 | padding-bottom: 2rem;
63 | }
64 |
65 | h1 {
66 | display: flex;
67 | justify-content: center;
68 | line-height: 1.5;
69 |
70 | > div {
71 | margin: 0;
72 |
73 | > span {
74 | height: 4rem;
75 | }
76 | }
77 | }
78 |
79 | p {
80 | margin-top: 0;
81 | }
82 | }
83 |
84 | tr {
85 | &.has-children {
86 | td {
87 | background-color: #f7f7f7;
88 | }
89 | }
90 |
91 | &.is-row-selected {
92 | td {
93 | background-color: #e5f5ff;
94 | }
95 | }
96 |
97 | td.is-column-selected,
98 | th.is-column-selected {
99 | background-color: #e5f5ff;
100 | border-bottom-color: #d2e2ec;
101 | }
102 |
103 | td.is-cell-selected {
104 | background-color: #b8ddf5;
105 | }
106 | }
107 |
108 | .cell-content {
109 | margin: -4px;
110 | padding: 4px;
111 | height: 30px;
112 | }
113 |
114 | .small {
115 | font-size: small;
116 | }
117 |
118 | .custom-header {
119 | padding: 0.25em;
120 | }
121 |
122 | .spinner {
123 | margin-top: 7px;
124 | width: 50%;
125 | height: 50%;
126 | }
127 |
--------------------------------------------------------------------------------
/tests/integration/components/headers/sort-indicator-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 { SortPage } from 'ember-table/test-support/pages/-private/ember-table-header';
6 |
7 | import { componentModule } from '../../../helpers/module';
8 |
9 | let sort = new SortPage();
10 |
11 | module('Integration | Component | ember-th/sort-indicator', function() {
12 | componentModule('basic', function() {
13 | test('it renders', async function(assert) {
14 | this.set('columnMeta', {
15 | isSorted: true,
16 | });
17 |
18 | await render(hbs`
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 |
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 |
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/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 |
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 |
--------------------------------------------------------------------------------
/addon/components/ember-tr/component.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import { computed } from '@ember/object';
3 | import { readOnly } from '@ember/object/computed';
4 |
5 | import { closest } from '../../-private/utils/element';
6 |
7 | import layout from './template';
8 | import { SELECT_MODE } from '../../-private/collapse-tree';
9 |
10 | /**
11 | The table row component. This component manages row level concerns, and yields
12 | an API object that contains the cell component, the cell/column/row values,
13 | and the cell/column/row meta objects. It is used in both the header and the
14 | body, mirroring the structure of native HTML tables.
15 |
16 | ```hbs
17 | | 42 | Header 43 | | 44 |
|---|
| 50 | Cell 51 | | 52 |
| 58 | Footer 59 | | 60 |