{{#light-table table as |t|}}
{{t.head onColumnClick=(action 'sortByColumn')}}
{{/light-table}}
If you want to define your own thead, just declare the contextual component in a block.
{{#light-table table as |t|}}
{{#t.head onColumnClick=(action 'sortByColumn') as |groups subColumns|}}
{{#each groups as |group|}}
{{!-- ... --}}
{{/each}}
{{/t.head}}
{{/light-table}}
If you dont have grouped columns, the yielded groups
will be an array of all visibile columns and subColumns
will be empty
Properties
dragColumnGroup
Array
Array of Columns indicating where the column can be potentially dragged.
If the column is part of a group (has a parent column), this will be all of the columns in that group,
otherwise it's all of the columns in the table.
iconAscending
String
See
iconSortable
. CSS classes to apply to <i class="lt-sort-icon"></i>
when the column is sorted ascending.
Default: ''
iconComponent
String
Custom sorting component name to use instead of the default
<i class="lt-sort-icon"></i>
template.
See iconSortable
, iconAsending
, or iconDescending
.
Default: false
iconDescending
String
See
iconSortable
. CSS classes to apply to <i class="lt-sort-icon"></i>
when the column is sorted descending.
Default: ''
iconSortable
String
CSS classes to be applied to an
<i class="lt-sort-icon"></i>
tag that is
inserted into the column's <th>
element when the column is sortable but
not yet sorted.
For instance, if you have installed ember-font-awesome
or include the
font-awesome
assets manually (e.g. via a CDN), you can set
iconSortable
to 'fa fa-sort'
, which would yield this markup:
<i class="lt-sort-icon fa fa-sort"></i>
Default: ''
resizeOnDrag
Boolean
Resize all cells in the column instead of just the header / footer
Default: false