diff --git a/addon/components/light-table.js b/addon/components/light-table.js index 742db9fb..869405a8 100644 --- a/addon/components/light-table.js +++ b/addon/components/light-table.js @@ -43,6 +43,10 @@ const LightTable = Component.extend({ media: service(), scrollbarThickness: service(), + headComponent: 'lt-head', + bodyComponent: 'lt-body', + footComponent: 'lt-foot', + /** * @property table * @type {Table} diff --git a/addon/components/lt-body.js b/addon/components/lt-body.js index 1765d90d..7c6c0ece 100644 --- a/addon/components/lt-body.js +++ b/addon/components/lt-body.js @@ -284,6 +284,8 @@ export default Component.extend({ */ rowComponent: null, + defaultRowComponent: 'lt-row', + /** * Allows to customize the component used to render spanned rows * @@ -298,6 +300,8 @@ export default Component.extend({ */ spannedRowComponent: null, + defaultSpannedRowComponent: 'lt-spanned-row', + /** * Allows to customize the component used to render infinite loader * @@ -312,6 +316,10 @@ export default Component.extend({ */ infinityComponent: null, + defaultInfinityComponent: 'lt-infinity', + + scrollableComponent: 'lt-scrollable', + rows: computed.readOnly('table.visibleRows'), columns: computed.readOnly('table.visibleColumns'), colspan: computed.readOnly('columns.length'), diff --git a/addon/components/lt-foot.js b/addon/components/lt-foot.js index 81edbd8f..d560f515 100644 --- a/addon/components/lt-foot.js +++ b/addon/components/lt-foot.js @@ -35,5 +35,6 @@ export default Component.extend(TableHeaderMixin, { classNames: ['lt-foot-wrap'], table: null, sharedOptions: null, - sharedOptionsFixedKey: 'fixedFooter' + sharedOptionsFixedKey: 'fixedFooter', + columnComponentPath: 'light-table/columns/' }); diff --git a/addon/components/lt-head.js b/addon/components/lt-head.js index 5b36f8cc..1f6fe294 100644 --- a/addon/components/lt-head.js +++ b/addon/components/lt-head.js @@ -37,5 +37,6 @@ export default Component.extend(TableHeaderMixin, { classNames: ['lt-head-wrap'], table: null, sharedOptions: null, - sharedOptionsFixedKey: 'fixedHeader' + sharedOptionsFixedKey: 'fixedHeader', + columnComponentPath: 'light-table/columns/' }); diff --git a/addon/components/lt-row.js b/addon/components/lt-row.js index 2558b99b..1b3877c3 100644 --- a/addon/components/lt-row.js +++ b/addon/components/lt-row.js @@ -17,6 +17,8 @@ const Row = Component.extend({ canSelect: false, colspan: 1, + cellComponentPath: 'light-table/cells/', + isSelected: computed.readOnly('row.selected'), isExpanded: computed.readOnly('row.expanded') }); diff --git a/addon/templates/components/light-table.hbs b/addon/templates/components/light-table.hbs index 3b3e82bb..8aac8fc4 100644 --- a/addon/templates/components/light-table.hbs +++ b/addon/templates/components/light-table.hbs @@ -1,5 +1,5 @@ {{yield (hash - head=(component 'lt-head' + head=(component headComponent tableId=elementId table=table tableActions=tableActions @@ -7,7 +7,7 @@ tableClassNames=tableClassNames sharedOptions=sharedOptions ) - body=(component 'lt-body' + body=(component bodyComponent tableId=elementId table=table tableActions=tableActions @@ -15,7 +15,7 @@ tableClassNames=tableClassNames sharedOptions=sharedOptions ) - foot=(component 'lt-foot' + foot=(component footComponent tableId=elementId table=table tableActions=tableActions diff --git a/addon/templates/components/lt-body.hbs b/addon/templates/components/lt-body.hbs index 19ba51f7..45ab5939 100644 --- a/addon/templates/components/lt-body.hbs +++ b/addon/templates/components/lt-body.hbs @@ -1,11 +1,12 @@ -{{#with (hash - row=(or rowComponent (component 'lt-row')) - spanned-row=(or spannedRowComponent (component 'lt-spanned-row')) - infinity=(or infinityComponent (component 'lt-infinity')) - ) as |lt| +{{#with + (hash + row=(or rowComponent (component defaultRowComponent)) + spanned-row=(or spannedRowComponent (component defaultSpannedRowComponent)) + infinity=(or infinityComponent (component defaultInfinityComponent)) + ) as |lt| }} {{#unless sharedOptions.occlusion}} - {{#lt-scrollable + {{#component scrollableComponent tagName='' virtualScrollbar=useVirtualScrollbar autoHide=autoHideScrollbar @@ -29,28 +30,35 @@ {{else}} {{#each rows as |row|}} {{lt.row row columns - data-row-id=row.rowId - table=table - tableActions=tableActions - extra=extra - enableScaffolding=enableScaffolding - canExpand=canExpand - canSelect=canSelect - click=(action 'onRowClick' row) - doubleClick=(action 'onRowDoubleClick' row)}} + data-row-id=row.rowId + table=table + tableActions=tableActions + extra=extra + enableScaffolding=enableScaffolding + canExpand=canExpand + canSelect=canSelect + click=(action 'onRowClick' row) + doubleClick=(action 'onRowDoubleClick' row) + }} - {{yield (hash - expanded-row=(component lt.spanned-row classes='lt-expanded-row' colspan=colspan yield=row visible=row.expanded) - loader=(component lt.spanned-row visible=false) - no-data=(component lt.spanned-row visible=false) - ) rows}} + {{yield + (hash + expanded-row=(component lt.spanned-row classes='lt-expanded-row' colspan=colspan yield=row visible=row.expanded) + loader=(component lt.spanned-row visible=false) + no-data=(component lt.spanned-row visible=false) + ) + rows + }} {{/each}} - {{yield (hash - loader=(component lt.spanned-row classes='lt-is-loading' colspan=colspan) - no-data=(component lt.spanned-row classes='lt-no-data' colspan=colspan) - expanded-row=(component lt.spanned-row visible=false) - ) rows}} + {{yield + (hash + loader=(component lt.spanned-row classes='lt-is-loading' colspan=colspan) + no-data=(component lt.spanned-row classes='lt-no-data' colspan=colspan) + expanded-row=(component lt.spanned-row visible=false) + ) + rows + }} {{/if}} @@ -60,11 +68,12 @@ rows=rows inViewport=(action "inViewport") exitViewport=(action "exitViewport") - scrollableContent=(concat "#" tableId " .lt-scrollable")}} + scrollableContent=(concat "#" tableId " .lt-scrollable") + }} {{/if}}
- {{/lt-scrollable}} + {{/component}} {{else}}
@@ -75,34 +84,38 @@ {{yield columns rows}} {{else}} {{#vertical-collection - rows - tagName='vertical-collection' - estimateHeight=sharedOptions.estimatedRowHeight - shouldRecycle=sharedOptions.shouldRecycle - bufferSize=scrollBufferRows - containerSelector='.lt-scrollable' - firstVisibleChanged=(action 'firstVisibleChanged') - lastVisibleChanged=(action 'lastVisibleChanged') - firstReached=(action 'firstReached') - lastReached=(action 'lastReached') - as |row index| + rows + tagName='vertical-collection' + estimateHeight=sharedOptions.estimatedRowHeight + shouldRecycle=sharedOptions.shouldRecycle + bufferSize=scrollBufferRows + containerSelector='.lt-scrollable' + firstVisibleChanged=(action 'firstVisibleChanged') + lastVisibleChanged=(action 'lastVisibleChanged') + firstReached=(action 'firstReached') + lastReached=(action 'lastReached') + as |row index| }} {{lt.row row columns - data-row-id=row.rowId - table=table - tableActions=tableActions - extra=extra - enableScaffolding=enableScaffolding - canExpand=canExpand - canSelect=canSelect - click=(action 'onRowClick' row) - doubleClick=(action 'onRowDoubleClick' row)}} + data-row-id=row.rowId + table=table + tableActions=tableActions + extra=extra + enableScaffolding=enableScaffolding + canExpand=canExpand + canSelect=canSelect + click=(action 'onRowClick' row) + doubleClick=(action 'onRowDoubleClick' row) + }} {{/vertical-collection}} - {{yield (hash - loader=(component lt.spanned-row classes='lt-is-loading') - no-data=(component lt.spanned-row classes='lt-no-data') - expanded-row=(component lt.spanned-row visible=false) - ) rows}} + {{yield + (hash + loader=(component lt.spanned-row classes='lt-is-loading') + no-data=(component lt.spanned-row classes='lt-no-data') + expanded-row=(component lt.spanned-row visible=false) + ) + rows + }} {{/if}} diff --git a/addon/templates/components/lt-foot.hbs b/addon/templates/components/lt-foot.hbs index cd37def4..c97ce892 100644 --- a/addon/templates/components/lt-foot.hbs +++ b/addon/templates/components/lt-foot.hbs @@ -12,7 +12,7 @@ {{else}} {{#each columns as |column|}} - {{component (concat 'light-table/columns/' column.type) column + {{component (concat columnComponentPath column.type) column table=table tableActions=tableActions extra=extra diff --git a/addon/templates/components/lt-head.hbs b/addon/templates/components/lt-head.hbs index 33e72973..4c6c5366 100644 --- a/addon/templates/components/lt-head.hbs +++ b/addon/templates/components/lt-head.hbs @@ -18,7 +18,7 @@ {{#each columnGroups as |column|}} - {{component (concat 'light-table/columns/' column.type) column + {{component (concat columnComponentPath column.type) column table=table tableActions=tableActions extra=extra @@ -34,7 +34,7 @@ {{#each subColumns as |column|}} - {{component (concat 'light-table/columns/' column.type) column + {{component (concat columnComponentPath column.type) column table=table rowspan=1 classNames="lt-sub-column" diff --git a/addon/templates/components/lt-row.hbs b/addon/templates/components/lt-row.hbs index f437205a..cdff282c 100644 --- a/addon/templates/components/lt-row.hbs +++ b/addon/templates/components/lt-row.hbs @@ -1,5 +1,5 @@ {{#each columns as |column|}} - {{component (concat 'light-table/cells/' column.cellType) column row + {{component (concat cellComponentPath column.cellType) column row table=table rawValue=(get row column.valuePath) tableActions=tableActions