File: addon/components/models-table/table-header.js
import Component from '@ember/component';
import { get } from '@ember/object';
import layout from '../../templates/components/models-table/table-header';
/**
* Table header used within [models-table/table](Components.ModelsTableTable.html).
*
* Component contains grouped headers (if provided) bound from [ModelsTable.groupedHeaders](Components.ModelsTable.html#property_groupedHeaders), row with sorting buttons (usually this row also contains column headers) and row with filter boxes.
*
* Usage example:
*
* ```hbs
* {{#models-table data=data columns=columns as |mt|}}
* {{#mt.table as |table|}}
* {{table.header}}
* {{! ... }}
* {{/mt.table}}
* {{! .... }}
* {{/models-table}}
* ```
*
* Usage with a block context:
*
* ```hbs
* {{#models-table data=data columns=columns as |mt|}}
* {{#mt.table as |table|}}
* {{#table.header as |header|}}
* {{#each header.groupedHeaders as |groupedHeader|}}
* {{header.grouped-header groupedHeader=groupedHeader}}
* {{/each}}
* {{header.row-sorting}}
* {{header.row-filtering}}
* {{/table.header}}
* {{! ... }}
* {{/mt.table}}
* {{! .... }}
* {{/models-table}}
* ```
*
* ModelsTableTableHeader yields references to the following contextual components:
*
* * [models-table/grouped-header](Components.ModelsTableGroupedHeader.html) - component for groupedHeaders. It should be used for each groupedHeaders item
* * [models-table/row-sorting](Components.ModelsTableRowSorting.html) - row with columns titles. Click on every cell will sort table data by selected column
* * [models-table/row-filtering](Components.ModelsTableRowFiltering.html) - row with filter items. Every cell contains input or select-box
*
* Check own docs for each component to get detailed info.
*
* @namespace Components
* @class ModelsTableTableHeader
* @extends Ember.Component
*/
export default Component.extend({
layout,
tagName: 'thead',
classNameBindings: ['noHeaderFilteringAndSorting:table-header-no-filtering-and-sorting', 'themeInstance.thead'],
/**
* Bound from {{#crossLink "Components.ModelsTable/noHeaderFilteringAndSorting:property"}}ModelsTable.noHeaderFilteringAndSorting{{/crossLink}}
*
* @property noHeaderFilteringAndSorting
* @type boolean
* @default null
*/
noHeaderFilteringAndSorting: null,
/**
* Bound from {{#crossLink "Components.ModelsTable/groupedHeaders:property"}}ModelsTable.groupedHeaders{{/crossLink}}
*
* @property groupedHeaders
* @type groupedHeader[][]
* @default null
*/
groupedHeaders: null,
/**
* Bound from {{#crossLink "Components.ModelsTable/visibleProcessedColumns:property"}}ModelsTable.visibleProcessedColumns{{/crossLink}}
*
* @property visibleProcessedColumns
* @type ModelsTableColumn[]
* @default null
*/
visibleProcessedColumns: null,
/**
* Bound from {{#crossLink "Components.ModelsTable/processedColumns:property"}}ModelsTable.processedColumns{{/crossLink}}
*
* @property processedColumns
* @type ModelsTableColumn[]
* @default null
*/
processedColumns: null,
/**
* Bound from {{#crossLink "Components.ModelsTable/useFilteringByColumns:property"}}ModelsTable.useFilteringByColumns{{/crossLink}}
*
* @property useFilteringByColumns
* @type boolean
* @default null
*/
useFilteringByColumns: null,
/**
* Bound from {{#crossLink "Components.ModelsTable/themeInstance:property"}}ModelsTable.themeInstance{{/crossLink}}
*
* @property themeInstance
* @type object
* @default null
*/
themeInstance: null,
/**
* Bound from {{#crossLink "Components.ModelsTable/useDataGrouping:property"}}ModelsTable.useDataGrouping{{/crossLink}}
*
* @property useDataGrouping
* @type boolean
* @default null
*/
useDataGrouping: null,
/**
* Bound from {{#crossLink "Components.ModelsTable/displayGroupedValueAs:property"}}ModelsTable.displayGroupedValueAs{{/crossLink}}
*
* @property displayGroupedValueAs
* @type string
* @default null
*/
displayGroupedValueAs: null,
/**
* Bound from {{#crossLink "Components.ModelsTable/currentGroupingPropertyName:property"}}ModelsTable.currentGroupingPropertyName{{/crossLink}}
*
* @property currentGroupingPropertyName
* @type string
* @default null
*/
currentGroupingPropertyName: null,
/**
* Bound from {{#crossLink "Components.ModelsTable/groupHeaderCellComponent:property"}}ModelsTable.groupHeaderCellComponent{{/crossLink}}
*
* @property groupHeaderCellComponent
* @type object
* @default null
*/
groupHeaderCellComponent: null,
/**
* Closure action {{#crossLink "Components.ModelsTable/actions.sort:method"}}ModelsTable.actions.sort{{/crossLink}}
*
* @event sort
*/
sort: null,
/**
* Closure action {{#crossLink "Components.ModelsTable/actions.sendAction:method"}}ModelsTable.actions.sendAction{{/crossLink}}
*
* @event sendAction
*/
sendAction: null,
/**
* Closure action {{#crossLink "Components.ModelsTable/actions.expandRow:method"}}ModelsTable.actions.expandRow{{/crossLink}}
*
* @event expandRow
*/
expandRow: null,
/**
* Closure action {{#crossLink "Components.ModelsTable/actions.collapseRow:method"}}ModelsTable.actions.collapseRow{{/crossLink}}
*
* @event collapseRow
*/
collapseRow: null,
/**
* Closure action {{#crossLink "Components.ModelsTable/actions.expandAllRows:method"}}ModelsTable.actions.expandAllRows{{/crossLink}}
*
* @event expandAllRows
*/
expandAllRows: null,
/**
* Closure action {{#crossLink "Components.ModelsTable/actions.collapseAllRows:method"}}ModelsTable.actions.collapseAllRows{{/crossLink}}
*
* @event collapseAllRows
*/
collapseAllRows: null,
/**
* Closure action {{#crossLink "Components.ModelsTable/actions.toggleAllSelection:method"}}ModelsTable.actions.toggleAllSelection{{/crossLink}}
*
* @event toggleAllSelection
*/
toggleAllSelection: null,
/**
* Bound from {{#crossLink "Components.ModelsTable/expandedItems:property"}}ModelsTable.data{{/crossLink}}
*
* @property data
* @default null
* @type object[]
*/
data: null,
actions: {
sort(column) {
get(this, 'sort')(column);
}
}
});