v7.3.0

ColumnResize
Feature

Enables user to resize columns by dragging a handle on the right hand side of the header. A drag handle appears when hovering near the right edge of a column header. Dragging it adjusts the column width, respecting any minWidth or maxWidth constraints.

To get notified about column resize, listen to the change event on the columns store.

This feature is enabled by default.

See also

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class
  • liveResize : 'auto'/Booleanauto

    Resize all cells below a resizing header during dragging. 'auto' means true on non-mobile platforms.

Properties

Properties are getters/setters or publicly accessible variables on this class

Functions

Functions are methods available for calling on the class
    • onCancel( )
      private

      Restore column width on cancel (ESC)

    • onResize( )
      private

      Handle drop event (only used for touch)


      Triggers: columnResize

    • onResizing( )
      private

      Handle drag event - resize the column live unless it's a touch gesture

    Events

    Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

    Event handlers

    Event handlers are callbacks called as a result of certain actions in this class

    CSS variables

    CSS variables that can be set to adjust appearance
    Name Description
    --b-column-resize-handle-width Resize handle width (positioned between columns)
    --b-column-resize-header-resizing-background Background color of the header during resize
    --b-column-resize-touch-handle-width Resize handle width for touch devices
    --b-column-resize-touch-resizing-icon Icon to show when resizing a column on touch devices (font icon char)
    id: columnResize

    Source path

    Grid/feature/ColumnResize.js

    Demo

    examples/columns

    Contents