angular/components

Document creating a custom sort-header control

Fechada

#13.177 aberto em 18 de set. de 2018

Ver no GitHubGuia do colaborador
 (1 comentário) (2 reações) (0 responsável)TypeScript (6.650 forks)batch import
P4area: material/sortdocshelp wanted

Métricas do repositório

Stars
 (24.044 estrelas)
Métricas de merge de PR
 (Mesclagem média 3d 12h) (98 fundiu PRs em 30d)

Description

Bug, feature request, or proposal:

Proposal

What is the expected behavior?

Be able to add custom controls to headers along with matSort

image

What is the current behavior?

It is possible to add custom controls e.g.

<ng-container matColumnDef="to">
    <mat-header-cell *matHeaderCellDef>
      <div class="vbox">
        To
        <input [(ngModel)]="filter.to">
      </div>
    </mat-header-cell>
    <mat-cell *matCellDef="let element">{{element.to}}</mat-cell>
  </ng-container>

However this does not work with matSort

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue. StackBlitz starter: https://goo.gl/wwnhMV

What is the use-case or motivation for changing an existing behavior?

I need individual filter controls for each column in the table, all the examples use a single filter field.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

Guia do colaborador

Direção de pesquisa
Review the Angular Material table sorting API (matSort) and existing custom sort header examples. The goal is to produce documentation that guides users on integrating custom controls like input fields into sortable headers. Look at the current table documentation and the source code for mat sort header to understand the interaction. No linked PRs or comments provide additional direction.
Pilha de tecnologia
typescript
Domain
frontend
Tipo Issue
Documentação
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 horas
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Antigo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Principalmente claro
Prerequisites
Angular basicsAngular Material TablematSort usage
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
40