# A deep dive into the unresponsive Text Table issue

**URL:** <https://community.fibery.io/t/a-deep-dive-into-the-unresponsive-text-table-issue/8940>\
**Category:** Bugs & Issues\
**Tags:** rich-text\
**Created:** [June 6, 2025, 10:49am UTC](https://community.fibery.io/t/a-deep-dive-into-the-unresponsive-text-table-issue/8940 "2025-06-06T10:49:42Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yuri\_BC](https://sea2.discourse-cdn.com/flex020/user_avatar/community.fibery.io/yuri_bc/32/8803_2.png) [@Yuri\_BC](https://community.fibery.io/u/Yuri_BC)\
**Post date:** [June 6, 2025, 10:49am UTC](https://community.fibery.io/t/a-deep-dive-into-the-unresponsive-text-table-issue/8940/1 "2025-06-06T10:49:42Z")

</div>

## Issue

Tables are (in my experience) as good as useless in Fibery, since they require manual sizing of columns, its impossible to set a table as auto-width inside the rich text editor to keep text visible.

I tried to override with CSS, but that does not work - the reason is that ProseMirror re-renders the DOM on state changes. Here is my recommendation:

## TLDR for Devs

Fibery developers should extend the `prosemirror-tables` schema to include user-defined attributes like `maxWidth` (e.g., 100%) and `columnWidths`. Implement a UI panel for users to set table dimensions and toggle horizontal layouts for `react-beautiful-dnd` integration. A custom plugin should dynamically update table nodes based on user inputs, preventing overflow. Use `setComputedStyleColumnWidths` from `prosemirror-tables-sections` to sync widths with the editor container, ensuring responsiveness without scrollbars, as recommended by community discussions. **Key References** : [ProseMirror Tables](https://github.com/ProseMirror/prosemirror-tables), [Table Resizing Discussion](https://discuss.prosemirror.net/t/how-to-implement-table-resizing/287)

* * *

## Research results

**ProseMirror Table Handling Overview**

**What ProseMirror Does**

- Uses `prosemirror-tables` plugin
- Renders tables as HTML `<table>` elements
- Schema: table, table\_row, table\_cell nodes
- Supports rowspan, colspan, cell selection
- Applies inline styles (e.g., width) dynamically
- Re-renders DOM on state changes
- Source: [ProseMirror Tables Module](https://github.com/ProseMirror/prosemirror-tables)

**Issues Reported Online**

- Tables overflow editor window
- Inline styles override external modifications
- Non-responsive by default
- Conflicts with drag-and-drop (e.g., react-beautiful-dnd)
- Sources: [Table Width Discussion](https://discuss.prosemirror.net/t/behaviour-of-table-width-and-column-sizes/4010), [Table Horizontal Scroll](https://discuss.prosemirror.net/t/table-horizontal-scroll-after-resizing-a-column/5633)

**Community-Suggested Solutions (Non-CSS)**

- **JavaScript-Based** :
  - Custom plugins to adjust table widths dynamically
  - NodeView for custom table rendering
  - Fork: `prosemirror-tables-sections` for dynamic column width adjustments
  - Commands: `setComputedStyleColumnWidths` to sync with computed styles
  - Example: Plugin to monitor viewport, resize tables

```javascript
const responsiveTablePlugin = new Plugin({
  filterTransaction: (transaction, state) => {
    if (transaction.docChanged) {
      // Logic to adjust table node attributes based on viewport
    }
    return true;
  },
});

```

  - Sources: [Tables Sections](https://github.com/massifrg/prosemirror-tables-sections), [Table Support Issue](https://github.com/ProseMirror/prosemirror/issues/558)

- **Schema Adjustments** :
  - Modify table schema to support responsive attributes
  - Add attributes for dynamic width control
  - Source: [Table Resizing Discussion](https://discuss.prosemirror.net/t/how-to-implement-table-resizing/287)

**Official ProseMirror Solution**

- No native responsive table support
- `prosemirror-tables` provides basic table functionality
- Official docs recommend plugins/NodeView for advanced control
- Source: [ProseMirror Tables Module](https://github.com/ProseMirror/prosemirror-tables)

**Why CSS Overrides Fail**

- Inline styles from ProseMirror/React override external changes
- Dynamic DOM re-rendering discards modifications
- Source: [Table Width Discussion](https://discuss.prosemirror.net/t/behaviour-of-table-width-and-column-sizes/4010)

**Key References**

- [ProseMirror Tables](https://github.com/ProseMirror/prosemirror-tables)
- [ProseMirror Tables Sections](https://github.com/massifrg/prosemirror-tables-sections)
- [Table Width Discussion](https://discuss.prosemirror.net/t/behaviour-of-table-width-and-column-sizes/4010)
- [Table Support Issue](https://github.com/ProseMirror/prosemirror/issues/558)
- [Table Resizing Discussion](https://discuss.prosemirror.net/t/how-to-implement-table-resizing/287)