react-bootstrap-table/react-bootstrap-table2

Support have multiple same columns in one table

Open

#218 opened on Feb 20, 2018

View on GitHub
 (6 comments) (0 reactions) (0 assignees)JavaScript (1,249 stars) (415 forks)batch import
good first issuehelp wanted

Description

I have run into an issue where I have two columns with different headings pointing to the same dataField. One of these columns is visible on desktop and has the full name and the other one is visible on mobile and contains an icon instead to cut down on space. The columns are made hidden and visible using the bootstrap classes 'visible-xs' and 'hidden-xs'.

It seems that the key for the header cells is based simply on the contents of the dataField element and in my case this throws and error.

For reference here is the full error message:

Encountered two children with the same key, 'status'. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. in tr (created by Header) in thead (created by Header) in Header (created by BootstrapTable) in table (created by BootstrapTable) in div (created by BootstrapTable) in BootstrapTable (created by PaginationWrapper) in PaginationWrapper (created by SortWrapper) in SortWrapper (created by BootstrapTableContainer) in BootstrapTableContainer (created by StockListTile) in div (created by Row) in Row (created by StockListTile) in div (created by Col) in Col (created by StockListTile) in StockListTile (created by Connect(StockListTile)) in Connect(StockListTile) (created by ProjectPage) in div (created by Row) in Row (created by ProjectPage) in div (created by Grid) in Grid (created by ProjectPage) in div (created by ProjectPage) in div (created by ProjectPage) in div (created by ProjectPage) in ProjectPage (created by Connect(ProjectPage)) in Connect(ProjectPage) (created by LoadableComponent) in LoadableComponent (created by Route) in Route (created by routes) in Switch (created by routes) in routes (created by _default) in div (created by _default) in Router (created by BrowserRouter) in BrowserRouter (created by _default) in _default in Provider in AppContainer

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic React knowledgeFamiliarity with react bootstrap table2
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
The issue is about duplicate keys when using the same dataField for multiple columns. Look at how keys are assigned to header cells in the Header component (likely in src/header.js or similar). The key should be unique, possibly combining dataField with a column index or a unique identifier. Check the comments for any proposed solutions. A fix would modify the key generation to ensure uniqueness per column, not just based on dataField.