QuillKit - Table Resize & Border Color Demo

🎨 New Features

Column Resizing: Drag the right edge of any column to resize it
Row Resizing: Drag the bottom edge of any row to adjust its height
Fit-to-Width: Double-click a column edge to auto-fit to content width
Custom Border Colors: Choose any color for table borders when creating tables
Preserved Colors: Border colors are maintained when adding rows/columns

Create a Table: Click the ⊞ button and choose rows, columns, and border color
Resize Columns: Hover over the right edge of any cell (except last column) to see the resize cursor. Click and drag to resize
Resize Rows: Hover over the bottom edge of any cell (except last row) to see the resize cursor. Click and drag to resize
Auto-fit Column: Double-click the right edge of any column to automatically fit content
Add Rows/Columns: Use the toolbar buttons to add/remove rows and columns
Change Border Color: When creating a new table, select your desired border color from the color picker

Table Layout: Tables now use table-layout: fixed for more predictable resizing behavior.

Resize Handles: Virtual handles are automatically added to table cells using a MutationObserver.

Border Color Storage: Border colors are stored as a data attribute on the table element and preserved during operations.

Fit-to-Width Algorithm: Calculates the maximum content width across all cells in a column.

Visual Feedback: Resize handles highlight in blue when you hover over them
Minimum Sizes: Tables have minimum dimensions to ensure usability (50px width, 30px height)
Content Overflow: Text overflow is handled with ellipsis for better table appearance
Color Consistency: When adding rows or columns, the original border color is automatically applied
Undo/Redo: All table operations including resizing support undo/redo functionality