CellsHighlightButton

Type: React component

How to get CellsHighlightButton?

JavaScript

import CellsHighlightButton from 'fontoxml-table-flow/src/CellsHighlightButton.jsx'

Creates a button, which you can use to select a range of cells. So you can apply styling to these cells by using the setCellNodeIdsToHighlightedCells and setBordersByCellNodeIdToHighlightedCells transforms. If you want to apply (styling to) borders you can use set-border-mode-for-highlighted-cells to let the user choose between different border modes.

We would recommend to put this button in a toolbar which should only be used when the cursor is in a table. And should be placed together with the other options that apply styling based on this selection.

Props

  1. icon

    (Optional)

    Type: String

    Use an icon in this component. This should be one of the FontAwesome (v5 Pro) icon names with an optional style prefix ('far ' is the default prefix). For more info, see the Font Awesome concept page.

    Default value

  2. type

    (Optional)

    Type: String

    Allows you to override the background and border color from its default values (which are based on the context where you use the button; masthead / masthead tab buttons / toolbar) to one of either:

    • 'default'

    • 'primary'

    • 'transparent'

    • 'warning'

    • 'error' Defaults to 'default', which is then interpreted based on the context.

    Please visit the Button playground example for visual examples for each type in each context.

    Default value

  3. initialState

    (Optional)

    Type: Object

    The intial state when the CellsHighlightButton component is in view. The options available:

    • label: defaults to "Make selection"

    • tooltipContent: defaults to null

    Default value

  4. firstCellState

    (Optional)

    Type: Object

    The state when you need to start selecting the first cell in range. The options available:

    • message: defaults to "Select the first cell for your range"

    • tooltipContent: defaults to null

    Default value

  5. lastCellState

    (Optional)

    Type: Object

    The state when you need to select the last cell in range. The options available:

    • message: defaults to "Select the last cell for your range."

    • changeStartMessage: defaults to "Or change starting cell"

    • tooltipContent: defaults to null

    Default value

  6. applyStylesState

    (Optional)

    Type: Object

    The state when you can start applying styling to the selected cell range. The options available:

    • message: defaults to "Apply styling"

    • tooltipContent: defaults to null

    Default value

Returns