TB01 Predefined Actions

Built-in add, delete, duplicate, and move actions with trigger modes

Live Demo

Hover over rows to see the toolbar.

Code
Predefined Actions 
 
 
Configuration
 
Predefined Actions
 
  • 'add' - Add new row
    •  
  • 'delete' - Delete row
    •  
  • 'duplicate' - Clone row
    •  
  • 'moveUp' - Move row up
    •  
  • 'moveDown' - Move row down
 
Trigger Modes
 
toolbarTrigger:
 
  • hover - Show on hover (default)
    •  
  • click - Show on row click
    •  
  • button - Show via button
 
TB02 Custom Actions
 
Custom toolbar items with icons, groups, danger styling, and keyboard shortcuts
 
Live Demo
 
 
Hover over a row and press E, A, or Delete key.
 
Code
 
Custom Actions 
 
 
 
Configuration
 
Custom Item Properties
 
id - Unique identifier
 
icon - Emoji or text icon
 
title - Tooltip text
 
label - Button text
 
danger - Red styling
 
group - Group number for dividers
 
disabled - Boolean or callback
 
Keyboard Shortcuts
 
When toolbar is visible, rowShortcuts work on the hovered row - no cell focus required!
 
TB03 Multi-Row & Positioning
 
Multi-row toolbars with groups, position, and alignment options
 
Live Demo
 
 
Hover to see 2-row toolbar with grouped buttons.
 
Configuration
 
 
    
 
Preferred side (falls back if no space). Inline = always-visible column.
 
 
  
 
Vertical alignment: top (rows above), center, bottom (rows below)
 
 
   
 
Horizontal alignment (top position only)
 
Multi-Row Config 
 
 
 
Options
 
Multi-Row & Groups
 
Use row and group properties:
 
  • row: 1 - First row of buttons
    •  
  • row: 2 - Second row
    •  
  • group: 1, 2... - Creates dividers
 
toolbarPosition
 
  • auto - Auto-detect (default)
    •  
  • left / right / top
 
toolbarVerticalAlign
 
  • top - Rows stack above
    •  
  • center - Centered on row
    •  
  • bottom - Rows stack below (default)
 
toolbarHorizontalAlign
 
  • start / center / end / cursor
 
TB04 Inline Actions Column
 
Always-visible actions column with per-row disabled/hidden callbacks
 
Live Demo
 
 
Actions always visible. Hover row and press Delete or A key.
 
Code
 
Inline Configuration 
 
 
 
Features
 
When to Use
 
Use inline when actions should always be visible, not hidden behind hover.
 
Key Properties
 
  • toolbarPosition: 'inline'
    •  
  • inlineActionsTitle - Column header
 
Per-Row Callbacks
 
  • disabled: (row) => boolean - Grayed out
    •  
  • hidden: (row) => boolean - Not rendered
 
Keyboard Shortcuts
 
rowShortcuts work when hovering over a row - no floating toolbar needed!
 
Comparison
 
FloatingInline
Appears on hoverAlways visible
Saves spaceUses column width
Good for many actionsGood for few actions
 
TB05 Advanced Toolbar Features
 
Cell toolbar, cursor following, and column pinning
 
Features
 
These features are configured via JavaScript API.
 
Code
 
Advanced Configuration 
 
 
 
Description
 
Toolbar Follows Cursor
 
toolbarFollowsCursor makes the toolbar track the mouse position horizontally within the row.
 
Cell Toolbar
 
cellToolbar callback returns different toolbar items based on which cell is hovered. Return null to use the default toolbar.
 
Column Pinning
 
toolbarColumn pins the toolbar to appear over a specific column instead of floating at the row edge.