Table Column Resize

The package now includes advanced column resize functionality that allows users to dynamically adjust table column widths with intuitive drag handles. This feature provides a seamless user experience for customizing table layouts.

Features

• Drag-to-Resize: Intuitive drag handles on column borders for easy resizing
• Visual Feedback: Clear visual indicators during resize operations
• Responsive Design: Maintains table responsiveness while allowing manual adjustments
• Smooth Interactions: Smooth resize animations and real-time width updates
• Cross-Browser Support: Works consistently across all modern browsers

How It Works

The column resize system provides:

1. Resize Handles: Interactive drag handles appear on column borders
2. Real-time Updates: Column widths update instantly as you drag
3. Visual Indicators: Clear feedback showing resize boundaries and constraints
4. Smooth Animations: Fluid resize experience with smooth transitions
5. Responsive Behavior: Maintains table layout integrity during resize operations
6. Pagination Integration: Column widths are preserved across page breaks
7. Percentage-based Sizing: Column widths are stored as percentages for consistent rendering

Column Size Storage

When you resize columns, the widths are automatically stored in the table’s columnSize attribute as comma-separated percentages:

// Example: 4 columns with different widths
"columnSize": "9.1,39.41,21.79,29.7"
// Column 1: 9.1% width
// Column 2: 39.41% width
// Column 3: 21.79% width
// Column 4: 29.7% width

This ensures that:

• Column proportions are maintained across different screen sizes
• Pagination preserves the exact column layout
• Tables render consistently in print and digital formats

Usage

With Pagination Support

For advanced table functionality with pagination and column resize, use the PaginationTable extension:

editor.tsx

import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { PaginationTable } from 'tiptap-table-plus';
import { PaginationPlus } from 'tiptap-pagination-plus';
import { editorContent } from "./editorContent";

const { TableCellPlus, TableHeaderPlus, TableRowPlus, TablePlus } = PaginationTable;

const editor = useEditor({
  extensions: [
      StarterKit,
      TablePlus.configure({
      resizeHandleStyle: {
          background: "gray",
      },
      }),
      TableRowPlus,
      TableCellPlus,
      TableHeaderPlus,
      PaginationPlus
  ],
  content: editorContent,
});

editorContent.ts

export const editorContent = {
"type": "doc",
"content": [
  {
    "type": "table",
    "attrs": {
      "columnSize": "9.1,39.41,21.79,29.7" // Column widths as percentages
    },
    "content": [
      {
        "type": "tableRow",
        "content": [
          {
            "type": "tableHeader",
            "attrs": {
              "colspan": 1,
              "rowspan": 1,
              "colwidth": null
            },
            "content": [
              {
                "type": "paragraph",
                "content": [
                  {
                    "type": "text",
                    "text": "ID"
                  }
                ]
              }
            ]
          },
          // ... more columns
        ]
      }
      // ... more rows
    ]
  }
]
};

Example

Table Content Structure

When using pagination with column resize, the table content includes column sizing information:

Configuration Options

The TablePlus extension supports various configuration options for column resize:

import { TablePlus } from 'tiptap-table-plus';

const editor = new Editor({
  extensions: [
    TablePlus.configure({
      resizeHandleStyle: {
        background: "gray", // Customize resize handle appearance
        width: "4px",
        opacity: 0.7,
      },
    }),
  ],
});

Resize Handle Styling

Customize the appearance of resize handles with the resizeHandleStyle option:

TablePlus.configure({
  resizeHandleStyle: {
    background: "#007bff", // Handle color
    width: "4px",          // Handle width
    opacity: 0.8,          // Handle opacity
    borderRadius: "2px",   // Handle border radius
    hoverOpacity: 1.0,     // Opacity on hover
  },
})

Troubleshooting

Common Issues

Resize handles not appearing:

• Ensure the table has proper CSS positioning (position: relative)
• Check that the resizable option is enabled in configuration
• Verify that table cells have the correct structure

Resize not working smoothly:

• Check for CSS conflicts that might interfere with drag operations
• Ensure proper event handling is in place
• Verify browser compatibility

API Reference

TablePlus Configuration

Option	Type	Default	Description
resizeHandleStyle	object	{}	Custom styling for resize handles

Resize Handle Style Options

Option	Type	Default	Description
background	string	"#007bff"	Background color of resize handles
width	string	"4px"	Width of resize handles
opacity	number	0.8	Opacity of resize handles
borderRadius	string	"2px"	Border radius of resize handles
hoverOpacity	number	1.0	Opacity when hovering over handles

Links:

• NPM
• GitHub