Next.js 13 w Praktyce: Komponent tabelki z danymi
Projekt aplikacji SaaS
8 godz. 8 min · Next.js · Full-stack i Programowanie
Daniel NoworytaFull stack DeveloperCzego się nauczysz
- Pełne zrozumienie architektury i możliwości frameworka Next.js
- Zdolność tworzenia bezpiecznej autoryzacji i autentykacji z Clerk
- Efektywne zarządzanie danymi za pomocą Prismy i PostgreSQL na DigitalOcean
- Umiejętność budowania intuicyjnej nawigacji za pomocą routingu Next.js
- Umiejętność wdrożenia aplikacji na Vercel
- Dogłębne zrozumienie zarządzania stanem i wykorzystywania server actions
Autoryzacja i autentykacja z Clerk
Naucz się tworzyć bezpieczne systemy uwierzytelniania i autoryzacji, korzystając z Clerk. Pokażę Ci, jak to robić krok po kroku, aby Twoje aplikacje były bezpieczne i profesjonalne.
Integracja z bazą danych za pomocą Prismy
Zrozumiesz, jak skutecznie i bezboleśnie połączyć swoją aplikację Next.js z bazą danych PostgreSQL na DigitalOcean. Pokażę Ci, jak używać Prismy, aby ułatwić ten proces.
Routing i nawigacja
Dowiesz się, jak zarządzać routingiem i nawigacją w swojej aplikacji, aby użytkownicy mogli łatwo i intuicyjnie poruszać się po Twojej stronie.
Deployment na Vercel
Pokażę Ci, jak z łatwością wdrożyć swoją aplikację na Vercel, jednym z najpopularniejszych środowisk hostingowych dla aplikacji Next.js.
Zarządzanie stanem i server actions
Nauczysz się zarządzać stanem aplikacji i jak wykorzystać server actions w praktyce, co pozwoli Ci na tworzenie bardziej zaawansowanych i dynamicznych funkcji.
Dla kogo jest ten kurs?
Ten kurs jest dla osób, które już mają pewne doświadczenie z JavaScript i chcą zgłębić swoje zrozumienie Next.js. Zakładamy, że znasz podstawy TypeScript, TailwindCSS, ale nie potrzebujesz doświadczenia z Next.js - wszystko wyjaśnię Ci od podstaw!
Kolejnym elementem wartym
naszego skupienia będzie tabela z danymi, które mamy tutaj.
Myślę, że tutaj musimy sobie odpowiedzieć na kilka pytań, które są bardzo ważne,
związane z budowaniem takich elementów na stronie internetowej.
Generalnie rzecz biorąc widzimy tutaj, że jest jakiś infinite scroll, prawdopodobnie
zastosowany, bo jest tutaj element, który nie jest do końca pokazany, czyli
prawdopodobnie tabelka ma być skalowalna w dół.
W tym miejscu
jeżeli tabelka ma być skalowalna, to prawdopodobnie też możemy przyjąć, że ten
helper tutaj powinien zostawać na swoim miejscu.
Spróbujemy sobie na razie statycznie
zakodować te tabele i zobaczymy sobie później jak możemy sobie to eksportować
jako komponent, który przyda nam się tutaj w następnych naszych widokach.
Bo jeżeli chodzi o widok subskrypcji też widzi, że mamy listę subskrypcji tutaj,
która też wygląda tak naprawdę bliźniaczo podobnie do tej tabeli.
Tutaj zmieniają się tylko dane, które wyświetlamy kolumny.
Jeżeli chodzi o tą główną część tutaj, to
też jest bardzo bliźniaczo podobna do tego, co już sobie zbudowaliśmy.
Tak naprawdę tutaj także te komponenty,
które już mieliśmy okazję budować, tu prawdopodobnie będziemy mogli sobie
wykorzystać bardzo łatwo również na tym widoku.
Dlatego myślę, że zaczniemy od statycznego
budowania tej tabeli, a potem przejdziemy przez taki Bristol i zobaczymy jak by
można było taką tabelę po prostu sobie wyeksportować do osobnego komponentu, tak
żeby można było to używać już w następnym kolejnym widoku.
Dobrze, przejdźmy teraz do kodu.
Mamy tutaj miejsce na naszą tabelę.
Jeżeli chodzi o to, tutaj jest właśnie ten
diff tutaj i zaczniemy sobie kodowanie naszego widoku.
Tak, ja sobie tutaj to zmniejszę na prawą stronę.
Nasze tabela powinna być widoczna właśnie tutaj.
No i przejdźmy najpierw do stworzenia jakiegoś wrapper,
w którym będziemy mogli sobie osadzić tą naszą tabelkę.
Natomiast zanim to jeszcze potrzebujemy
height dwójkę, która powie nam, że to jest coming payment.
No i tutaj w tym przypadku potrzebujemy
zastosować class name i nasze klasy to będzie text align i font semi bold.
Tak naprawdę to co wykorzystujemy w naszych, w naszych tutaj teraz możemy
zrobić też z dużej litery, tak jak to jest.
Dobrze, mamy ten coming payment.
Jeżeli chodzi o to, to wszystko jest w porządku.
Teraz sobie zrobimy wrapper na naszą tabelę, czyli div i tutaj class name.
Chcemy to troszeczkę odsunąć od góry i chcemy ustawić od razu sobie relative.
Prawdopodobnie będziemy musieli znowu
absolutnie pozycjonować naszą tabelę tutaj, żeby móc
wyjść poza ten padding tutaj z naszą tabelą, bo zobacz, że w firmie też
tutaj ta linia tabeli jest tak naprawdę wychodzi do samego końca tego kontenera.
Dlatego prawdopodobnie będziemy musieli
tutaj zastosować tę samą sztuczkę czyli Relative.
Jeżeli chodzi o margin top to 2
i ustawimy sobie, żeby ten element jednak urósł na całą naszą wysokość.
Dobrze.
Kolejny element, który będziemy potrzebować.
No to już sam wrapper na naszą tabelę, czyli klasę.
I tutaj pozycja absolute.
Musimy rozciągnąć to tak naprawdę na
całą wielkość tego rapera, który mamy obecnie tutaj w tym miejscu.
Czyli musimy zacząć od bottom 0.
Kolejne left right 0 i top też możemy sobie ustawić na 0.
Jeżeli chodzi o margin na x to musimy też zastosować tą samą
sztuczkę, którą stosowaliśmy przed chwilą w naszych kategoriach.
Mianowicie przesunąć to na o 6 pikseli w lewo o wartość 24 piksele w lewą stronę.
Jeżeli chodzi o wysokość to chcemy ustawić na full.
Chcemy, żeby to była po prostu pełna
wysokość naszego kontenera, który jest relatywnie tutaj pozycjonowany.
Jeżeli chodzi o overflow x to ustawimy sobie to na auto na.
Jeżeli chodzi o overflow to też ustawimy na auto.
I myślę, że to tyle.
Teraz możemy przejść do naszej tabelki
i zaczniemy oscylować, bo i klas name tutaj potrzebujemy minimum na full.
Zapiszemy sobie już nasze wartości
i przejdziemy teraz do I, czyli określenia tego, jakie będziemy mieli
tutaj wartości jeżeli chodzi o nasze kolumny.
Zaczynamy standardowo od R i tu w środku TH.
I tak pierwszą kolumną to będzie name dla nas.
Kolejną kolumną.
Będzie kategoria.
Kolejną kolumną będziemy mieli tutaj billing.
J. Billing.
J.
Kolejna kolumna dla nas to będzie next payment.
Zapiszemy to sobie wszystko.
Kolejna kolumna, którą będziemy potrzebowali, to na pewno będzie koszt.
I myślę, że to na
czyli nam kategorie Billing, Experiment i Cost to jest
to tyle co potrzebujemy tak naprawdę na chwilę obecną.
Sprawdźmy sobie tutaj nasz komponent czy on jakoś wygląda.
No jeszcze nic nie mamy, nie mamy żadnych danych w naszej tabeli.
Czyli teraz musimy sobie przejść do
tak naprawdę Etihad zamykamy, przechodzimy do ciała naszej tabelki.
No i tutaj już możemy sobie utorować po danych.
Data.
Map.
Tutaj mamy subskrypcję
i tutaj jako return musimy zwrócić nasz komponent TR, czyli Return TR.
Jako kij wykorzystamy ID.
Myślę, że jest to jak najbardziej pożądane.
Sprawdźmy sobie typ czy mamy tutaj mamy
typ, czyli możemy sobie spokojnie tutaj wykorzystać jako wartość.
Nasze idee i jako wartości w środku tutaj. No to mamy.
Musimy sobie otworzyć nasze tiry. Tak?
I pierwsza wartość to będzie name.
Druga wartość to będzie kategorie.
Mamy literówkę.
Możemy ją zamienić od razu.
Trzecia wartość, która będzie to będzie subskrypcją.
Eksperyment.
Czy mamy tu jeszcze mamy billing?
Przed tym?
No i czwartą, ostatnią będzie next payment.
Jeszcze koszt na końcu, czyli tutaj potrzebujemy next payment.
Eksperyment Zobaczymy teraz.
Z tego względu, że to jest ta data, musimy sobie to sformatować za pomocą
funkcji Format, czyli format i to jest date FMS.
I tutaj jako format string, czyli w jaki
sposób chcemy to jest wyświetlane chcemy mm, dd i przecinek rok, rok, rok Tak.
Zapiszemy tą wartość.
I kolejna rzecz tutaj potrzebujemy tak naprawdę.
Tak, dobrze zapiszemy te dane i sprawdźmy czy coś nam się da.
Póki co nie mamy jeszcze nic zaznaczone, nie mamy żadnych danych, czyli
musimy sobie sprawdzić, czy nasze style są odpowiednio zaimplementowane.
No i widzę, że tutaj w naszym głównym w
Operze brakuje nam flex size flex cal, czyli Flex i Flex call.
Zapiszemy to sobie.
No i już nasza tabelka pokazała się naszym oczom.
Teraz musimy sobie przejść do
implementowania styli na poszczególne rzeczy.
Czyli najpierw myślę zajmiemy się.
Tak naprawdę
tabelka zostaje, natomiast musimy zająć się poszczególnymi tutaj nagłówkami,
czyli przejdźmy do nagłówka numer 1 i class Name.
I teraz tak na pewno będziemy
potrzebowali, żeby te nagłówki zostawały tutaj u góry.
Jeżeli będziemy z kreowali sobie większą
ilość naszej subskrypcji, zrobimy sobie później test na to.
Jeżeli użytkownik będzie miał 100 120 tyś subskrypcji, żeby ten scroll bar pojawiał
się tutaj, żebyśmy mogli te dane w miarę dobrze odczytywać, żeby ten header zawsze
był widoczny, no to potrzebujemy tutaj właściwości stricte.
Czyli to musi zostać tak na górze
u góry top 0 ustawimy sobie jeżeli chodzi o border.
To ustawimy sobie ten border na bottom
i border ring i wartość niech to będzie 300.
Jeżeli chodzi o BG to też ustawimy sobie na 50.
Bedzie. Opacity ustawimy na 75.
Jest to związane z takim fajnym efektem,
który za chwilkę Ci pokaże jak będziemy sobie trollować tą tabelkę.
To rzeczy które będą wchodziły za HDR będą tak fajnie się rozwiązywało dzięki temu
filtrem, które sobie za chwilkę nałożymy na to pole.
Także kolejna rzecz którą potrzebujemy po
BGE to padding na y na 2 i padding na L ustawimy sobie 6.
W tym przypadku padding na r ustawimy na 3.
I tekst po lewej stronie.
Oprócz tego tekstu stawiamy na S.M. i Font normal.
Nie musimy tego w sumie dodawać.
Tak naprawdę tekst Nothing 400.
I kolejne ostatnie opcje, które są
niezbędne właśnie do tego efektu Blur, czyli back drop, blur i drop filtr.
Zapiszemy sobie to style i już mamy tutaj
nasz name odpowiednio wystylizowane tak jak byśmy chcieli.
Jeszcze jest jedna rzecz, czyli na pewno font mi nie odpowiada.
Tutaj powinien być font light.
Możemy sobie ustawić od razu.
No już to wygląda dużo lepiej.
Przejdźmy teraz do konstruowania drugiego elementu.
Tutaj sobie możemy tak naprawdę skopiować wszystkie te style.
Przejdźmy do naszej kategorii Class name.
Kopiujemy.
Sprawdźmy jak to wygląda.
Ta kategoria jest za bardzo odsunięta, jednak z lewej strony
przez to, że na pierwszy element musieliśmy sobie nadać extra padding left
z tego względu, że to jest pierwszy element naszej tabeli.
Dlatego musimy przesunąć sobie tą nazwę.
Natomiast tutaj już ten padding left jest nam niepotrzebny tak naprawdę.
Dlatego możemy sobie swobodnie tutaj to usunąć.
Kategoria padding right też możemy usunąć, jest to niepotrzebne.
Myślę, że jak najbardziej to wystarczy.
Kolejny element też możemy sobie
analogicznie tak naprawdę wystylizować kopiując i wklejając te style.
Mamy billing period
Jeżeli chodzi o nasz next payment też możemy sobie przekopiować i wkleić.
Natomiast jeżeli chodzi o nasz kod to to jest ostatnia tutaj rzecz naszej tabeli.
Dlatego też musimy na pewno ustalić na PR 6 padding na right 6.
Zapiszemy to sobie i usunęliśmy 6 by mieć te same odstępy co po tej samej stronie.
Natomiast tutaj na pewno będzie tekst Write.
Chcemy ten tekst jednak po prawej stronie
Sprawdźmy sobie na całą resztę tych wszystkich wartości.
Generalnie tutaj teksty mogą być po lewej stronie.
Nie ma żadnego problemu, wygląda to dobrze.
Będziemy musieli tu oczywiście teraz zadbać o odpowiednie wyświetlanie się tych
danych, natomiast tym zajmiemy się za chwilkę.
Jeszcze jedna rzecz.
Myślę, że warto.
Chciałbym Ci pokazać jedną rzecz tutaj, tzn.
pokażę Ci status kiedy będzie więcej subskrybcji.
Zobaczymy w jaki sposób to teraz wygląda.
Kopiujemy te elementy i zrobimy, że będzie ich dużo więcej.
Zobacz.
Jeżeli zaczniemy królować no to ten header tutaj zostaje nam u samej góry.
Sama tabelka nie rozrasta się jakoś specjalnie.
Wszystko jest na swoim miejscu, także właśnie o to mi chodziło z tym efektem
background block, żebyśmy mieli taki fajny efekt przechodzenia jeżeli chodzi o
skalowanie tych elementów, które wchodzą pod spód tego tutaj pod spodem.
Dobrze, to mamy na tyle.
Możemy sobie cofnąć te zmiany.
To był tylko taki mały test.
Jeżeli czy cokolwiek z tej tabeli miałby jakąś rację bytu?
Teraz przejdźmy dalej do sterowania tych pojedynczych elementów.
Czyli zaczniemy sobie tak naprawdę od elementu name.
Tutaj będziemy potrzebowali
dużo rzeczy, bo tak naprawdę zobacz, że w naszej tabelce tutaj name
jest w postaci avatara danej subskrypcji i nazwy tej opcji.
Także możemy zająć się teraz sterowaniem tego elementu.
Przejdźmy do naszego edytora kodu i wróćmy tutaj.
Mamy kiedy name, czyli tak naprawdę na pewno będziemy potrzebowali jeżeli
chodzi o name jakiś wrapper tutaj w środku.
No to na te wszystkie elementy.
Czyli zróbmy sobie def i w środku image.
Jako imigranci mamy wszystkie dane, które
potrzebujemy tak naprawdę, bo mamy dane na temat naszej subskrypcji, czyli serce.
W naszym przypadku to będzie subskrypcja Avatar Girl.
Jeżeli chodzi o napis Alt, który też jest wymagany przez
next w tym komponencie, to możemy sobie to zbudować jako dollar subskrypcji Name.
I do końca Tutaj dodać jeszcze logo.
Tak.
Wszystko sobie zamkniemy, kowalu. Dobrze.
Kolejna rzecz, którą potrzebujemy to klastry.
Zrobimy sobie po prostu round full, żeby to było w formie kółka.
Jeżeli chodzi o WiFi.
Heide The.
Ustawimy na 16 i height też na 16. Zapiszemy to sobie za.
Importujemy te komponenty razy next image zapiszemy to.
No i jest pewna rzecz, która się pojawi nam teraz.
Specyficzna dla Nexta jest Otóż
host jest cloud is not configure under images next config.
Dżizas. Zobacz obrazki, które pobieramy.
Jeżeli chodzi o nasze subskrypcje,
to są obrazki, które byłyby hostowane przeze mnie
za pomocą Dropboxa i generalnie rzecz biorąc Next nie zna tego hosta.
Dlatego też pokazuje nam błąd, że te obrazki nie są znane.
Musimy teraz przejść do konfiguracji naszej aplikacji, czyli przejść do next
config, mianowicie i ustawić jako jako znany host host.
Z DSC Cloud już mieliśmy images dev.
Teraz musimy po prostu sobie dodać analogicznie dodatkowy DS claudia go host.
Zapiszemy sobie naszą konfigurację,
wrócimy sobie do naszej aplikacji, spróbujemy ją odświeżyć.
Zmiany zaproponowały.
No i już widzisz, mamy widoczne obrazki tam, gdzie powinny być nasze avatary.
Także przejdźmy dalej do sterowania tego elementu.
Co musimy zapakować do środka.
Mamy to. No i ten diff.
Tak naprawdę musimy teraz zająć się sterowaniem tego elementu, czyli
prawdopodobnie potrzebujemy tutaj Class name Flex.
Standardowo Items Center tak zapiszemy to już są w jednym rządku.
Dodatkowa rzecz
czas start możemy sobie ustawić i gap pomiędzy elementami na dwa
przesuniemy troszeczkę te elementy nazwy i ten element, jeżeli chodzi o
styl na całą kolumnę, jakby na te wszystkie elementy tych wierszy, to możemy
sobie zaaplikować to tutaj, bo będziemy na pewno tutaj potrzebowali kilka rzeczy.
Otóż potrzebujemy sobie width space ustawić na wrap.
Jest to związane z tym, żeby dłuższe po prostu nazwy były stosowane.
Time Transit Jeżeli chodzi o padding y to
musimy sobie ustawić na 4 na padding po lewej stronie.
Przypominam to jest pierwszy element, pierwszy element w rzędzie.
Dlatego też musimy ustawić tak samo jak na całym naszym kontenerze czyli PL 6.
PR 3 możemy sobie zostawić.
Tak naprawdę nie musimy tego ustawiać.
Tekst ustawimy na S.
I tak naprawdę będziemy mieli chyba już wszystko, jeżeli chodzi o ten teren.
Zobacz, odsunęły się nasze elementy, wszystko jest pod sobą.
Tak naprawdę także już jesteśmy coraz bliżej tego
wyświetlenia tych danych takiego jak mamy właśnie na tym naszym screenie.
Wróćmy teraz tutaj do
widoku poprzedniego, żebyśmy mogli dalej bawić się w development.
Jeżeli chodzi o co przy name to tak naprawdę nie musimy tego zapakować.
Póki co wygląda to w porządku.
Przejdźmy teraz do
kategorii naszej subskrypcji do występowania tego elementu.
Tutaj jeżeli chodzi o kategorię to myślę, że nie ma wielkiej filozofii.
Napis zostawimy tak jak jest.
Dajemy sobie tylko naszą TDD, czyli cały element w rzędzie.
I jeżeli chodzi o to, to tak naprawdę
możemy ją zostawić jako ukrytą, bo widzi, że na tych mniejszych ekranach, tutaj to
jest ekran wielkości tabletu, można powiedzieć.
Generalnie chcemy pokazać tylko te najważniejsze informacje, dlatego też tą
kategorię możemy sobie tutaj spokojnie ukryć.
Dlatego ustawiłem sobie na hidden.
Na początku jak sobie to zapiszę to te kategorie zostały ukryte.
To jest wszystko ok.
Tak naprawdę nie chcemy je pokazywać na małych ekranach, na małych ekranach.
Myślę, że najważniejsze informacje, które powinny zostać pokazane to tak naprawdę
cena i tak naprawdę i nazwa danej danej rzeczy.
Kategorii możemy sobie swobodnie tutaj ukryć.
Jeżeli chodzi o ukrywanie tego, to tak naprawdę też musimy podejść do tego w taki
sam sposób ukrywanie nagłówków, bo teraz tutaj mamy Monthly podkategorii, czyli
musimy sobie przejść za chwilę to do nagłówków.
Natomiast ustawimy teraz, żeby na ekranach XML, czyli na
ekranach dużych, żeby to jednak było table cell, tam zapiszemy tą opcję i
musimy tak naprawdę wykorzystać to samo jeżeli chodzi o nasz nagłówek, o nasz
nagłówek kategorii, czyli przejdźmy do naszego nagłówka kategorii.
Mamy tutaj kategorie.
I tak pierwszy element to jest jeden i drugi tabelce.
No i już teraz mamy to bardziej logicznie,
czyli mamy billing period pod billing, tak jak to powinno być.
Jeżeli chodzi o następne rzeczy, które też chcemy.
Na pewno billing period i next payment też.
Na tym widoku jednak bym mógł.
Natomiast tutaj jeżeli chodzi o duży wir, no to już powinny się one pojawiać.
Wróćmy teraz tutaj poniżej.
Zostawimy sobie to na razie tak jak jest.
Jeżeli chodzi o stylowe billing period, to możemy to też ustawić już od razu, jak
już jesteśmy w tym miejscu, czyli billing period.
Musimy sobie tak naprawdę też tutaj klasy nam i potrzebują tutaj dwóch rzeczy.
No tutaj też będziemy musieli sobie to ukryć.
Chcemy to wyświetlać tak naprawdę tylko na
dużych ekranach, czyli table cell w tym momencie.
I musimy przejść oczywiście też do billing period jeżeli chodzi o nasze nagłówki.
I tutaj tak samo musimy ustawić sobie na 1.
I tu już różnica będzie taka, że będziemy potrzebowali XL a nie XL.
Tablice.
Kupiliśmy kolejną rzecz niepotrzebną na tym małym widoku.
Jeżeli o to chodzi. Przejdziemy na duży widok.
Widzisz, że już mogą się pojawiać kolejne rzeczy.
Natomiast na tym małym widoku skupiłbym
się raczej tylko i wyłącznie na nazwie i na kosztach danej kategorii.
Jeżeli ktoś sobie to otwiera na tablecie, myślę, że to są najważniejsze
informacje, które musimy pokazywać tej tabelce.
Kolejne mamy Next Payment date.
Tutaj analogicznie posłużymy się tą samą strategią, czyli
tak naprawdę nie jest potrzebny na małych ekranach, tylko na tych największych.
I tutaj też musimy sobie przejść na nasz eksperyment datę.
Niech to będzie H1.
I tutaj kolejna wartość.
Table cell.
Dobrze zapiszemy to sobie.
Strona nam się przebudowuje.
Teraz przejdźmy do stylizowana naszej ceny subskrypcji.
Myślę, że tutaj musimy dokonać pewnych
poprawek jeżeli chodzi o wyświetlanie tego elementu.
Najpierw zajmiemy się stylami globalnymi dla tego wiersza, czyli klasy.
I tutaj wake up ustalamy sobie padding y na czwórkę.
Padding po prawej stronie Przypominam to
jest ostatni element naszej tabelce, czyli musimy odsunąć od prawej strony o 6.
Tekst Zatem możemy sobie ustawić font medium.
I to by było na tyle.
Już mamy trochę zmienione wyświetlanie.
Natomiast tutaj jeżeli chodzi o ten
element w środku to jak najbardziej potrzebujemy to tutaj przesunąć.
Potrzebujemy kolejny wrapper i tutaj do środka wrzucimy
nasz PRISM I tak tak naprawdę możemy to opakować w taki paragraf.
To będzie pierwsza część wyświetlana, a
druga część wyświetlana to będzie nasza waluta, czyli subskrypcje currency.
Zapiszemy to sobie.
Póki co mamy to ustawione pod sobą.
Do tego musimy zająć się teraz cytowaniem tego rapera Class Name.
Standardowo flex w strefie end zrobimy w tym przypadku
i ustawimy na 2, żeby odsunąć te elementy od siebie.
No już to wygląda dużo lepiej.
Przejdźmy teraz do sprawdzenia, czy wszystkie style się aplikują.
Zobacz na tablety mamy tylko najważniejsze
informacje jeżeli chodzi o nazwę danej subskrypcji, o koszt.
Natomiast jeżeli przejdziemy na duże
ekrany to już mamy tutaj wyświetlone to inaczej.
Jeżeli chodzi o ten billing period możemy to zostawić tak jak jest.
Myślę, że nie powinno być problemu. Myślę, że jeszcze możemy.
Co to może być? Zrobię to.
Zmienić to na laurkę, bo jednak wygląda to trochę śmiesznie w tej tabelce, że mamy
takie billing nastawione jeżeli chodzi o opiekę.
Czyli w naszym przypadku możemy sobie
ustawić na localhost tekst jest tak jak to wszystkich przypadkach.
Tutaj też potrzebujemy tekst testem.
Tutaj mamy już tekst też wszędzie mamy tekst.
Tutaj jeszcze potrzebujemy tekstu.
Zapiszemy sobie te wartości, sprawdzimy już jak to wygląda.
No już ten billing period wygląda dużo
lepiej, jeżeli chodzi nawet o wyświetlanie na tych dużych ekranach.
Myślę, że to by było na tyle jeszcze.
Oczywiście, że tutaj
tak naprawdę jeżeli chodzi o nasz design, to mamy pokazane tutaj za symulowane
jakieś filtrowanie czy sortowanie naszych naszych rekordów.
Widzimy tutaj, że tak naprawdę są nasze rekordy, są posortowane po next payment.
Jeżeli chodzi o nas, my mamy od razu dane z serwera posortowane.
Jeżeli chodzi o next payment date mamy to wszystko posortowane.
Natomiast nie mamy tutaj jeszcze żadnego znaczenia.
Myślę, że tak naprawdę budowanie tutaj logiki związanej z filtrowaniem,
sortowaniem znacznie wychodziłoby poza zakres tego kursu.
Dlatego też jeżeli chcesz, zachęcam Cię
serdecznie do tego, żebyś sobie rozwijał tą tabelę i
zbudował sobie ją w taki sposób, żeby można tutaj filtrować, sortować wyniki.
Myślę, że to co już zrobiliśmy na chwilę obecną, czyli ten Infinity Scroll, który
tutaj jak najbardziej możesz zastosować, To jak to wygląda na chwilę obecną jest
jak najbardziej do zaakceptowania, także myślę, że zamkniemy sobie ten komponent
tabelki na chwilę obecną i przejdziemy do budowania kolejnego
ekranu używając już komponenty, które wcześniej mieliśmy tutaj zbudowane.
Na ekranie też.