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
4
votes
1 answer

create-react-app to import css from node-module

I'm quite new to react. I've just started following instructions and experimenting with create-react-app. After create a empty application, I tried to add a grid which is from react-bootstrap-table. Very simple codes below: import…
AlHecka
  • 81
  • 1
  • 5
4
votes
1 answer

How do I do conditional columns with React Bootstrap Table?

In my render method of my WorkbookList component, I have render() { const tableHTML = (
Shamoon
  • 41,293
  • 91
  • 306
  • 570
4
votes
1 answer

react-bootstrap-table search on nested fields

Hello I'm using the react-bootstrap-table module to display some data in my page and I want to use the search function to filter the results by specific columns. Here's a snippet of my render function: render() { function showOSName(cell, row)…
Tuco
  • 902
  • 3
  • 18
  • 33
4
votes
1 answer

Access props outside class

I'm using react-bootstrap-table with cellEdit enabled. It is possible to use a callback function in react-bootstrap-table after the cell has been edited. I've named the callback function onAfterSaveCell. The updated row in table will be saved to a…
g3blv
  • 3,877
  • 7
  • 38
  • 51
3
votes
5 answers

How to push elements to react hooks state array

I am using react-bootstrap-table2 to make HTML tables, I am using a checkbox inside my table to delete the items. SO as per This link, it is mentioned how to get the selected row and then do the next part, here what I am doing is when I click on any…
vivek singh
  • 417
  • 2
  • 12
  • 36
3
votes
0 answers

Error: filter is not defined while assigning a custom Text filed input as filter to react-bootstrap-table2-filter component

I am trying to customize Input Text field of react-bootstrap-table2-filter similar option available at …
Dhrubo
  • 705
  • 1
  • 14
  • 33
3
votes
2 answers

Expand React Bootstrap Table for more granular data

I have a react bootstrap table that displays information about a manager's sales, grouped by manager so I can see their overall performance. I would like to add the capability of clicking on a row and having the table expand to include the data at…
ErrorJordan
  • 611
  • 5
  • 15
3
votes
0 answers

Data not updating in react-bootstrap-table2

I am using react-bootstrap-table2 for rendering the data into table. say there are three fields in the table "Quantity" , "Cost Price" , "Total Price" and the value of "Total Price" is ...Total Price= Cost Price * Total Price so on the initial…
Syed Hussain Mehdi
  • 1,168
  • 1
  • 11
  • 15
3
votes
0 answers

How to change the background color of a Cell in React Bootstrap Table 2 without having to refresh the page?

I am using React Bootstrap Table 2 to display a list of data. I have used a custom formatter for a cell which displays the data in a button. I am looking to change the background of this cell based on the value of a state property of the current…
Raxak
  • 389
  • 3
  • 17
3
votes
4 answers

Redux store doesn't update on first button click

I want to use redux but still control what's being rendered in bootstrap-react-table through my local state. So, in componentDidMount I'm fetching my data and when I try to filter through a button click I setState to a field named "itemsToDisplay",…
Gordon
  • 59
  • 9
3
votes
2 answers

unique key prop error in bootstrap-react-table2

I have react-bootstrap-table2 and my expandRow function is generating tags with attributes. When I expand data, I can see error Warning: Each child in a list should have a unique "key" prop. Check the render method of `Context.Consumer`. in…
13Akaren
  • 225
  • 3
  • 16
3
votes
0 answers

How to validate rows programmatically in react-bootstrap-table2 component?

I am using the react-bootstrap-table2 component ? Following is my working of grid: When user clicks the button, it will add one row dynamically. For each column in that row I have written validation function. I have added another button called as…
user1441238
  • 165
  • 1
  • 2
  • 10
3
votes
2 answers

React Bootstrap Table (Version2): Adding Html Buttons

this is my first time to use React Bootstrap table Version 2 and I'm starting bulding CMS and my plan is to list all inserted mail to the data table. I already list all value from database. however the problem is how to put the buttons to the column…
DevGe
  • 1,381
  • 4
  • 35
  • 66
3
votes
1 answer

react-bootstrap-table - formatting - row height, text wrap

I am working with react-bootstrap-table and I am facing problems with formatting it. Main issues are: the headers with long names should be presented with 2 lines of text, instead there is one and "..." like in the picture below: Moreover in no…
jake-ferguson
  • 315
  • 3
  • 11
  • 32
3
votes
0 answers

Is it possible to specify a row component in react-table or react-bootstrap-table?

I'm in the process of migration a lot of tables in my project from simple HTML tables ,styled with bootstrap 4, to a more sophisticated solution, like the ones offered by react-table or react-bootstrap-table. The problem is that from what I've seen…
eddy
  • 4,373
  • 16
  • 60
  • 94
1
2
3
…
25 26