{{#light-table table as |t|}}
{{#t.body multiSelect=true onRowClick=(action 'rowClicked') as |body|}}
{{#body.expanded-row as |row|}}
Hello <b>{{row.firstName}}</b>
{{/body.expanded-row}}
{{#if isLoading}}
{{#body.loader}}
Loading...
{{/body.loader}}
{{/if}}
{{#if table.isEmpty}}
{{#body.no-data}}
No users found.
{{/body.no-data}}
{{/if}}
{{/t.body}}
{{/light-table}}
Properties
- autoHideScrollbar
- canExpand
- canSelect
- currentScrollOffset
- enableScaffolding
- expandOnClick
- extra
- hasReachedTargetScrollOffset
- infinityComponent
- isInViewport
- multiRowExpansion
- multiSelect
- multiSelectRequiresKeyboard
- overwrite
- rowComponent
- scheduleScrolledToBottom
- scrollBuffer
- scrollBufferRows
- scrollTo
- scrollToRow
- selectOnClick
- sharedOptions
- spannedRowComponent
- table
- tableActions
- tableId
- targetScrollOffset
- useVirtualScrollbar
canExpand
BooleanAllows for expanding row. This will create a new row under the row that was
clicked with the template provided by body.expanded-row.
{{#body.expanded-row as |row|}}
This is the content of the expanded row for {{row.firstName}}
{{/body.expanded-row}}
Default: false
canSelect
BooleanAllows a user to select a row on click. All this will do is apply the necessary
CSS classes and add the row to table.selectedRows. If multiSelect is disabled
only one row will be selected at a time.
Default: true
enableScaffolding
BooleanIf true, the body will prepend an invisible <tr> that scaffolds the
widths of the table cells.
ember-light-table uses table-layout: fixed.
This means, that the widths of the columns are defined by the first row
only. By prepending this scaffolding row, widths of columns only need to
be specified once.
Default: false
infinityComponent
Ember.ComponentAllows to customize the component used to render infinite loader
{{#light-table table as |t|}}
{{t.body infinityComponent=(component 'my-infinity')}}
{{/light-table}}
Default: null
multiSelect
BooleanAllows a user to select multiple rows with the ctrl, cmd, and shift keys.
These rows can be easily accessed via table.get('selectedRows')
Default: false
multiSelectRequiresKeyboard
BooleanWhen multiSelect is true, this property determines whether or not ctrl
(or cmd) is required to select additional rows, one by one. When false,
simply clicking on subsequent rows will select or deselect them.
shift to select many consecutive rows is unaffected by this property.
Default: true
overwrite
BooleanIf true, the body block will yield columns and rows, allowing you to define your own table body
Default: false
rowComponent
Ember.ComponentAllows to customize the component used to render rows
{{#light-table table as |t|}}
{{t.body rowComponent=(component 'my-row')}}
{{/light-table}}
Default: null
scheduleScrolledToBottom
Unknownfills the screen with row items until lt-infinity component has exited the viewport
scrollTo
NumberSet this property to scroll to a specific px offset.
This only works when useVirtualScrollbar is true, i.e. when you are
using fixed headers / footers.
Default: null
scrollToRow
RowSet this property to a Row to scroll that Row into view.
This only works when useVirtualScrollbar is true, i.e. when you are
using fixed headers / footers.
Default: null
selectOnClick
BooleanSelect a row on click. If this is set to false and multiSelect is
enabled, using click + shift, cmd, or ctrl will still work as
intended, while clicking on the row will not set the row as selected.
Default: true
spannedRowComponent
Ember.ComponentAllows to customize the component used to render spanned rows
{{#light-table table as |t|}}
{{t.body spannedRowComponent=(component 'my-spanned-row')}}
{{/light-table}}
Default: null