Version: Latest

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`
repeatHeaderOnEachPage	`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`
repeatFooterOnEachPage	`true`
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
            },
          },
        },
      },
    },
  },
});

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

Repeating Header and Footer Across Pages

When a table spans multiple pages in the Document Builder (displayMode: 'document'), its header and footer rows can either repeat at the top and bottom of every page or render only once — at the start of the first page (header) and the end of the last page (footer).

This is controlled per-table by repeatHeaderOnEachPage and repeatFooterOnEachPage. Both default to true. They have no effect outside displayMode: 'document', and they're hidden from the property panel in other display modes.

Property	Default	Behavior when `true`	Behavior when `false`
`repeatHeaderOnEachPage`	`true`	Header row repeats at the top of every page the table spans.	Header row renders once at the start of the table and never repeats.
`repeatFooterOnEachPage`	`true`	Footer row repeats at the bottom of every page the table spans.	Footer row renders once at the end of the table and never repeats.

You can change the defaults the same way as the other header/footer properties:

unlayer.init({
  displayMode: 'document',
  tools: {
    table: {
      properties: {
        repeatHeaderOnEachPage: {
          editor: {
            defaultValue: false,
          },
        },
        repeatFooterOnEachPage: {
          editor: {
            defaultValue: false,
          },
        },
      },
    },
  },
});

The toggles are also surfaced in the table's property panel under Header and Footer, so end-users can flip the behavior per table without code.

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

Enable / Disable​

Default Values​

Table Values​

Columns and Rows​

Columns and Rows Limits​

Background Color​

Header Settings​

Content Settings​

Footer Settings​

Repeating Header and Footer Across Pages​

Striped Rows​

Border Settings​