Skip to content

Commit 1d0809a

Browse files
WHeirstrateWHeirstrate
authored
feat(ngx-table): add an optional context row to the table (#446)
1 parent 7a01782 commit 1d0809a

File tree

18 files changed

+475
-51
lines changed

18 files changed

+475
-51
lines changed

‎apps/docs/src/app/pages/docs/angular/table/implementation/context-row/demos/context-row-one/context-row-one.demo.component.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<ngx-table
2+
[data]="[
3+
{ name: 'World', firstName: 'Hello', active: true },
4+
{ name: 'Tools', firstName: 'NGX', active: false },
5+
]"
6+
[columns]="['name', 'firstName']"
7+
[contextRowKeys]="['active']"
8+
>
9+
<ng-template #contextRowTmpl let-row>
10+
{{ row | json }}
11+
</ng-template>
12+
</ngx-table>

‎apps/docs/src/app/pages/docs/angular/table/implementation/context-row/demos/context-row-one/context-row-one.demo.component.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { CommonModule } from '@angular/common';
2+
import { Component } from '@angular/core';
3+
import { NgxTable } from '@ngx/table';
4+
5+
@Component({
6+
imports: [CommonModule, NgxTable],
7+
selector: 'context-row-one-demo',
8+
templateUrl: './context-row-one.demo.component.html',
9+
})
10+
export class ContextRowOneDemoComponent {}

‎apps/docs/src/app/pages/docs/angular/table/implementation/context-row/demos/context-row-three/context-row-three.demo.component.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<ngx-table
2+
[data]="[
3+
{ name: 'World', firstName: 'Hello', favorite: true, favoriteSince: '2023-01-01' },
4+
{ name: 'Tools', firstName: 'NGX', favorite: false },
5+
{ name: 'Angular', firstName: 'Framework', favorite: true, favoriteSince: '2022-05-15' },
6+
]"
7+
[columns]="['name', 'firstName']"
8+
[contextRowKeys]="['favorite']"
9+
>
10+
<ng-template #contextRowTmpl let-row> Favorite since {{ row.favoriteSince }} </ng-template>
11+
<ng-template #detailRowTmpl let-row> {{ row | json }} </ng-template>
12+
</ngx-table>

‎apps/docs/src/app/pages/docs/angular/table/implementation/context-row/demos/context-row-three/context-row-three.demo.component.scss‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
$fav-border: 1px solid gold;
2+
3+
::ng-deep {
4+
.ngx-table {
5+
border: none !important;
6+
}
7+
.cdk-header-row * {
8+
border: none !important;
9+
text-align: left;
10+
text-transform: capitalize;
11+
}
12+
13+
.ngx-table-row-cell {
14+
border: none !important;
15+
}
16+
17+
.ngx-table-detail-cell {
18+
background-color: rgb(250, 250, 250);
19+
border: none !important;
20+
}
21+
22+
.ngx-table-context-key--favorite {
23+
background-color: rgb(255, 247, 199);
24+
25+
> * {
26+
padding: 3px 10px !important;
27+
border: $fav-border !important;
28+
border-bottom: none !important;
29+
font-style: italic;
30+
font-size: 0.8em;
31+
32+
&::before {
33+
content: '★';
34+
color: darkgoldenrod;
35+
margin-right: 5px;
36+
}
37+
}
38+
39+
+ .ngx-table-row {
40+
.ngx-table-row-cell {
41+
border-bottom: $fav-border !important;
42+
43+
&:first-child {
44+
border-left: $fav-border !important;
45+
}
46+
47+
&:last-child {
48+
border-right: $fav-border !important;
49+
}
50+
}
51+
52+
&:has(+ .ngx-table-detail-row-open) {
53+
.ngx-table-row-cell {
54+
border-bottom: none !important;
55+
}
56+
}
57+
58+
+ .ngx-table-detail-row-open {
59+
.ngx-table-detail-cell {
60+
border-left: $fav-border !important;
61+
border-right: $fav-border !important;
62+
border-bottom: $fav-border !important;
63+
}
64+
}
65+
}
66+
}
67+
}

‎apps/docs/src/app/pages/docs/angular/table/implementation/context-row/demos/context-row-three/context-row-three.demo.component.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { CommonModule } from '@angular/common';
2+
import { Component } from '@angular/core';
3+
import { NgxTable } from '@ngx/table';
4+
5+
@Component({
6+
imports: [CommonModule, NgxTable],
7+
selector: 'context-row-three-demo',
8+
templateUrl: './context-row-three.demo.component.html',
9+
styleUrl: './context-row-three.demo.component.scss',
10+
})
11+
export class ContextRowThreeDemoComponent {}

‎apps/docs/src/app/pages/docs/angular/table/implementation/context-row/demos/context-row-two/context-row-two.demo.component.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<ngx-table
2+
[data]="[
3+
{ name: 'World', firstName: 'Hello', active: true },
4+
{ name: 'Tools', firstName: 'NGX', active: false },
5+
]"
6+
[columns]="['name', 'firstName']"
7+
[contextRowKeys]="['name', 'active']"
8+
>
9+
<ng-template #contextRowTmpl let-row>
10+
{{ row | json }}
11+
</ng-template>
12+
</ngx-table>

‎apps/docs/src/app/pages/docs/angular/table/implementation/context-row/demos/context-row-two/context-row-two.demo.component.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { CommonModule } from '@angular/common';
2+
import { Component } from '@angular/core';
3+
import { NgxTable } from '@ngx/table';
4+
5+
@Component({
6+
imports: [CommonModule, NgxTable],
7+
selector: 'context-row-two-demo',
8+
templateUrl: './context-row-two.demo.component.html',
9+
})
10+
export class ContextRowTwoDemoComponent {}

‎apps/docs/src/app/pages/docs/angular/table/implementation/context-row/demos/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export * from './context-row-one/context-row-one.demo.component';
2+
export * from './context-row-two/context-row-two.demo.component';
3+
export * from './context-row-three/context-row-three.demo.component';

‎apps/docs/src/app/pages/docs/angular/table/implementation/context-row/index.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
keyword: ContextRowPage
3+
---
4+
5+
`ngx-table` provides a built-in way to add context rows to your table rows. This can be done by providing the `#contextRowTmpl` template as a `ContentChild` of the `NgxTable`.
6+
7+
## Example use case
8+
9+
Since the use of this component is not easily described, below is an example of when a context row could be useful. Let's say you want to visualize if and when a certain data entry has been favorited, the context row can be useful.
10+
_Continue reading below for the (property) explanation._
11+
12+
{{ NgDocActions.demo("ContextRowThreeDemoComponent") }}
13+
14+
## Explanation
15+
16+
> **Note:** It is very important to be aware that this row does as its name suggests: it allows for additional context. It should not be used to add or define data of the row itself. This context row always has the `role="none"` aria tag. This means any and all content defined in this row gets excluded from the accessibility tree. Elements that are defined within this row that have a tabindex greater than or equal to 0 (and are therefor focusable) _are_ included in the accessibility tree. This means that you may include buttons and links inside this row. For more information and what not to define in this context row, please visit the official ARIA docs: https://w3c.github.io/aria/#none.
17+
18+
Once a context row is provided, the row does not automatically become visible. We need to use an Input to handle the behavior of the table. By defining the `contextRowKeys` input to a non-empty array, the attributes of the `data` are checked for a possible match. If at least one key of the data the row consists of matches a value of the `contextRowKeys`, that row will get a context row. If no key matches, the row will still get a context row, but the class will be `ngx-context-row`. This is the same way that detail views are rendered when they are not expanded.
19+
20+
From the moment that the `#contextRowTmpl` has been defined, every main row will get a corresponding context row. It is set to `display: none` as long as it is empty, and it shall remain empty as long as the above condition is not met. Be cautious of applying styles to the `ngx-context-row` class.
21+
22+
{{ NgDocActions.demo("ContextRowOneDemoComponent") }}
23+
24+
Be cautious of applying styles to the `ngx-context-row` class, since hidden context rows also have this class. You can modify how all visible context rows look by applying styles to the `ngx-table-context-row-open` class. In the above example, only one key was provided to the table via the `contextRowKeys`. This resulted in the row with the `active: true` to also be assigned the `ngx-table-context-key--active` modifier class.
25+
26+
In the example below, the `name` key of the data also gets taken into account. This results in more than one modifier to be applied to the context row that also has the `active` property set to `true`. The order in which the classes are applied to the element, is the same order in which the array values are provided to the `contextRowKeys` input.
27+
28+
Note the classes in the example below using the DevTools. The first row should get the following classes (aside from the by-Angular-injected classes):
29+
30+
1. `cdk-row`
31+
1. `ngx-table-context-row`
32+
1. `ngx-table-context-row-open`
33+
1. `ngx-table-row-first`
34+
1. `ngx-table-context-key--name`
35+
1. `ngx-table-context-key--active`
36+
37+
{{ NgDocActions.demo("ContextRowTwoDemoComponent") }}

‎apps/docs/src/app/pages/docs/angular/table/implementation/context-row/ng-doc.page.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { NgDocPage } from '@ng-doc/core';
2+
import { TableImplementationCategory } from '../../../../../../categories/angular';
3+
import {
4+
ContextRowOneDemoComponent,
5+
ContextRowTwoDemoComponent,
6+
ContextRowThreeDemoComponent,
7+
} from './demos';
8+
9+
const ContextRowPage: NgDocPage = {
10+
title: `Context row`,
11+
mdFile: './index.md',
12+
category: TableImplementationCategory,
13+
order: 1,
14+
demos: { ContextRowOneDemoComponent, ContextRowTwoDemoComponent, ContextRowThreeDemoComponent },
15+
};
16+
17+
export default ContextRowPage;

0 commit comments

Comments
 (0)