react-component / react-component/table

Table with dnd fails if any column has fixed prop

Open
#264 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.4k
Forks
618
Avg merge
10h 19m
Merged PRs (30d)
2

Description

Reproduction link

Edit on CodeSandbox

Steps to reproduce

line 112 removing it will work fine

What is expected?

dnd should not be broken

What is actually happening?

BodyRow is trying to access rowRef of row even before row is rendered by react-dnd (created from render(null) --> compDIdMount --> setState --> render(row)) where as TableRow componentDidMount is called after above 2nd step therefore accessing rowRef is undefined in BodyRow
failing here https://github.com/react-component/table/blob/4f9071cdc50c74216d888ca1c58716f32a57d5cc/src/TableRow.js#L135


a check here to see if this.rowRef is ready then proceed works imo
https://github.com/react-component/table/blob/4f9071cdc50c74216d888ca1c58716f32a57d5cc/src/TableRow.js#L159

Created this issue with Antd-Design initially but since code changes are required here opening here

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with src/TableRow.js at the linked references around lines 135 and 159, then reproduce the failure using the linked CodeSandbox with a fixed column. Trace when BodyRow accesses rowRef relative to TableRow mounting. Done means drag-and-drop remains functional when any column uses the fixed prop.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.