Ręczne dodawanie warstw Data Table do projektu
Aby dodać warstwę Data Table, kliknij dowolną warstwę Column w projekcie, wybierz opcję Data Table z menu szybkiego dodawania u dołu wtyczki, a potem kliknij Add, aby wstawić warstwy do projektu.
Dodawanie kolejnych wierszy lub kolumn tabeli danych. Kolejne wiersze lub kolumny szybko dodasz, kopiując i wklejając początkowo utworzone warstwy wiersza tabeli lub komórki danych w Figmie.
Domyślnie tabela Data Table wyświetla się tak samo na komputerze i na urządzeniach mobilnych, więc jeśli dodajesz więcej niż kilka kolumn, zwróć uwagę na szerokość tabeli.
W przypadku kompaktowych tabel z ikonami i tekstem lub wierszy w stylu listy kontrolnej zaznacz główną warstwę Data Table, kliknij Settings, włącz Mobile Alignment i wybierz Center. Na urządzeniach mobilnych wyeksportowana tabela zostanie wyśrodkowana, a odstępy między ikonami i tekstem pozostaną bez zmian. To bardziej niezawodne niż ręczne dodawanie lewego i prawego dopełnienia, aby przybliżyć wyśrodkowanie w różnych klientach mobilnych.
Rozszerzanie obrazów w tabeli Data Table na urządzeniach mobilnych
Zaznacz obraz w tabeli Data Table, otwórz Settings i włącz 100% Width Image on Mobile. Obrazy szersze niż 150px w projekcie na komputer mogą na urządzeniach mobilnych rozciągnąć się na całą komórkę tabeli – to ta sama minimalna szerokość co dla obrazów w kolumnach (Column). Obrazy o szerokości 150px lub mniejszej zachowują swój rozmiar, aby małe ikony się nie rozciągały.
Sprawdzana jest wyrenderowana szerokość warstwy obrazu, a nie szerokość zagnieżdżonego komponentu głównego. Jawne mobilne nadpisania szerokości lub wysokości mają pierwszeństwo. Aby obraz wypełniał wiersz ułożony pionowo, ustaw też w wierszu Data Table Row układanie komórek jedna pod drugą na urządzeniach mobilnych.
Importowanie tabeli Data Table z adresu URL arkusza Google lub pliku CSV/Excel
Jeśli masz już dane w arkuszu Google lub w pliku CSV/Excel, możesz automatycznie utworzyć nową tabelę Data Table z tymi danymi: kliknij dowolną warstwę Column w projekcie, a potem wybierz opcję Spreadsheet z menu szybkiego dodawania u dołu wtyczki.
Po wybraniu opcji Spreadsheet wklej URL publicznego arkusza Google albo przeciągnij i upuść plik CSV/Excel do wtyczki, a potem kliknij Add, aby wstawić warstwy do projektu.
Emailify potrzebuje uprawnień do odczytu arkusza. W Arkuszach Google wybierz Share i zmień Restricted na Anyone with the link, zanim skopiujesz URL.
Powtarzanie wiersza Data Table Row w pętli z danymi dynamicznymi
Aby przejść w pętli przez dane z platformy e-mailowej, zaznacz warstwę Data Table Row i otwórz Settings. Dodaj składnię pętli w polach Opening Code Wrapper (na przykład {% for product in collection.products %}) i Closing Code Wrapper (na przykład {% endfor %}). Emailify wstawi te znaczniki wokół elementu <tr></tr> tego wiersza w eksportowanym HTML.
Po dodaniu znaczników otaczających do warstwy Data Table Row możesz w razie potrzeby wypełnić warstwy wiersza treścią dynamiczną.
Możesz masowo zastosować ustawienia: otwórz Settings, a potem zaznacz w Figmie kilka warstw Emailify tego samego typu. Każde zmienione ustawienie zostanie zastosowane do wszystkich zaznaczonych warstw.