Skip to content

feat: allow overriding components when extending#709

Open
lougreenwood wants to merge 2 commits intoadopted-ember-addons:masterfrom
lougreenwood:components
Open

feat: allow overriding components when extending#709
lougreenwood wants to merge 2 commits intoadopted-ember-addons:masterfrom
lougreenwood:components

Conversation

@lougreenwood
Copy link

@lougreenwood lougreenwood commented Jul 19, 2019

This PR allows end users of the add-on to override the components which are used to assemble a table.

Our use case for this is a situation where we have our own in-house sc-table component which extends ember-light-table. However, we need to apply additional styling to the sub-components used by ember-light-table using ember-css-modules.

For example, by overriding the components, we can create our own private-lt-head component, and override the headComponent value in light-table.js:

sc-light-table.js (our private table component which overrides ember-light-table

import LightTable from 'ember-light-table/components/light-table'
import styles from 'styles/components/sc-light-table'
import { classNames } from '@ember-decorators/component'

@classNames(styles['sc-light-table'])
export default class ScLightTableComponent extends LightTable {
  /**
   * @property headComponent
   * @type {String}
   * @private
   */
  headComponent = 'sc-light-table/head'

  /**
   * @property bodyComponent
   * @type {String}
   * @private
   */
  bodyComponent = 'sc-light-table/body'

  /**
   * @property footComponent
   * @type {String}
   * @private
   */
  footComponent = 'sc-light-table/foot'
}

Usage is then as simple as: <ScTable ... /> and we get ember-light-table with custom sub-components.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant