# table/utils/ui/table-properties

module

<a id="constants">

## Constants

<a id="constant-defaultColors">

### `defaultColors: Array<ColorOption>`

A default color palette used by various user interfaces related to tables, for instance, by [`TableCellPropertiesUI`](module_table_tablecellproperties_tablecellpropertiesui-TableCellPropertiesUI.md) or [`TablePropertiesUI`](module_table_tableproperties_tablepropertiesui-TablePropertiesUI.md).

The color palette follows the [table color configuration format](module_table_tableconfig-TableColorConfig.md) and contains the following color definitions:

```typescript
const defaultColors = [
  {
	color: 'hsl(0, 0%, 0%)',
	label: 'Black'
  },
  {
	color: 'hsl(0, 0%, 30%)',
	label: 'Dim grey'
  },
  {
	color: 'hsl(0, 0%, 60%)',
	label: 'Grey'
  },
  {
	color: 'hsl(0, 0%, 90%)',
	label: 'Light grey'
  },
  {
	color: 'hsl(0, 0%, 100%)',
	label: 'White',
	hasBorder: true
  },
  {
	color: 'hsl(0, 75%, 60%)',
	label: 'Red'
  },
  {
	color: 'hsl(30, 75%, 60%)',
	label: 'Orange'
  },
  {
	color: 'hsl(60, 75%, 60%)',
	label: 'Yellow'
  },
  {
	color: 'hsl(90, 75%, 60%)',
	label: 'Light green'
  },
  {
	color: 'hsl(120, 75%, 60%)',
	label: 'Green'
  },
  {
	color: 'hsl(150, 75%, 60%)',
	label: 'Aquamarine'
  },
  {
	color: 'hsl(180, 75%, 60%)',
	label: 'Turquoise'
  },
  {
	color: 'hsl(210, 75%, 60%)',
	label: 'Light blue'
  },
  {
	color: 'hsl(240, 75%, 60%)',
	label: 'Blue'
  },
  {
	color: 'hsl(270, 75%, 60%)',
	label: 'Purple'
  }
];
```

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-table/src/utils/ui/table-properties.ts#L307)

<a id="functions">

## Functions

<a id="function-colorFieldValidator">

### `colorFieldValidator( value ) → boolean` _(internal)_

Returns `true` when the passed value is an empty string or a valid CSS color expression. Otherwise, `false` is returned.

See [`isColorStyleValue`](module_engine_view_styles_utils.md#function-isColorStyleValue).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-table/src/utils/ui/table-properties.ts#L84)

#### Parameters

* `value: string`

#### Returns

* `boolean`

<a id="function-fillToolbar">

### `fillToolbar( options = { options.defaultValue?, options.icons, options.labels, options.nameToValue?, options.propertyName, options.toolbar, options.view } ) → void` _(internal)_

A helper that fills a toolbar with buttons that:

* have some labels,
* have some icons,
* set a certain UI view property value upon execution.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-table/src/utils/ui/table-properties.ts#L180)

#### Type parameters

* * `TView: extends View<HTMLElement>`
  * `TPropertyName`

#### Parameters

* `options: object`

  Configuration options

  Properties

  * `options.defaultValue?: string`

    Default value for the property.

  * `options.icons: Record<string, string>`

    Object with button icons.

  * `options.labels: Record<number, string>`

    Object with button labels.

  * `options.nameToValue?: ( name: string ) => string`

    A function that maps a button name to a value. By default names are the same as values.

  * `options.propertyName: TPropertyName`

    The name of the observable property in the view.

  * `options.toolbar: ToolbarView`

    The toolbar to fill with buttons.

  * `options.view: TView`

    The view that has the observable property.

#### Returns

* `void`

<a id="function-getBorderStyleDefinitions">

### `getBorderStyleDefinitions( view, defaultStyle ) → Collection<ListDropdownItemDefinition>` _(internal)_

Generates item definitions for a UI dropdown that allows changing the border style of a table or a table cell.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-table/src/utils/ui/table-properties.ts#L125)

#### Parameters

* `view: TablePropertiesView | TableCellPropertiesView`

* `defaultStyle: string`

  The default border.

#### Returns

* `Collection<ListDropdownItemDefinition>`

<a id="function-getBorderStyleLabels">

### `getBorderStyleLabels( t ) → Record<string, string>` _(internal)_

Returns an object containing pairs of CSS border style values and their localized UI labels. Used by [`TableCellPropertiesView`](module_table_tablecellproperties_ui_tablecellpropertiesview-TableCellPropertiesView.md) and [`TablePropertiesView`](module_table_tableproperties_ui_tablepropertiesview-TablePropertiesView.md).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-table/src/utils/ui/table-properties.ts#L40)

#### Parameters

* `t: LocaleTranslate`

  The "t" function provided by the editor that is used to localize strings.

#### Returns

* `Record<string, string>`

<a id="function-getLabeledColorInputCreator">

### `getLabeledColorInputCreator( options = { options.colorConfig, options.colorPickerConfig, options.columns, options.defaultColorValue? } ) → ( labeledFieldView: LabeledFieldView, viewUid: string, statusUid: string ) => ColorInputView` _(internal)_

Returns a creator for a color input with a label.

For given options, it returns a function that creates an instance of a [color input](module_table_ui_colorinputview-ColorInputView.md) logically related to a [labeled view](module_ui_labeledfield_labeledfieldview-LabeledFieldView.md) in the DOM.

The helper does the following:

* It sets the color input `id` and `ariaDescribedById` attributes.
* It binds the color input `isReadOnly` to the labeled view.
* It binds the color input `hasError` to the labeled view.
* It enables a logic that cleans up the error when the user starts typing in the color input.

Usage:

```typescript
const colorInputCreator = getLabeledColorInputCreator( {
  colorConfig: [ ... ],
  columns: 3,
} );

const labeledInputView = new LabeledFieldView( locale, colorInputCreator );
console.log( labeledInputView.view ); // A color input instance.
```

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-table/src/utils/ui/table-properties.ts#L405)

#### Parameters

* `options: object`

  Color input options.

  Properties

  * `options.colorConfig: Array<NormalizedColorOption>`

    The configuration of the color palette displayed in the input's dropdown.

  * `options.colorPickerConfig: false | ColorPickerConfig`

    The configuration of the color picker. You could disable it or define your output format.

  * `options.columns: number`

    The configuration of the number of columns the color palette consists of in the input's dropdown.

  * `options.defaultColorValue?: string`

    If specified, the color input view will replace the "Remove color" button with the "Restore default" button. Instead of clearing the input field, the default color value will be set.

#### Returns

* `( labeledFieldView: LabeledFieldView, viewUid: string, statusUid: string ) => ColorInputView`

<a id="function-getLocalizedColorErrorText">

### `getLocalizedColorErrorText( t ) → string` _(internal)_

Returns a localized error string that can be displayed next to color (background, border) fields that have an invalid value.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-table/src/utils/ui/table-properties.ts#L61)

#### Parameters

* `t: LocaleTranslate`

  The "t" function provided by the editor that is used to localize strings.

#### Returns

* `string`

<a id="function-getLocalizedLengthErrorText">

### `getLocalizedLengthErrorText( t ) → string` _(internal)_

Returns a localized error string that can be displayed next to length (padding, border width) fields that have an invalid value.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-table/src/utils/ui/table-properties.ts#L72)

#### Parameters

* `t: LocaleTranslate`

  The "t" function provided by the editor that is used to localize strings.

#### Returns

* `string`

<a id="function-lengthFieldValidator">

### `lengthFieldValidator( value ) → boolean` _(internal)_

Returns `true` when the passed value is an empty string, a number without a unit or a valid CSS length expression. Otherwise, `false` is returned.

See [`isLengthStyleValue`](module_engine_view_styles_utils.md#function-isLengthStyleValue). See [`isPercentageStyleValue`](module_engine_view_styles_utils.md#function-isPercentageStyleValue).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-table/src/utils/ui/table-properties.ts#L99)

#### Parameters

* `value: string`

#### Returns

* `boolean`

<a id="function-lineWidthFieldValidator">

### `lineWidthFieldValidator( value ) → boolean` _(internal)_

Returns `true` when the passed value is an empty string, a number without a unit or a valid CSS length expression. Otherwise, `false` is returned.

See [`isLengthStyleValue`](module_engine_view_styles_utils.md#function-isLengthStyleValue).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-table/src/utils/ui/table-properties.ts#L113)

#### Parameters

* `value: string`

#### Returns

* `boolean`

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)