lexical icon indicating copy to clipboard operation
lexical copied to clipboard

Feature: Automatically Adjust Table Column Widths Based on Content for New Tables

Open AlessioGr opened this issue 1 year ago • 2 comments

Problem Description

When a new table is created—whether through copy-pasting, markdown imports, or by loading fresh editor JSON without defined column widths—it often appears poorly formatted by default. Specifically, the column widths are not automatically adjusted to fit the content, leading to tables that are difficult to read and require manual resizing.

For example, in our project, we use markdown as the source of truth, which means we do not store column widths. As a result, every time a document is loaded into the editor, users have to resize table columns repeatedly, which is inefficient and frustrating.

Proposed Solution

To improve the user experience, the editor should automatically calculate and apply column widths based on the table's content whenever no explicit widths are provided.

Screenshots

Current Behavior:

When a table is created without specified column widths, the columns appear misaligned, as shown below:

CleanShot 2024-12-30 at 18 06 25@2x

Desired Behavior: For comparison, when the same table is pasted into Notion, the column widths are automatically adjusted to fit the content:

CleanShot 2024-12-30 at 18 09 06@2x

AlessioGr avatar Dec 31 '24 01:12 AlessioGr

This isn't really something in lexical's table implementation, this is the TableCellResizer plugin's doing… which is just a playground plugin and not something that's distributed for re-use. I would recommend modifying your copy of the plugin according to your use case, e.g. disabling the transform that sets the default width on every column and coming up with your own scheme.

etrepum avatar Dec 31 '24 03:12 etrepum

I am facing something similar, when I use node replacement to replace TableCellNode, it seem TableCellNodes are using fixed size of 75px. I could not find a way to set column size based on max content size. Also, when I do as following code. It does not work, though minWidth property seem to work.

createDOM(config) {
    const element = super.createDOM(config)
    element.style.width = '100px'
    return element
  }

I am not using any plugins. Core lexical and lexical/table in Fastify app.

SahilFruitwala avatar Sep 10 '25 20:09 SahilFruitwala