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: '' }] }] }
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	true
headerFontFamily	inherit
headerBackgroundColor	#DDDDDD
headerFontWeight	700
headerFontSize	14px
headerColor	inherit
headerTextAlign	left
headerPadding	10px
contentFontFamily	inherit
contentBackgroundColor	#FFFFFF
contentFontWeight	inherit
contentFontSize	14px
contentColor	inherit
contentTextAlign	left
contentLineHeight	140%
contentLetterSpacing	inherit
contentPadding	10px
enableFooter	false
footerFontFamily	inherit
footerBackgroundColor	#DDDDDD
footerFontWeight	700
footerFontSize	14px
footerColor	inherit
footerTextAlign	left
footerPadding	10px

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,
          },
        },
      },
    },
  },
});

---

Columns and Rows Limits

You can configure the minimum and maximum allowed values for columns and rows using widgetParams. This will enforce limits both in the property editor and in the table controls.

unlayer.init({
  tools: {
    table: {
      properties: {
        columns: {
          editor: {
            widgetParams: {
              minValue: 1,
              maxValue: 4,
            },
          },
        },
        rows: {
          editor: {
            widgetParams: {
              minValue: 1,
              maxValue: 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
            },
          },
        },
      },
    },
  },
});

---

Footer Settings

unlayer.init({
  tools: {
    table: {
      properties: {
        enableFooter: {
          editor: {
            defaultValue: true,
          },
        },
        footerFontSize: {
          editor: {
            defaultValue: '16px',
          },
        },
        footerColor: {
          editor: {
            defaultValue: '#333333',
          },
        },
        footerFontWeight: {
          editor: {
            defaultValue: 600,
          },
        },
        footerTextAlign: {
          editor: {
            defaultValue: 'center',
          },
        },
        footerBackgroundColor: {
          editor: {
            defaultValue: '#EEEEEE',
          },
        },
        footerPadding: {
          editor: {
            defaultValue: '15px',
          },
        },
        footerFontFamily: {
          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',
            },
          },
        },
      },
    },
  },
});