feat: allow overriding components when extending

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}

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'),

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/'
 });

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/'
 });

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')
 });

addon/templates/components/light-table.hbs

@@ -1,21 +1,21 @@
 {{yield (hash
-  head=(component 'lt-head'
+  head=(component headComponent
     tableId=elementId
     table=table
     tableActions=tableActions
     extra=extra
     tableClassNames=tableClassNames
     sharedOptions=sharedOptions
   )
-  body=(component 'lt-body'
+  body=(component bodyComponent
     tableId=elementId
     table=table
     tableActions=tableActions
     extra=extra
     tableClassNames=tableClassNames
     sharedOptions=sharedOptions
   )
-  foot=(component 'lt-foot'
+  foot=(component footComponent
     tableId=elementId
     table=table
     tableActions=tableActions

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}}
         </tbody>
       </table>
@@ -60,11 +68,12 @@
           rows=rows
           inViewport=(action "inViewport")
           exitViewport=(action "exitViewport")
-          scrollableContent=(concat "#" tableId " .lt-scrollable")}}
+          scrollableContent=(concat "#" tableId " .lt-scrollable")
+        }}
       {{/if}}
 
       <div id={{concat tableId '_inline_foot'}} class="lt-inline lt-foot"></div>
-    {{/lt-scrollable}}
+    {{/component}}
   {{else}}
     <div class="lt-scrollable tse-scrollable vertical-collection">
       <div id="{{concat tableId '_inline_head'}}" class="lt-inline lt-head"></div>
@@ -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}}
         </tbody>
       </table>

addon/templates/components/lt-foot.hbs

@@ -12,7 +12,7 @@
       {{else}}
         <tr>
           {{#each columns as |column|}}
-            {{component (concat 'light-table/columns/' column.type) column
+            {{component (concat columnComponentPath column.type) column
               table=table
               tableActions=tableActions
               extra=extra

addon/templates/components/lt-head.hbs

@@ -18,7 +18,7 @@
 
         <tr>
           {{#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 @@
 
         <tr>
           {{#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"

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