wiz-table component in emails | Viseven Help Center

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.

Installation

To install the wiz-table component, run the following command in the root directory of your email project:

wiz install @email/wiz-table

You can use the component in eWizard Editor. For this, register the wiz-table component and make it visible in eWizard Editor.

To register the component globally, import the WizTablePlugin in the common.js file of your site.

// ./extensions/common.jsimport { WizTablePlugin } from '@email/wiz-table';Vue.use(WizTablePlugin);

To register the component locally, import the component within the <script> tag of the App.vue file of your email.

<!-- ./App.vue --><script>
import { WizTablePlugin } from '@email/wiz-table';Vue.use(WizTablePlugin);
</script>

After registering the component, make it visible in eWizard Editor.

For more information, see Install components.

Usage

TIP: As best practice, use eWizard Editor to add and edit the components.

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>

NOTE: 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 wiz-table component has the following properties:

Property	Type	Default	Description
`rearrangeTable`	Boolean	`false`	Defines if the table is adjusted for various mobile devices.

For more information, see Component properties.