TableCellPropertiesConfig

The color palette for the table cell background color picker.

const tableConfig = {
	tableCellProperties: {
		backgroundColors: [
			{
				color: 'hsl(0, 0%, 100%)',
				label: 'White',
				hasBorder: true
			},
			{
				color: 'hsl(120, 75%, 60%)',
				label: 'Green'
			}
		]
	}
};

Note: This configuration only affects the UI. It does not limit or filter the colors in the data.

Defaults to defaultColors.

Related:

• TableColorConfig

The color palette for the table cell border color picker.

const tableConfig = {
	tableCellProperties: {
		borderColors: [
			{
				color: 'hsl(0, 0%, 0%)',
				label: 'Black'
			},
			{
				color: 'hsl(0, 0%, 100%)',
				label: 'White',
				hasBorder: true
			}
		]
	}
};

Note: This configuration only affects the UI. It does not limit or filter the colors in the data.

Defaults to defaultColors.

Related:

• TableColorConfig

Configuration of the color picker in the table cell properties balloon.

If set to false the picker will not appear.

Default styles for newly created table cells.

const tableConfig = {
	tableCellProperties: {
		defaultProperties: {
			borderStyle: 'dashed',
			borderColor: 'hsl(0, 0%, 90%)',
			borderWidth: '3px',
			horizontalAlignment: 'center',
			verticalAlignment: 'middle',
			padding: '10px'
		}
	}
}

Note: The model does not store the default values. The editor will only keep values that differ from the defaults.

See TableCellPropertiesOptions for the full list of properties.

If set to true, the scope attribute will be applied to table headers (<th>) based on their position in the table.

The table cell properties UI will extend a dropdown with two more options that allow manually setting the header scope:

• Column header — sets scope="col" on <th>.
• Row header — sets scope="row" on <th>.

If header cell is both in a heading row and a heading column, the col scope will be prioritized by the header rows and columns setting logic. In such case, the user can manually change the scope using the table cell properties UI.

To disable this behavior:

const tableConfig = {
	tableCellProperties: {
		scopedHeaders: false
	}
};

Defaults to true