AllenFang/react-bootstrap-table

tabindex and Keyboard handlers upon a Row

Open

#1220 opened on Apr 12, 2017

View on GitHub
 (6 comments) (0 reactions) (0 assignees)JavaScript (2,240 stars) (795 forks)batch import
help wantedin progress

Description

Hi, first, thanks for the feature-ful library!

I'm migrating to react-bootstrap-table from an older Backgrid solution and have come across an issue when replicating navigation from a row. In my old tables, you were able to highlight a row like so... 2017-04-12 at 12 36 pm ...where pressing enter would trigger a row handler and to allow a behavior.

In react-bootstrap-table I get a selection around the selection checkbox but I don't seem to be able to perform the similar action upon the row.

2017-04-12 at 12 46 pm

The row itself needs a tabindex attribute to enable this. I also don't seem to be able to add a keyboard handler to a row (I've found keyBoardNav in the source but it's undocumented).

So two questions:

  1. Is there currently a way to add a tabindex to a tr instead of a td?
  2. Is there a way to add a keyboard event handler to a row?

Many thanks.

Contributor guide

Tech stack
javascriptreact
Domain
frontendaccessibility
Issue type
feature
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.
mostly clear
Prerequisites
None
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
45
Research direction
Investigate the current row rendering logic in the codebase, specifically in the BootstrapTable component. Look for where the <tr> elements are created, likely in a method like renderRow. Check if there is any existing keyboard navigation support (e.g., keyBoardNav prop) and how row events are handled. The issue asks for adding a tabindex attribute to the <tr> and binding keyboard event handlers. Consider implementing a new prop like rowKeyboardEvents or extending the existing rowEvents prop to include onKeyDown. Review similar libraries or past PRs for patterns.