Stack Overflow
Stack Overflow

Questions tagged [react-bootstrap-table]

react-bootstrap-table (now react-boostrap-table2) is a react.js table based on the bootstrap's style. It's a configurable, functional table component and make you build a Bootstrap Table more efficiency and easy in your React application.

react-bootstrap-table is a react.js table plugin based on the bootstrap's style. It's a configurable, functional table component and make you build a Bootstrap table more efficiency and easy in your React application. Currently, react-boostrap-table is on version 2 after the original project/version became deprecated.

Here is a partial list of supported features:

  • striped, borderless, condensed table
  • column align, hidden, width, sort, title
  • scrolling table
  • cell format
  • pagination
  • row selection
  • column filter with multi type
  • cell edit with multi type editor
  • insert & delete Row
  • table, row and column styling
  • global search
  • export to CSV
  • rich function hooks
  • large columns table
  • header column span
  • remote mode
  • expandable row
379 questions
3
votes
0 answers

How do you add table footers with react-bootstrap-table?

In the latest release of react-bootstrap-table (4.1.5), there is a React component called TableFooter which I presume allows you to add a footer to the bottom of a table. There is an example of how to use it listed in the source (although not in the…
Craig Curtis
  • 853
  • 10
  • 24
3
votes
1 answer

How to make only text of react bootstrap table header clickable

Code: Column With this the whole area of the column is clickable, I just want the text and the chevron to be clickable, how can I achieve that. This image show that the whole…
userNotHere
  • 97
  • 1
  • 2
  • 11
3
votes
0 answers

vertical align content in react-bootstrap grid row

The centers of the text for the labels and status are not aligning with the centers of the text for the buttons. I am using react-bootstrap. A picture shows the issue better than text: How can I align the centers, I tried a style sheet, as…
Dr.YSG
  • 7,171
  • 22
  • 81
  • 139
3
votes
2 answers

Is there a way to change the pagination styling for a react-bootstrap-table?

The default styling for the pagination row in react-bootstrap-table uses the bootstrap grid column sizing class names (like "col-xs-6"). We're using a different sized grid that the default (60 instead of 12) so the pagination elements end up…
Gregory Bell
  • 1,861
  • 1
  • 19
  • 21
3
votes
1 answer

react-bootstrap-table filter shows bad and headers are not aligned to data

im building a web app using a node js server with babel and react js. in some pages im using the react-bootstrap-table tag in order to create a table (as shown below) that includes built-in filters of data, and i have 2 main problems: 1. the headers…
Shahaf Stein
  • 165
  • 2
  • 14
3
votes
1 answer

How do I turn part of Redux store into an array

Okay, here's the pickle that I'm in, one of my actions in actions/index.js is: export function requestPeople() { return (dispatch, getState) => { dispatch({ type: REQUEST_PEOPLE, }) const persistedState = loadState() // just…
Clay_F
  • 561
  • 1
  • 6
  • 17
2
votes
0 answers

mdbreact datatable pagination issue

Im using mdbreact package to display the data in a datatable. In the datatable I have a column with checkbox to change the value. When I check or Uncheck and move to the second page, the values of the checkbox in the second page is also changing.…
Minsaf
  • 272
  • 1
  • 5
  • 14
2
votes
0 answers

How do I make my react-bootstrap-table-next maintain the same column width for all screen resolutions (Mobile responsive)?

I am using the BootstrapTable component from react-bootstrap-table-next. I am trying to create a page where this table must use the entire width of the screen. If the screen resolution drops down to iPad and mobile, the table must be scrollable.…
Sachin Prasanna.M.L
  • 21
  • 2
2
votes
1 answer

How do I use search in react?

I want to search by holiday name on the holiday list coming from the API. The user should be able to select the line with the name of the holiday s/he is looking for by clicking on it after seeing it in the crud table list. I want the user to find…
efnan
  • 48
  • 8
2
votes
1 answer

in react-bootstrap - SyntaxError
I'm working on a React project using react-bootstrap, and having a problem when trying to add JSX before of after the
part. Someone familiar with that problem? return (

My Schedule

…
Yonatan
  • 23
  • 4
2
votes
1 answer

How to Control boolean field in react-bootstrap-table-next

Suppose in an API I have a boolean value eg. mission_status: true, or mission_status: false. And I use react-bootstrap-table2 to create table. Since it copies whatever data is there in the array of object into a table row. I want to display…
ritik jain
  • 540
  • 1
  • 5
  • 13
2
votes
0 answers

React bootstrap table2 expanding one row updating the value of all the expanded rows with the latest value

I have a requirement to call the API to retrieve the value and show value when the expand row is selected. Each row is having a different value which is received by using an API. For example: There are ten rows displayed on the dashboard with…
Siva Bankapalli
  • 21
  • 2
2
votes
1 answer

react-bootstrap-table2 how to use multiple datafields in a column

const columns = [{ dataField: 'firstName', text: 'Visitor Name' }, { dataField: 'lastName', text: '' },]; Here firstName and lastName should be in one…
Shashank motruri
  • 21
  • 8
2
votes
1 answer

noDataText in react-bootstrap-table-next does not work

I need to show "There is no data to display" in the table body. I am now using react-bootstrap-table-next which is an advanced version of react-bootstrap-table import BootstrapTable from 'react-bootstrap-table-next' ...
NinjaDev
  • 402
  • 2
  • 6
2
votes
1 answer

How to add Horizontal Scrollbar in a React Bootstrap Table?

I am using React Bootstrap Table and I want to add Horizontal Scrollbar only to the last two columns. Last two columns should be wrapped in a scrollable container. How can we implement this? const columns = [{ dataField: 'id', text: 'Product…
Kunal Tyagi
  • 2,341
  • 1
  • 15
  • 26
1 2
3
…
25 26