NEWCKEditor AI is here! Learn how to supercharge your editor with AI on our webinar.
Sign up (with export icon)

TablePropertiesConfig

Api-interface iconinterface

The configuration of the table properties user interface (balloon).

Properties

  • Chevron-right icon

    Configuration of the table alignment behavior in the editor output.

    const tableConfig = {
    	tableProperties: {
    		alignment: {
    			useInlineStyles: false // Use CSS classes instead of inline styles
    		}
    	}
    };
    
    Copy code
  • Chevron-right icon

    The color palette for the table background color picker.

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

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

    Defaults to defaultColors.

    Related:

  • Chevron-right icon

    The color palette for the table border color picker.

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

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

    Defaults to defaultColors.

    Related:

  • Chevron-right icon

    colorPicker : false | ColorPickerConfig | undefined

    Configuration of the color picker in the table properties balloon.

    If set to false the picker will not appear.

  • Chevron-right icon

    Default styles for newly created tables.

    const tableConfig = {
    	tableProperties: {
    		defaultProperties: {
    			borderStyle: 'dashed',
    			borderColor: 'hsl(0, 0%, 90%)',
    			borderWidth: '3px',
    			alignment: 'left',
    			width: '550px',
    			height: '450px'
    		}
    	}
    }
    
    Copy code

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

    See TablePropertiesOptions for the full list of properties.