react-bootstrap-table/react-bootstrap-table2

Horizontal Scrolling

Open

#291 opened on Apr 2, 2018

View on GitHub
 (26 comments) (7 reactions) (0 assignees)JavaScript (1,249 stars) (415 forks)batch import
help wanted

Description

Hello,

Using react-bootstrap-table, when I set the width of the columns and they were larger than the viewport, the table created a horizontal scroll.

I just upgraded to react-bootstrap-table-2 and can't figure out how to replicate the functionality. It may be that I am using Bootstrap 4 which isnt compatible yet.

Am I missing something obvious. Any help would be greatly appreciated.

Contributor guide

Tech stack
reactjavascriptcss
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.
1-2 days
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 understanding of React componentsCSS overflow propertyBootstrap table styling
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
Investigate how the table component renders and applies horizontal scrolling. The issue states that it worked in the previous version but not in react bootstrap table2. Check the component's source code, likely in 'src/table.js' or similar, for CSS classes like 'table responsive' and overflow x handling. Ensure that column width props are correctly applied and that the container has 'overflow x: auto' when widths exceed viewport. Review any closed issues or PRs for potential solutions.