salesforce / salesforce/design-system-react

DataTableColumn id for use in duplicate keys

Open
#1,684 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

data-table
Dominant language
JavaScript
Stars
982
Forks
440
Avg merge
1d 21h
Merged PRs (30d)
4

Description

I sometimes face an issue with duplicated keys when two columns reference the same property.

const cellId = `${this.props.id}-${DATA_TABLE_CELL}-${column.props.property}`;

They are the same then, but rendering the same property in two different ways is a usecase sometimes.

As a possible fix we could change the cellId to:

const cellId = `${this.props.id}-${DATA_TABLE_CELL}-${column.props.property}-${column.props.id}`;

And allow to pass an id to a column component.

Contributor guide

Open the contributing guide

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 by locating the DataTableColumn implementation and the cellId construction shown in the issue, then inspect how column properties are used during rendering. Confirm the duplicate-key case with two columns referencing the same property, and consider the proposed column id behavior; done means distinct rendered cells no longer produce duplicate keys.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.