Browse Source

Add ExtensibleTableRowDetailComponent to module and docs

Registered ExtensibleTableRowDetailComponent in ExtensibleModule and updated documentation to reference the new row detail feature. Also improved accessibility and semantics by replacing the expand/collapse anchor with a button in the extensible table component template.
pull/24636/head
Fahri Gedik 5 months ago
parent
commit
c81124d2dc
  1. 1
      docs/en/framework/ui/angular/data-table-column-extensions.md
  2. 4
      npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
  3. 4
      npm/ng-packs/packages/components/extensible/src/lib/extensible.module.ts

1
docs/en/framework/ui/angular/data-table-column-extensions.md

@ -342,4 +342,5 @@ export const identityEntityPropContributors = {
## See Also
- [Extensible Table Row Detail](extensible-table-row-detail.md)
- [Customizing Application Modules Guide](../../architecture/modularity/extending/customizing-application-modules-guide.md)

4
npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html

@ -15,10 +15,10 @@
<ngx-datatable-column [width]="50" [resizeable]="false" [sortable]="false" [draggable]="false"
[canAutoResize]="false">
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
<a href="javascript:void(0)" class="text-decoration-none text-muted"
<button type="button" class="btn btn-link text-decoration-none text-muted p-0"
[attr.aria-label]="expanded ? 'Collapse' : 'Expand'" (click)="toggleExpandRow(row)">
<i class="fa" [class.fa-chevron-down]="!expanded" [class.fa-chevron-up]="expanded"></i>
</a>
</button>
</ng-template>
</ngx-datatable-column>
}

4
npm/ng-packs/packages/components/extensible/src/lib/extensible.module.ts

@ -13,6 +13,7 @@ import {
ExtensibleFormComponent,
ExtensibleFormPropComponent,
ExtensibleTableComponent,
ExtensibleTableRowDetailComponent,
GridActionsComponent,
PageToolbarComponent,
ExtensibleDateTimePickerComponent,
@ -32,6 +33,7 @@ const importWithExport = [
CreateInjectorPipe,
ExtensibleFormComponent,
ExtensibleTableComponent,
ExtensibleTableRowDetailComponent,
ExtensibleFormMultiselectComponent,
];
@ -50,4 +52,4 @@ const importWithExport = [
],
exports: [...importWithExport],
})
export class ExtensibleModule {}
export class ExtensibleModule { }

Loading…
Cancel
Save