Table Column Resize | Tiptap Table Plus

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 appropriate extension based on your Tiptap version:

Tiptap V3

editor.tsx

import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
import { TableKitPlus } from 'tiptap-table-plus';
import { PaginationPlus } from 'tiptap-pagination-plus';
import { editorContent } from "./editorContent";

const editor = useEditor({
  extensions: [
      StarterKit,
      TableKitPlus.configure({
        resizeHandleStyle: {
          background: "gray",
        },
      }),
      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
    ]
  }
]
};

Tiptap V2

editor.tsx

import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import {
TablePlus, TableRowPlus, TableCellPlus, TableHeaderPlus
} from "tiptap-pagination-plus";
import { PaginationPlus } from 'tiptap-pagination-plus';
import { editorContent } from "./editorContent";

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 table extension supports various configuration options for column resize. The configuration syntax is the same for both versions, but the import differs:

Tiptap V3

import { Editor } from '@tiptap/core';
import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
import { TableKitPlus } from 'tiptap-table-plus';

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

Tiptap V2

import { Editor } from '@tiptap/core';
import {
TablePlus, TableRowPlus, TableCellPlus, TableHeaderPlus
} from "tiptap-pagination-plus";

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

Resize Handle Styling

Customize the appearance of resize handles with the resizeHandleStyle option:

Tiptap V3

TableKitPlus.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
},
})

Tiptap V2

import {
TablePlus, TableRowPlus, TableCellPlus, TableHeaderPlus
} from "tiptap-pagination-plus";

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

Table Configuration

The configuration options are the same for both Tiptap V2 and V3, but the extension names differ:

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

Note:

• For Tiptap V3, use TableKitPlus.configure() (from tiptap-table-plus)
• For Tiptap V2, use TablePlus.configure() (from tiptap-pagination-plus)

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