W jednym z poprzednich artykułów pokazywaliśmy w jaki sposób można zaimplementować Angular Material – w tym jak wykorzystać komponent tabeli. W przypadku tej biblioteki podstawowe komponenty często można znacznie rozbudować i nie inaczej jest z tabelami.
Wskazówki
- Tabela nie może być umieszona w bloku ograniczonym warunkiem „*ngIf”. Zamiennie można zastosować chociażby właściwość „hidden”.
Powyżej przedstawiamy dwa analogiczne bloki kodu. Podczas zmiany z „ngIf” na „hidden” należy pamiętać o negacji warunku, gdyż „ngIf” wyświetla element jeśli warunek jest prawdziwy, zaś „hidden” wówczas ten element ukrywa.
2. Nazwy kolumn muszą być takie same jak nazwa właściwości
wyświetlanej w tejże kolumnie.
Powyżej dla zobrazowania przykład. Kolumna nazywa się „rodzajWady”, czyli tak samo jak nazwa właściwości wyświetlanej w tym miejscu.
Sortowanie
Jeśli zastosujemy się do powyższych wskazówek to czas na implementację mechanizmu sortowania.
Pierwszym krokiem jest dodanie elementu „matSort” wewnątrz znacznika otwierającego tabelę.
Drugim i zarazem ostatnim krokiem po stronie HTML jest dodanie elementu „mat-sort-header” wewnątrz znacznika otwierającego nagłówek kolumny.
Po stronie kodu TypeScript musimy dodać zmienne (lub zmodyfikować dotychczasowe) wykorzystywane w procesie sortowania. „MatTableDataSource” to klasa, która w oparciu o użyty interfejs umożliwia zastosowanie m.in. sortowania i paginacji na źródle danych.
Ostatnim krokiem w tym procesie jest deklaracja zmiennej przechowującej dane wyświetlane w tabeli. Do tego celu należy wykorzystać konstruktor kopiujący klasy „MatTableDataSource”.
Jeśli wszystko zostało wykonane poprawnie powinniśmy uzyskać efekt jak powyżej. Po najechaniu kursorem na nagłówek powinna ukazać się strzałka informująca o możliwości sortowania. Kliknięcie spowoduje posortowanie wartości w tabeli według tej kolumny – pierwsze rosnąco, drugie malejąco, trzecie powrót do domyślnej kolejności.
Filtrowanie
Ilość prezentowanych danych często może przytłoczyć. Dlatego mając informację czego szukamy warto wykorzystać filtrowanie.
Do tego celu dodajemy pole tekstowe, w którym wpisanie wartości spowoduje wywołanie odpowiedniej metody filtrującej źródło danych. Można to zrobić np. na zdarzenie „keyup” czyli, gdy w trakcie wpisywania wartości do tego pola, klawisz zostanie podniesiony do góry.
Z parametru przesłanego do metody wyciągamy wartość wpisaną w kontrolce i następnie w oparciu o nią ustawiamy właściwość „filter”. Spowoduje to wyświetlenie w tabeli tylko tych rekordów, które w jednej z właściwości posiadają wpisaną tą wartość.
