Table

Paid Feature

This feature is only available in paid plans. Learn More

Table is a built-in tool so users can add table to their designs. This tool is supported for all display modes.

Enable / Disable

Table tool is enabled by default but you can choose to disable it.

unlayer.init({
  tools: {
    table: {
      enabled: false,
    },
  },
});

---

Default Values

Table tool comes with the following default values. You can choose to change any of these.

Property	Default Value
columns	2
rows	2
table	{ headers: [{ cells: [{ text: 'Add header text' }, { text: '' }] }], rows: [{ cells: [{ text: 'Add text' }, { text: '' }] }, { cells: [{ text: '' }, { text: '' }] }] }
backgroundColor	#FFFFFF
border	{ borderTopWidth: '1px', borderTopStyle: 'solid', borderTopColor: '#CCC', borderLeftWidth: '1px', borderLeftStyle: 'solid', borderLeftColor: '#CCC', borderRightWidth: '1px', borderRightStyle: 'solid', borderRightColor: '#CCC', borderBottomWidth: '1px', borderBottomStyle: 'solid', borderBottomColor: '#CCC' }
stripedRows	false
stripedRowsBackgroundColor	#CCC
enableHeader	false
headerFontFamily	inherit
headerFontWeight	700
headerBackgroundColor	#DDDDDD
headerFontSize	14px
headerColor	inherit
headerTextAlign	left
contentFontFamily	inherit
contentFontWeight	inherit
contentFontSize	14px
contentColor	inherit
contentTextAlign	left
contentLineHeight	140%
contentLetterSpacing	inherit

Here are examples of how to customize the default values for the table tool:

Table Values

unlayer.init({
  tools: {
    table: {
      properties: {
        table: {
          value: {
            headers: [
              {
                cells: [{ text: 'Name' }, { text: 'Email' }],
              },
            ],
            rows: [
              {
                cells: [{ text: 'John Doe' }, { text: 'john@example.com' }],
              },
              {
                cells: [{ text: 'Jane Smith' }, { text: 'jane@example.com' }],
              },
            ],
          },
        },
      },
    },
  },
});

Columns and Rows

unlayer.init({
  tools: {
    table: {
      properties: {
        columns: {
          editor: {
            defaultValue: 4,
          },
        },
        rows: {
          editor: {
            defaultValue: 5,
          },
        },
      },
    },
  },
});

---

Background Color

unlayer.init({
  tools: {
    table: {
      properties: {
        backgroundColor: {
          editor: {
            defaultValue: '#FFFFFF',
          },
        },
      },
    },
  },
});

---

Header Settings

unlayer.init({
  tools: {
    table: {
      properties: {
        enableHeader: {
          editor: {
            defaultValue: true,
          },
        },
        headerFontSize: {
          editor: {
            defaultValue: '16px',
          },
        },
        headerColor: {
          editor: {
            defaultValue: '#333333',
          },
        },
        headerFontWeight: {
          editor: {
            defaultValue: 600,
          },
        },
        headerTextAlign: {
          editor: {
            defaultValue: 'center',
          },
        },
        headerFontFamily: {
          editor: {
            defaultValue: {
              value: "'Pacifico',cursive", // Please match exactly the value with one of those found in the font family configuration
            },
          },
        },
      },
    },
  },
});

---

Content Settings

unlayer.init({
  tools: {
    table: {
      properties: {
        contentFontSize: {
          editor: {
            defaultValue: '16px',
          },
        },
        contentColor: {
          editor: {
            defaultValue: '#444444',
          },
        },
        contentLineHeight: {
          editor: {
            defaultValue: '150%',
          },
        },
        contentLetterSpacing: {
          editor: {
            defaultValue: '1px',
          },
        },
        contentFontWeight: {
          editor: {
            defaultValue: 400,
          },
        },
        contentTextAlign: {
          editor: {
            defaultValue: 'center',
          },
        },
        contentFontFamily: {
          editor: {
            defaultValue: {
              value: "'Pacifico',cursive", // Please match exactly the value with one of those found in the font family configuration
            },
          },
        },
      },
    },
  },
});

---

Striped Rows

unlayer.init({
  tools: {
    table: {
      properties: {
        stripedRows: {
          editor: {
            defaultValue: true,
          },
        },
        stripedRowsBackgroundColor: {
          editor: {
            defaultValue: '#F0F0F0',
          },
        },
      },
    },
  },
});

---

Border Settings

unlayer.init({
  tools: {
    table: {
      properties: {
        border: {
          editor: {
            defaultValue: {
              borderTopWidth: '2px',
              borderTopStyle: 'solid',
              borderTopColor: '#000000',
            },
          },
        },
      },
    },
  },
});