wiz-table

Use the wiz-table component to add a table to your email template. You can add text, images, buttons, and other component to the table cells. For more information about the component in eWizard Editor, see Table.

Learn more about components

• Import and registration
• Property and file types
• Configuration
• Components in eWizard Editor

Usage

To use the wiz-table component in your email project:

1. Add the <wiz-table> tag to your email template and change its properties in the App.vue file.

   <!--./App.vue -->
   
   <template>
   <wiz-root align="center" style="background: #ffffff; width: 700px">
     <wiz-table id="wiz-table-144c"></wiz-table>
   </wiz-root>
   </template>

   eWizard Editor sets the id attribute when you add the component to the email layout. The id attribute is required for the correct display of the component styles in eWizard Editor.

2. Add the <wiz-table-row> and <wiz-table-cell> tags for rows and cells respectfully.

   <!--./App.vue -->
   
   <template>
   <wiz-root align="center" style="background: #ffffff; width: 700px">
     <wiz-table id="wiz-table-144c">
       <wiz-table-row
         ><wiz-table-cell id="wiz-table-cell-2128"
           ></wiz-table-cell
         ><wiz-table-cell id="wiz-table-cell-b419"
           ></wiz-table-cell>
       </wiz-table-row>
     </wiz-table>
   </wiz-root>
   </template>

3. Add components within the <wiz-table-cell> tag. For example, <wiz-text> and wiz-image:

   <!--./App.vue -->
   
   <template>
   <wiz-root align="center" style="background: #ffffff; width: 700px">
     <wiz-table id="wiz-table-144c">
       <wiz-table-row
         ><wiz-table-cell id="wiz-table-cell-2128"
           ><wiz-text :text="$t('wiz_text_21c0')"></wiz-text></wiz-table-cell
         ><wiz-table-cell id="wiz-table-cell-b419"
           ><wiz-image
             id="wiz-image-5031"
             src="common/media/images/f6194d90-8f03-11ec-96c2-ea6c057b1b2f.jpg"
             data-asset-id="6ckgp7613q"
           ></wiz-image></wiz-table-cell></wiz-table-cell>
       </wiz-table-row>
     </wiz-table>
   </wiz-root>
   </template>

Attributes

Set the rearrange-table attribute to true so the table is adjusted to various mobile devices.

<wiz-table :rearrange-table="true"></wiz-table>

Properties

The following properties are available:

Property	Type	Default value	Description
rearrangeTable	boolean	false	Email table mobile device responsiveness