/
grouped-header.ts
47 lines (46 loc) · 1.47 KB
/
grouped-header.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import Component from '@glimmer/component';
import { type GroupedHeaderSignature } from '../../../../interfaces/components/models-table/themes/default/grouped-header-signature.interface';
/**
* Table header item used within {@link DefaultTheme.TableHeader | TableHeader}.
*
* Each `grouped-header` should represent one item from {@link Core.ModelsTable.groupedHeaders | ModelsTable.groupedHeaders}.
*
* Usage example:
*
* ```js
* const groupedHeaders = [
* [{title: 'BigTitle', colspan: 5}],
* [{title: 'SubTitle1', colspan: 2}, {title: 'SubTitle2', colspan: 3}]
* ];
* ```
*
* ```html
* <ModelsTable
* @columns={{this.columns}}
* @data={{this.data}} as |MT|>
* <MT.Table as |Table|>
* <Table.Header as |Header|>
* {{#each groupedHeaders as |groupedHeader|}}
* <Header.GroupedHeader @groupedHeader={{groupedHeader}} as |GroupedHeader|>
* {{#each GroupedHeader.groupedHeader as |cell|}}
* <th colspan={{cell.colspan}} rowspan={{cell.rowspan}}>{{cell.title}}</th>
* {{/each}}
* </Header.GroupedHeader>
* {{/each}}
* </Table.Header>
* </MT.Table>
* </ModelsTable>
* ```
*/
export default class GroupedHeader extends Component<GroupedHeaderSignature> {
/**
* @default false
*/
protected get shouldAddExtraColumn(): boolean {
return (
this.args.displayGroupedValueAs === 'column' &&
this.args.useDataGrouping &&
!!this.args.visibleProcessedColumns.length
);
}
}