Resize Cells Plugin
Enables interactive resizing of table columns and entire tables by dragging visual resize handles that appear near cell borders. This plugin provides intuitive drag-and-drop functionality for adjusting table dimensions.
Features
- Visual resize handles on cell borders
- Drag-to-resize table columns
- Drag-to-resize entire table width
- Left and right table edge resizing
- RTL (right-to-left) language support
- Automatic handle positioning
- Throttled mouse move for performance
- Minimum/maximum resize limits
- Proportional width calculations
- Adjacent column adjustment
- Touch event support
- Locked editor during resize
- Visual feedback during drag
- Automatic cleanup on mode change
tableAllowCellResize
Type: boolean
Default: true
Enables or disables the ability to resize table cells and tables by dragging handles.
Example:
const editor = Jodit.make('#editor', {
    tableAllowCellResize: true
});
Basic Usage
const editor = Jodit.make('#editor', {
    tableAllowCellResize: true
});
// Insert a table
// Hover over cell borders to see resize handles
// Drag handles to resize columns or table
Disable Cell Resizing
const editor = Jodit.make('#editor', {
    tableAllowCellResize: false
});
// No resize handles will appear on tables
With Custom Table Configuration
Jodit.make('#editor', {
    tableAllowCellResize: true,
    table: {
        // Other table options
        useExtraClassesOptions: false
    }
});
Programmatic Table Insertion with Resizing
const editor = Jodit.make('#editor', {
    tableAllowCellResize: true
});
// Insert table
editor.execCommand('insertTable', false, [3, 3]);
// User can now resize columns by dragging cell borders
With RTL Direction
const editor = Jodit.make('#editor', {
    tableAllowCellResize: true,
    direction: 'rtl'
});
// Resize handles work correctly in right-to-left mode
Handle Display
When hovering over table cells:
- Proximity Detection: Checks if mouse is within NEARBYpixels (5px) of cell border
- Handle Creation: Creates .jodit-table-resizerdiv element
- Position Calculation: Positions handle at cell border (left or right edge)
- Height Setting: Sets handle height to match table height
- Visual Display: Shows vertical line indicating resize position
Resize Modes
The plugin supports three resize modes:
1. Column Resize (Middle Border)
Hovering near middle borders between cells:
- Resizes the column on the left
- Shrinks/expands the column on the right proportionally
- Maintains overall table width
2. Whole Table Resize (Right Edge)
Hovering on rightmost cell border (or leftmost in RTL):
- Resizes entire table width
- Adjusts table width as percentage of parent container
- No column proportions change
3. Whole Table with Margin (Left Edge)
Hovering on leftmost cell border (or rightmost in RTL):
- Resizes entire table width
- Adjusts left/right margin to maintain position
- Reduces table width from opposite side
Drag Operation
When dragging resize handle:
- Lock Editor: Prevents editing during resize (editor.lock(key))
- Track Position: Records startXand calculatesresizeDelta
- Constrain Movement: Enforces minXandmaxXboundaries
- Visual Feedback: Adds jodit-table-resizer_movedclass
- Update Position: Moves handle with mouse in real-time
- Clear Selection: Removes text selection during drag
Column Resizing
When resizing columns:
- Calculate Delta: Determines pixel difference from start position
- Resize Current Column: Adjusts width of dragged column by delta
- Resize Adjacent Column: Adjusts neighboring column by negative delta
- Maintain Total Width: Table width remains constant
- Update Marked Cells: Tracks which cells have been modified
Table Resizing
When resizing entire table:
Right Side (or Left in RTL):
- Calculates new width as percentage of parent
- Formula: ((width + delta) / parentWidth) * 100 + '%'
Left Side (or Right in RTL):
- Reduces width: ((width - delta) / parentWidth) * 100 + '%'
- Adds margin: ((margin + delta) / parentWidth) * 100 + '%'
RTL Support
For right-to-left languages:
- Mirrors all resize logic
- Left/right operations are reversed
- Margin calculations use marginRightinstead ofmarginLeft
- Delta values are inverted for table resize
Column Resize Limits
- minX: Maximum left position (from rightmost cell in column)
- maxX: Minimum right position (from leftmost cell in adjacent column)
- Ensures columns don't shrink below NEARBY / 2pixels
Table Resize Limits
- minX: Left edge of table parent container
- maxX: Right edge of table parent container
- Prevents table from exceeding parent bounds
Event Lifecycle
- Init: Plugin observes all tables on change,afterCommand,afterSetMode
- Observe Table: Attaches mousemoveandmouseleavelisteners to each table
- Mouse Move: Throttled handler calculates handle position
- Handle Shown: Handle appears when near border
- Mouse Down: Starts drag operation
- Mouse Move: Updates handle position and delta during drag
- Mouse Up: Applies resize and unlocks editor
- Handle Hidden: Hides handle after timeout when mouse leaves
Performance Optimizations
- Throttling: Mouse move handler throttled to defaultTimeout(typically 100ms)
- Debounced Hide: Handle hides after timeout delay
- Data Binding: Tables marked as observed to prevent duplicate listeners
- Event Namespacing: Uses .resize-cellsfor clean removal
Events
The plugin listens to these events but doesn't fire custom events:
change, afterCommand, afterSetMode
Re-observes all tables to add resize functionality to new tables.
Example:
editor.e.on('change', () => {
    // Plugin automatically re-observes tables
});
beforeSetMode
Cleans up table selections and normalizes tables before mode switch.
Example:
editor.e.on('beforeSetMode', () => {
    // Plugin removes selections and normalizes tables
});
scroll (on window)
Updates handle position during window scroll while dragging.
Example:
editor.e.on(editor.ow, 'scroll', () => {
    // Plugin updates resize handle top position
});
Edge Cases
- 
Locked Editor: Handle doesn't appear or respond when editor is locked 
- 
No Adjacent Cell: Resizing leftmost/rightmost borders resizes whole table 
- 
Touch Events: Plugin supports both mouse and touch events 
- 
RTL Direction: All logic mirrors for right-to-left languages 
- 
Minimum Width: Columns can't shrink below NEARBY / 2(2.5px)
- 
Parent Bounds: Table resize constrained to parent container width 
- 
Iframe Editor: Position calculations account for iframe offset 
- 
Scroll During Drag: Handle position updates during window scroll 
- 
Multiple Tables: Each table gets independent observers and handlers 
- 
Handle Reuse: Same handle element reused for all resize operations 
- 
Mode Change: Selections cleared and tables normalized before mode switch 
- 
Table Mutations: New tables automatically observed on content changes 
Notes
- Plugin is class-based, extends Pluginbase class
- Uses Tablemodule for column width calculations and formal coordinates
- Resize handle has class jodit-table-resizer
- Active drag state adds jodit-table-resizer_movedclass
- Handle element created once and reused for all tables
- Mouse move throttled with async.throttle()decorator
- Uses dataBind()to mark observed tables and prevent duplicate listeners
- Event namespacing .resize-cellsensures clean removal on destroy
- Lock key is 'table_processor_observer-resize'
- The NEARBYconstant (5px) defines border proximity threshold
- Column resize uses setColumnWidthByDelta()from Table module
- Formal matrix and formal coordinate methods handle colspan/rowspan
- Position calculations use offset()helper for accurate coordinates
- Handle visibility managed with showResizeHandle()andhideResizeHandle()
- Hide operation uses async timeout for smooth UX
- Handle cleared on mouse leave (with check for handle as relatedTarget)
- Drag state tracked with this.dragboolean flag
- Work cell and work table memoized during resize operation
- The wholeTableproperty:null= column resize,true= left table edge,false= right table edge
- Width calculations use percentages relative to parent container
- Adjacent column resize uses negative delta to maintain table width
- The plugin integrates with editor's lock/unlock system
- Selection cleared during drag to prevent text selection interference
- Handle position constrained between minXandmaxXduring drag
- Mouse up event attached to window (j.ow) to catch releases outside editor
- Touch events (touchstart,touchmove,touchend) supported alongside mouse events
- The resizeDeltaproperty tracks total pixel change during drag
- Margin adjustments maintain table position when resizing from left
- RTL detection uses editor.o.direction === 'rtl'
- All DOM queries use $$()helper for consistency
- The plugin properly cleans up all event listeners on destruction
- Scroll handler only active during drag operations
- Table normalization ensures consistent structure after resize
Typical Use Case
Users need to adjust table column widths and table sizes to fit their content and layout requirements. The resize-cells plugin provides this by:
- Showing visual handles when hovering near cell borders
- Allowing intuitive drag-and-drop resizing
- Supporting both column and whole-table resizing
- Maintaining proportions when resizing columns
- Respecting container boundaries
This improves user experience by:
- Providing familiar spreadsheet-like resize functionality
- Eliminating need for manual width attribute editing
- Supporting both precise and quick adjustments
- Working correctly with RTL languages
- Maintaining table structure integrity during resize