Skip to content

Conversation

@GW00234847
Copy link
Owner

@GW00234847 GW00234847 commented Feb 19, 2024

Description
When we tried to use this library on our project, we encountered some issues, so I temporarily fixed them through some scripts, I'd like to share it.
The following issues have been fixed: Page collapse issues caused by copied table:

  1. col span & row span greater than 1, if click enter, page will collapse
  2. TH element will be serialized like tr
  3. The last empty cell missing issue
  4. Link inside table cell can not correctly respond to enter event issue
  5. Drag column will cause cell height update, but left border with drag function will stay the same
  6. Some copied table with colgroup can not show column header because it just set all col width to 0.

Issue

Fixes: (link to issue)

Example

  1. & 2.
    before
    copy_table_rowspan_colspan_issue

after
copy_table_rowspan_colspan_issue_after

before
last_missing_cell

after
last_missing_cell_after

  1. Link issue
    before
    Link_enter

after
Link_enter_after

  1. Dragging column will cause cell height updating, but the left border with drag function will stay the same

before
drag_table_column

after
drag_table_column_after

  1. Copied table with colgroup can not drag column
    before
    partial_table_col

after
partial_table_col_after

Context
1: The raw HTML for the table, it will not display an empty dom cell for colspan or rowspan that is greater than 1, but just reduce the corresponding number of the cell. But in editablejs, the table will render every one of the cells even if it may ignored by the raw table. My solution is to fill the missing cell, calculate each line's colspan and rowspan, and if it is greater than 1, add another td empty element with displaynone||||||, so when displaying the cell, it will also need to check if it contains displaynone|||||| to hide that cell. Once the data structure works fit to editablejs, it works fine.
2: TH works as a cell, so just need to remove- it from TR to TD. So TH will work as expected.
3: Calculate the total cells of the first row of the table, when it comes to the final line of the table, check if the cell number fits = the same as the first row, if not, patch the missing cell.
4: when copying content into editablejs, its data structure didn't match what the editablejs requires, for it missing another wrapper outside children, it should be wrapped by children with children as the first element.
5: When dragging columns, it didn't update the height of the left border cell, however height of cells might update, whether gets smaller or higher. So it should recalculate the left border's height.
6: If the table has been wrapped inside by colgroup, it will auto-set each cols' with to 0 which finally causes column's width to 0, so what should be done is to check if there are any colgroup inside each table, and to reset each column's width to offsetWidth
Checks

  • The new code matches the existing patterns and styles.
  • The tests are exactly the same result as the original library with pnpm test.
  • The linter passes with pnpm lint. (Fix errors with pnpm fix.)
  • The relevant examples still work. (Run examples with pnpm start.)
  • You've added a changeset if changing functionality. (Add one with pnpm changeset.)

@GW00234847 GW00234847 merged commit 2e560ba into main Feb 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants