Skip to main content

Data formatting

Color and style​

The toolbar of DHTMLX Spreadsheet contains several sections with buttons for modifying the style of data in a cell.

DHTMLX Spreadsheet toolbar color and text style buttons for text color, background, bold, and italic

What you can do:

  • change text color with the color picker of the Text color button
  • change background color with the color picker of the Background color button
  • apply Bold, Italic and Underline styles to a text
  • apply Strikethrough formatting to a text

Alignment​

Horizontal alignment​

To align data in a cell horizontally, take the following steps:

1. Select a cell or cells to align

2. Choose one of the actions:

  • Click the "Horizontal align" button in the toolbar and pick Left, Center, or Right

DHTMLX Spreadsheet toolbar with the Horizontal align dropdown showing Left, Center, and Right

  • Or go to: Format -> Horizontal align -> Pick Left, Center, or Right in the menu

DHTMLX Spreadsheet Format menu with the Horizontal align submenu options

Vertical alignment​

To align data in a cell vertically, take the following steps:

1. Select a cell or cells to align

2. Choose one of the actions:

  • Click the "Vertical align" button in the toolbar and pick Top, Center, or Bottom

DHTMLX Spreadsheet toolbar with the Vertical align dropdown showing Top, Center, and Bottom

  • Or go to: Format -> Vertical align -> Pick Top, Center, or Bottom in the menu

DHTMLX Spreadsheet Format menu with the Vertical align submenu options

Wrap text in a cell​

You can wrap text in cells in the following way:

1. Select a cell or cells that you want to format

2. Choose one of the actions:

  • Click the "Text wrapping" button in the toolbar and pick Clip or Wrap

DHTMLX Spreadsheet toolbar with the Text wrapping dropdown showing Clip and Wrap

  • Or go to: Format -> Text wrapping -> Pick Clip or Wrap in the menu

DHTMLX Spreadsheet Format menu with the Text wrapping submenu showing Clip and Wrap

tip

When you change the width of the column, text wrapping adjusts automatically.

Removing styles and values​

You can clear cell values, cell styles, or both. Choose one of two ways:

1. via the toolbar button:

  • Choose necessary cell/cells.
  • Use the Clear button in the toolbar.
  • Choose the desired option in the drop-down list:

DHTMLX Spreadsheet toolbar with the Clear button dropdown for clearing values or styles

2. via the context menu of a cell:

  • Choose necessary cell/cells.
  • Right-click the selection to call the context menu.
  • Choose the Clear option and then select one of the options in the drop-down list:

DHTMLX Spreadsheet context menu with the Clear option for clearing value, styles, or all

Styled borders for cells​

You can add styled borders for a cell or a group of cells.

Setting styled borders​

  • Select the necessary cell or a group of cells to set styled borders for
  • Click the Border button in the toolbar and choose the desired type of the border, its color and style

DHTMLX Spreadsheet Border toolbar button with border type, color, and style options

Removing styled borders​

  • Select the necessary cell or a group of cells from which you want to remove styled borders
  • Click the Border button in the toolbar and choose the Clear borders option

DHTMLX Spreadsheet Border toolbar button with the Clear borders option highlighted

Need more help?Contact Support