@triptyk/ember-yeti-table 3.0.0 → 3.0.1

package/dist/components/yeti-table.js

@@ -4,19 +4,19 @@ import { scheduleOnce, later, schedule } from '@ember/runloop';
 import { isPresent, isEmpty } from '@ember/utils';
 import Component from '@glimmer/component';
 import { cached, tracked } from '@glimmer/tracking';
+import Helper from '@ember/component/helper';
 import merge from 'deepmerge';
 import { use } from 'ember-resources';
 import { trackedFunction } from 'reactiveweb/function';
 import { keepLatest } from 'reactiveweb/keep-latest';
 import { localCopy, dedupeTracked } from 'tracked-toolbox';
-import DEFAULT_THEME from '../themes/default-theme.js';
+import { hash } from '@ember/helper';
+import defaultTheme from '../themes/default-theme.js';
 import filterData from '../utils/filtering-utils.js';
 import { sortMultiple, compareValues, mergeSort } from '../utils/sorting-utils.js';
-import Helper from '@ember/component/helper';
-import { hash } from '@ember/helper';
 import Table from './yeti-table/table.js';
 import Header from './yeti-table/header.js';
-import THead from './yeti-table/thead.js';
+import THeadComponent from './yeti-table/thead.js';
 import Body from './yeti-table/body.js';
 import TBody from './yeti-table/tbody.js';
 import TFoot from './yeti-table/tfoot.js';
@@ -27,16 +27,13 @@ import { g, i, n } from 'decorator-transforms/runtime-esm';
 
 const TASK_CANCELATION_NAME = 'TaskCancelation';
 const didCancel = function (e) {
-  return e && e.name === TASK_CANCELATION_NAME;
+  return !!e && e.name === TASK_CANCELATION_NAME;
 };
-const getConfigWithDefault = function (key, defaultValue) {
+function getConfigWithDefault(key, defaultValue) {
   return function () {
     return this.config[key] ?? defaultValue;
   };
-};
-// we keep `totalRows` updated manually in xwaan untracked property
-// to allow the user to update it in a loadData call and avoid
-// a re-run of the main tracked function
+}
 class UpdateTotalRows extends Helper {
   compute(positional, {
     context
@@ -47,9 +44,6 @@ class UpdateTotalRows extends Helper {
     return '';
   }
 }
-// we need some control of how we update the filter property, hence this modifier
-// in this case, any falsy value will be considered as en empty string, which will then
-// be deduped.
 class UpdateFilter extends Helper {
   compute(positional, {
     context
@@ -59,94 +53,27 @@ class UpdateFilter extends Helper {
   }
 }
 class ProcessedData extends Helper {
-  compute(positional, {
+  compute(_positional, {
     loadData,
     context
   }) {
-    let data = context.latestData ?? [];
+    const data = context.latestData ?? [];
     if (!loadData) {
       context.processData(data);
     } else {
-      // This is instrumental to ignoreDataChanges working
       context.processedData = data;
     }
     return '';
   }
 }
 class YetiTable extends Component {
-  static {
-    setComponentTemplate(precompileTemplate("{{#let (hash table=(component Table theme=this.mergedTheme parent=this) header=(component Header columns=this.columns onColumnClick=this.onColumnSort sortable=this.sortable sortSequence=this.sortSequence parent=this theme=this.mergedTheme) thead=(component THead columns=this.columns onColumnClick=this.onColumnSort sortable=this.sortable sortSequence=this.sortSequence theme=this.mergedTheme parent=this) body=(component Body data=this.processedData columns=this.columns theme=this.mergedTheme parent=this) tbody=(component TBody data=this.processedData columns=this.columns theme=this.mergedTheme parent=this) tfoot=(component TFoot columns=this.columns theme=this.mergedTheme parent=this) pagination=(component Pagination disabled=this.isLoading theme=this.mergedTheme paginationData=this.paginationData paginationActions=(hash previousPage=this.previousPage nextPage=this.nextPage goToPage=this.goToPage changePageSize=this.changePageSize)) actions=this.publicApi paginationData=this.paginationData isLoading=this.resolvedData.isPending columns=this.columns visibleColumns=this.visibleColumns rows=this.normalizedRows totalRows=this.normalizedTotalRows visibleRows=this.processedData theme=this.mergedTheme) as |api|}}\n  {{UpdateTotalRows @totalRows context=this}}\n  {{UpdateFilter @filter context=this}}\n  {{ProcessedData loadData=@loadData context=this}}\n\n  {{#if this.renderTableElement}}\n    <Table @theme={{this.mergedTheme}} @parent={{this}} ...attributes>\n      {{yield api}}\n    </Table>\n  {{else}}\n    {{yield api}}\n  {{/if}}\n\n{{/let}}", {
-      strictMode: true,
-      scope: () => ({
-        hash,
-        Table,
-        Header,
-        THead,
-        Body,
-        TBody,
-        TFoot,
-        Pagination,
-        UpdateTotalRows,
-        UpdateFilter,
-        ProcessedData
-      })
-    }), this);
-  }
-  /**
-  * An object that contains classes for yeti table to apply when rendering its various table
-  * html elements. The theme object your pass in will be deeply merged with yeti-table's default theme
-  * and with a theme defined in your environment.js at `ENV['ember-yeti-table'].theme`.
-  *
-  * @argument theme
-  * @type {Object}
-  */ /**
-     * The data for Yeti Table to render. It can be an array or a promise that resolves with an array.
-     * The only case when `@data` is optional is if a `@loadData` was passed in.
-     * @argument data
-     * @type {Array | Promise<Array>}
-     */ /**
-        * The function that will be called when Yeti Table needs data. This argument is used
-        * when you don't have all the data available or loading all rows at once isn't possible,
-        * e.g the dataset is too large.
-        *
-        * By passing in a function to `@loadData` you assume the responsibility to filter, sort and
-        * paginate the data (if said features are enabled).
-        *
-        * This function must return an array or a promise that resolves with an array.
-        *
-        * This function will be called with an argument with the current state of the table.
-        * Use this object to know what data to fetch, pass it to the server, etc.
-        * Please check the "Async Data" guide to understand what that object contains and
-        * an example of its usage.
-        *
-        * @argument loadData
-        * @type {Function}
-        */
   publicApi = {
-    previousPage: this.previousPage,
-    nextPage: this.nextPage,
-    goToPage: this.goToPage,
-    changePageSize: this.changePageSize,
-    reloadData: this.reloadData
+    previousPage: () => this.previousPage(),
+    nextPage: () => this.nextPage(),
+    goToPage: n => this.goToPage(n),
+    changePageSize: n => this.changePageSize(n),
+    reloadData: () => this.reloadData()
   };
-  /**
-  * This function will be called when Yeti Table initializes. It will be called with
-  * an object argument containing the functions for the possible actions you can make
-  * on a table. This object contains the following actions:
-  *   - previousPage
-  *   - nextPage
-  *   - goToPage
-  *   - changePageSize
-  *   - reloadData
-  *
-  * @argument registerApi
-  * @type {Function}
-  */ /**
-     * Use this argument to enable the pagination feature. Default is `false`.
-     *
-     * @argument pagination
-     * @type {Boolean}
-     */
   static {
     g(this.prototype, "pagination", [localCopy('args.pagination', getConfigWithDefault('pagination', false))]);
   }
@@ -155,49 +82,11 @@ class YetiTable extends Component {
     g(this.prototype, "pageSize", [localCopy('args.pageSize', getConfigWithDefault('pageSize', 15))]);
   }
   #pageSize = (i(this, "pageSize"), void 0);
-  /**
-  * Controls the size of each page. Default is `15`.
-  *
-  * @argument pageSize
-  * @type {number}
-  */
   static {
     g(this.prototype, "pageNumber", [localCopy('args.pageNumber', 1)]);
   }
   #pageNumber = (i(this, "pageNumber"), void 0);
-  /**
-  * Controls the current page to show. Default is `1`.
-  *
-  * @argument pageNumber
-  * @type {number}
-  */
-  /**
-  * Optional argument that informs yeti table of how many rows your data has.
-  * Only needed when using a `@loadData` function and `@pagination={{true}}`.
-  * When you use `@data`, Yeti Table uses the size of that array.
-  * This information is used to calculate the pagination information that is yielded
-  * and passed to the `@loadData` function.
-  *
-  * @argument totalRows
-  * @type {number}
-  */
   totalRows;
-  // we keep `totalRows` updated manually in an untracked property
-  // to allow the user to update it in a loadData call and avoid
-  // a re-run of the main tracked function
-  // @action
-  // updateTotalRows(totalRows) {
-  //   this.totalRows = totalRows;
-  //   notifyPropertyChange(this, 'normalizedTotalRows');
-  //   notifyPropertyChange(this, 'paginationData');
-  // }
-  /**
-  * The global filter. If passed in, Yeti Table will search all the rows that contain this
-  * string and show them. Defaults to `''`.
-  *
-  * @argument filter
-  * @type {String}
-  */
   static {
     g(this.prototype, "filter", [dedupeTracked], function () {
       return '';
@@ -207,120 +96,31 @@ class YetiTable extends Component {
   static {
     g(this.prototype, "sortable", [localCopy('args.sortable', getConfigWithDefault('sortable', true))]);
   }
-  #sortable = (i(this, "sortable"), void 0); // we need some control of how we update the filter property, hence this modifier
-  // in this case, any falsy value will be considered as en empty string, which will then
-  // be deduped.
-  // @action
-  // updateFilter(filter) {
-  //   this.filter = filter || '';
-  // }
-  /**
-  * An optional function to customize the filtering logic. This function should return true
-  * or false to either include or exclude the row on the resulting set. If this function depends
-  * on a value, pass that value as the `@filterUsing` argument.
-  *
-  * This function will be called with two arguments:
-  * - `row` - the current data row to use for filtering
-  * - `filterUsing` - the value you passed in as `@filterUsing`
-  *
-  * @argument filterFunction
-  * @type {Function}
-  */
-  /**
-  * If you `@filterFunction` function depends on a different value (other that `@filter`)
-  * to show, pass it in this argument. Yeti Table uses this argument to know when to recalculate
-  * the fitlered rows.
-  *
-  * @argument filterUsing
-  * @type {Object}
-  */
-  /**
-  * Used to enable/disable sorting on all columns. You should use this to avoid passing
-  * the @sortable argument to all columns. Defaults to `true`.
-  *
-  * @argument sortable
-  * @type {Boolean}
-  */
+  #sortable = (i(this, "sortable"), void 0);
   static {
     g(this.prototype, "sortFunction", [localCopy('args.sortFunction', () => sortMultiple)]);
   }
   #sortFunction = (i(this, "sortFunction"), void 0);
-  /**
-  * Use the `@sortFunction` if you want to completely customize how the row sorting is done.
-  * It will be invoked with two rows, the current sortings that are applied and the `@compareFunction`.
-  *
-  * @argument sortFunction
-  * @type {Function}
-  */
   static {
     g(this.prototype, "compareFunction", [localCopy('args.compareFunction', () => compareValues)]);
   }
   #compareFunction = (i(this, "compareFunction"), void 0);
-  /**
-  * Use `@compareFunction` if you just want to customize how two values relate to each other (not the entire row).
-  * It will be invoked with two values and you just need to return `-1`, `0` or `1` depending on if first value is
-  * greater than the second or not. The default compare function used is the `compare` function from `@ember/utils`.
-  *
-  * @argument compareFunction
-  * @type {Function}
-  */
   static {
     g(this.prototype, "sortSequence", [localCopy('args.sortSequence', getConfigWithDefault('sortSequence', ['asc', 'desc']))]);
   }
   #sortSequence = (i(this, "sortSequence"), void 0);
-  /**
-  * Use `@sortSequence` to customize the sequence in which the sorting order will cycle when
-  * clicking on the table headers. You can either pass in a comma-separated string or an array
-  * of strings. Accepted values are `'asc'`, `'desc'` and `'unsorted'`. The default value is `['asc', 'desc']`.
-  *
-  * @argument sortSequence
-  * @type {Array<string> | string}
-  */
   static {
     g(this.prototype, "ignoreDataChanges", [localCopy('args.ignoreDataChanges', getConfigWithDefault('ignoreDataChanges', false))]);
   }
   #ignoreDataChanges = (i(this, "ignoreDataChanges"), void 0);
-  /**
-  * Use `@ignoreDataChanges` to prevent yeti table from observing changes to the underlying data and resorting or
-  * refiltering. Useful when doing inline editing in a table.
-  *
-  * Defaults to `false`.
-  *
-  * This is an initial render only value. Changing it after the table has been rendered will not be respected.
-  *
-  * @argument ignoreDataChanges
-  * @type {boolean}
-  */
   static {
     g(this.prototype, "renderTableElement", [localCopy('args.renderTableElement', true)]);
   }
   #renderTableElement = (i(this, "renderTableElement"), void 0);
-  /**
-  * Use `@renderTableElement` to prevent yeti table from rendering the topmost <table> element.
-  * Might be useful for styling purposes (e.g if you want to place your pagination controls outside
-  * of your table element). If you set this to `false`, you should render the table element yourself
-  * using the yielded `<t.table>` component.
-  *
-  * Defaults to `true`.
-  *
-  * @argument renderTableElement
-  * @type {boolean}
-  */
-  /**
-  * The `@isColumnVisible` argument can be used to initialize the column visibility in a programmatic way.
-  * For example, let's say you store the initial column visibility in local storage, then you can
-  * use this function to initialize the `visible` column of the specific column. The given function should
-  * return a boolean which will be assigned to the `visible` property of the column. An object representing
-  * the column is passed in. Sou can use column.prop and column.name to know which column your computed
-  * the visibility for.
-  *
-  * @argument isColumnVisible
-  * @type {Function}
-  */ // If the theme is replaced, this will invalidate, but not if any prop under theme is changed
   get mergedTheme() {
-    let configTheme = this.config.theme || {};
-    let localTheme = this.args.theme || {};
-    return merge.all([DEFAULT_THEME, configTheme, localTheme]);
+    const configTheme = this.config.theme || {};
+    const localTheme = this.args.theme || {};
+    return merge.all([defaultTheme, configTheme, localTheme]);
   }
   static {
     n(this.prototype, "mergedTheme", [cached]);
@@ -331,43 +131,38 @@ class YetiTable extends Component {
   static {
     n(this.prototype, "visibleColumns", [cached]);
   }
-  config = getOwner(this).resolveRegistration('config:environment')['ember-yeti-table'] || {};
+  config = getOwner(this)?.resolveRegistration?.('config:environment')?.['ember-yeti-table'] || {};
   get normalizedTotalRows() {
     if (!this.args.loadData) {
-      // sync scenario using @data
       return this.processedDataRows?.length || 0;
     } else {
-      // async scenario. @loadData is present.
       if (this.totalRows === undefined) {
-        // @totalRows was not passed in. Use the latest returned data set length as a fallback
         return this.previousResolvedData.length || 0;
       } else {
-        // @totalRows was passed in.
         return this.totalRows;
       }
     }
   }
   get normalizedRows() {
     if (!this.args.loadData) {
-      // sync scenario using @data
       return this.processedDataRows;
     } else {
-      // async scenario. @loadData is present.
       return this.processedData;
     }
   }
   get paginationData() {
-    let pageSize = this.pageSize;
+    const pageSize = this.pageSize;
     let pageNumber = this.pageNumber;
-    let totalRows = this.normalizedTotalRows;
-    let isLastPage, totalPages;
+    const totalRows = this.normalizedTotalRows;
+    let isLastPage;
+    let totalPages;
     if (totalRows) {
       totalPages = Math.ceil(totalRows / pageSize);
       pageNumber = Math.min(pageNumber, totalPages);
       isLastPage = pageNumber === totalPages;
     }
-    let isFirstPage = pageNumber === 1;
-    let pageStart = (pageNumber - 1) * pageSize + 1;
+    const isFirstPage = pageNumber === 1;
+    const pageStart = (pageNumber - 1) * pageSize + 1;
     let pageEnd = pageStart + pageSize - 1;
     if (totalRows) {
       pageEnd = Math.min(pageEnd, totalRows);
@@ -389,44 +184,39 @@ class YetiTable extends Component {
     });
   }
   #columns = (i(this, "columns"), void 0);
-  constructor(owner, args) {
-    super(...arguments);
-    console.log(owner, args);
-    if (typeof this.args.registerApi === 'function') {
-      // eslint-disable-next-line ember/no-runloop
-      scheduleOnce('actions', null, this.args.registerApi, this.publicApi);
-    }
-  }
   previousResolvedData = [];
+  static {
+    g(this.prototype, "processedData", [tracked]);
+  }
+  #processedData = (i(this, "processedData"), void 0);
+  static {
+    g(this.prototype, "processedDataRows", [tracked]);
+  }
+  #processedDataRows = (i(this, "processedDataRows"), void 0);
   resolvedData = trackedFunction(this, async () => {
     let data = this.args.data;
     if (this.columns.length == 0) {
       return [];
     }
-    // call loadData if exists
     if (typeof this.args.loadData === 'function') {
-      let params = this.computeLoadDataParams();
+      const params = this.computeLoadDataParams();
       try {
-        console.log("loadData", params);
         data = await this.args.loadData(params);
-        console.log("loadData end");
       } catch (e) {
         console.log(e);
         if (!didCancel(e)) {
-          // re-throw the non-cancellation error
           throw e;
         }
       }
-    } else if (data?.then) {
-      // resolve the data promise (either from the @loadData call or @data)
+    } else if (data && typeof data.then === 'function') {
       data = await data;
     }
     if (this.isDestroyed) {
       return;
     }
-    data = data || [];
-    this.previousResolvedData = data;
-    return data;
+    const resolved = data || [];
+    this.previousResolvedData = resolved;
+    return resolved;
   });
   static {
     g(this.prototype, "latestData", [use], function () {
@@ -437,44 +227,39 @@ class YetiTable extends Component {
     });
   }
   #latestData = (i(this, "latestData"), void 0);
-  static {
-    g(this.prototype, "processedData", [tracked]);
-  }
-  #processedData = (i(this, "processedData"), void 0);
-  static {
-    g(this.prototype, "processedDataRows", [tracked]);
+  constructor(owner, args) {
+    super(owner, args);
+    if (typeof this.args.registerApi === 'function') {
+      // eslint-disable-next-line ember/no-runloop
+      scheduleOnce('actions', null, this.args.registerApi, this.publicApi);
+    }
   }
-  #processedDataRows = (i(this, "processedDataRows"), void 0);
   processData(data) {
-    // only columns that have filterable = true and a prop defined will be considered
-    let columns = this.columns.filter(c => c.filterable && isPresent(c.prop));
-    let sortableColumns = this.columns.filter(c => !isEmpty(c.sort));
-    let sortings = sortableColumns.map(c => ({
+    const columns = this.columns.filter(c => c.filterable && isPresent(c.prop));
+    const sortableColumns = this.columns.filter(c => !isEmpty(c.sort));
+    const sortings = sortableColumns.map(c => ({
       prop: c.prop,
       direction: c.sort
     }));
-    let filterFunction = this.args.filterFunction;
-    let filterUsing = this.args.filterUsing;
-    let filter = this.filter;
-    let processTheData = () => {
-      // filter the data
-      data = filterData(data, columns, filter, filterFunction, filterUsing);
-      // Sort the data
+    const filterFunction = this.args.filterFunction;
+    const filterUsing = this.args.filterUsing;
+    const filter = this.filter;
+    const processTheData = () => {
+      let working = filterData(data, columns, filter, filterFunction, filterUsing);
       if (sortings.length > 0) {
-        data = mergeSort(data, (itemA, itemB) => {
+        working = mergeSort(working, (itemA, itemB) => {
           return this.sortFunction(itemA, itemB, sortings, this.compareFunction);
         });
       }
-      this.processedDataRows = data;
-      // Paginate the Data
+      this.processedDataRows = working;
       if (this.pagination) {
-        let {
+        const {
           pageStart,
           pageEnd
         } = this.paginationData;
-        data = data.slice(pageStart - 1, pageEnd); // slice excludes last element so we don't need to subtract 1
+        working = working.slice(pageStart - 1, pageEnd);
       }
-      this.processedData = data;
+      this.processedData = working;
     };
     if (this.ignoreDataChanges) {
       // eslint-disable-next-line ember/no-runloop
@@ -484,32 +269,33 @@ class YetiTable extends Component {
     }
   }
   computeLoadDataParams() {
-    let params = {};
+    const params = {
+      sortData: this.columns.filter(c => !isEmpty(c.sort)).map(c => ({
+        prop: c.prop,
+        direction: c.sort
+      })),
+      filterData: {
+        filter: this.filter,
+        filterUsing: this.args.filterUsing,
+        columnFilters: this.columns.map(c => ({
+          prop: c.prop,
+          filter: c.filter,
+          filterUsing: c.filterUsing
+        }))
+      }
+    };
     if (this.pagination) {
       params.paginationData = this.paginationData;
     }
-    params.sortData = this.columns.filter(c => !isEmpty(c.sort)).map(c => ({
-      prop: c.prop,
-      direction: c.sort
-    }));
-    params.filterData = {
-      filter: this.filter,
-      filterUsing: this.args.filterUsing,
-      columnFilters: this.columns.map(c => ({
-        prop: c.prop,
-        filter: c.filter,
-        filterUsing: c.filterUsing
-      }))
-    };
     return params;
   }
   paginateData(data) {
     if (this.pagination) {
-      let {
+      const {
         pageStart,
         pageEnd
       } = this.paginationData;
-      data = data.slice(pageStart - 1, pageEnd); // slice excludes last element so we don't need to subtract 1
+      data = data.slice(pageStart - 1, pageEnd);
     }
     return data;
   }
@@ -521,30 +307,22 @@ class YetiTable extends Component {
   }
   onColumnSort(column, e) {
     if (column.isSorted) {
-      // if this column is already sorted, calculate the next
-      // sorting on the sequence.
       let direction = column.sort;
-      let sortSequence = column.normalizedSortSequence;
+      const sortSequence = column.normalizedSortSequence;
       direction = sortSequence[(sortSequence.indexOf(direction) + 1) % sortSequence.length];
       if (direction === 'unsorted') {
         direction = null;
       }
       column.sort = direction;
       if (!e.shiftKey) {
-        // if not pressed shift, reset other column sorting
-        let columns = this.columns.filter(c => c !== column);
+        const columns = this.columns.filter(c => c !== column);
         columns.forEach(c => c.sort = null);
       }
     } else {
-      // use first direction from sort sequence
-      let direction = column.normalizedSortSequence[0];
-      // create new sorting
+      const direction = column.normalizedSortSequence[0];
       column.sort = direction;
-      // normal click replaces all sortings with the new one
-      // shift click adds a new sorting to the existing ones
       if (!e.shiftKey) {
-        // if not pressed shift, reset other column sortings
-        let columns = this.columns.filter(c => c !== column);
+        const columns = this.columns.filter(c => c !== column);
         columns.forEach(c => c.sort = null);
       }
     }
@@ -562,7 +340,7 @@ class YetiTable extends Component {
   }
   nextPage() {
     if (this.pagination) {
-      let {
+      const {
         isLastPage
       } = this.paginationData;
       if (!isLastPage) {
@@ -575,7 +353,7 @@ class YetiTable extends Component {
   }
   goToPage(pageNumber) {
     if (this.pagination) {
-      let {
+      const {
         totalPages
       } = this.paginationData;
       pageNumber = Math.max(pageNumber, 1);
@@ -590,7 +368,7 @@ class YetiTable extends Component {
   }
   changePageSize(pageSize) {
     if (this.pagination) {
-      this.pageSize = parseInt(pageSize);
+      this.pageSize = parseInt(String(pageSize));
     }
   }
   static {
@@ -612,6 +390,24 @@ class YetiTable extends Component {
       this.columns = this.columns.filter(c => c !== column);
     }
   }
+  static {
+    setComponentTemplate(precompileTemplate("{{#let (hash table=(component Table theme=this.mergedTheme parent=this) header=(component HeaderComponent columns=this.columns onColumnClick=this.onColumnSort sortable=this.sortable sortSequence=this.sortSequence parent=this theme=this.mergedTheme) thead=(component THead columns=this.columns onColumnClick=this.onColumnSort sortable=this.sortable sortSequence=this.sortSequence theme=this.mergedTheme parent=this) body=(component Body data=this.processedData columns=this.columns theme=this.mergedTheme parent=this) tbody=(component TBody data=this.processedData columns=this.columns theme=this.mergedTheme parent=this) tfoot=(component TFoot columns=this.columns theme=this.mergedTheme parent=this) pagination=(component Pagination disabled=this.resolvedData.isPending theme=this.mergedTheme paginationData=this.paginationData paginationActions=(hash previousPage=this.previousPage nextPage=this.nextPage goToPage=this.goToPage changePageSize=this.changePageSize)) actions=this.publicApi paginationData=this.paginationData isLoading=this.resolvedData.isPending columns=this.columns visibleColumns=this.visibleColumns rows=this.normalizedRows totalRows=this.normalizedTotalRows visibleRows=this.processedData theme=this.mergedTheme) as |api|}}\n  {{UpdateTotalRows @totalRows context=this}}\n  {{UpdateFilter @filter context=this}}\n  {{ProcessedData loadData=@loadData context=this}}\n\n  {{#if this.renderTableElement}}\n    <Table @theme={{this.mergedTheme}} @parent={{this}} ...attributes>\n      {{yield api}}\n    </Table>\n  {{else}}\n    {{yield api}}\n  {{/if}}\n\n{{/let}}", {
+      strictMode: true,
+      scope: () => ({
+        hash,
+        Table,
+        HeaderComponent: Header,
+        THead: THeadComponent,
+        Body,
+        TBody,
+        TFoot,
+        Pagination,
+        UpdateTotalRows,
+        UpdateFilter,
+        ProcessedData
+      })
+    }), this);
+  }
 }
 
 export { YetiTable as default };