light-table Class

A hash to determine the number of columns to show per given breakpoint. If this is specified, it will override any column specific breakpoints.

If we have the following breakpoints defined in app/breakpoints.js:

• mobile
• tablet
• desktop

The following hash can be passed in:

{
   mobile: 2,
   tablet: 4
  }
  

If there is no rule specified for a given breakpoint (i.e. desktop), all columns will be shown.

Estimated size of a row. Used in vertical-collection to determine roughly the number of rows exist out of the viewport.

Object to store any arbitrary configuration meant to be used by custom components.

{{#light-table table
    extra=(hash
      highlightColor="yellow"
     )
     as |t|
   }}
    {{t.head}}
    {{t.body}}
    {{t.foot}}
  {{/light-table}}
  

Now in all custom components, you can access this value like so:

<span style="background: {{extra.highlightColor}}">{{value}}<span>
  

Table height.

Toggles occlusion rendering functionality. Currently experimental. If set to true, you must set t.body/estimatedRowHeight:property to something other than the default value.

Enable responsive behavior

This is used to propagate custom user defined actions to custom cell and header components. As an example, lets say I have a table with a column defined with cellComponent: 'delete-user'

{{#light-table table tableActions=(hash
    deleteUser=(action 'deleteUser')
   ) as |t|}}
    {{t.head}}
    {{t.body}}
    {{t.foot}}
  {{/light-table}}
  

Now in the delete-user component, we can access that deleteUser action and pass it the row object which will bubble all the way to where you defined that action.

<button {{action tableActions.deleteUser row}}>Delete Me</button>
  

Class names that will be added to all

Default: ''