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)
 
 
  
 
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