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

Modifying row data using classes in React Bootstrap Table

I am using react-bootstrap-table-next to display my data. Here is the data I am trying to display. [ { color: "red", value: "#f00", status: "Success" }, { color: "green", value: "#0f0", …
arunmmanoharan
  • 2,535
  • 2
  • 29
  • 60
0
votes
1 answer

How to add navigable url in react bootstrap table

I am fetching data from database to react-bootstrap table in JSON format. One field is url and displayed as string. How can I change it to link and redirect to the respective site? For instance, if json.url = "www.google.com", cell should display…
usergs
  • 1,344
  • 3
  • 9
  • 18
0
votes
2 answers

Can't display my data in a react-bootstrap-table

This is my React class prior to implementing react-bootstrap-table (it works, it prints what it's it's supposed to): class ResultItem extends ComponentBase { constructor(props) { super(props); this.state = { key: null, description: '', …
MarisolFigueroa
  • 757
  • 1
  • 14
  • 31
0
votes
0 answers

React modal in react table not returning unique content for each row

I am using react-modal and react-bootstrap-table2 to display row's values in a modal. Right now the modal displays the last rows values regardless of row clicked. How do I make sure the each modal displays its own rows data? renderButtons = (cell,…
Sean Kelley
  • 491
  • 1
  • 9
  • 17
0
votes
0 answers

react-bootstrap-table how to get result of api call

I am using react-redux to do the api call. problem is how can i get the reuslt of the action once it is executed when saving/inserting new row class AddServiceForm extends Component { handleSaveBtnClick = () => { const { columns, onSave…
shorif2000
  • 2,582
  • 12
  • 65
  • 137
0
votes
1 answer

insert custom autocomplete into modal bootstrap react table

im using a module for autocompleting suggestions so a user can select some people from the database to be added to a table, it is working great on the top of a custom react table for react, the thing is that i need that autocomplete field to be on a…
sebastian velasco
  • 1
  • 1
0
votes
1 answer

How to extract table as an indipendente component

I used react-bootstrap-table lib to show tables, and I used a lot (about 10 times ) tables in my project, they all have common options like exportCSV search clearSearch ecc. It makes sense to create a common components (tags) to centralize the…
Shi
  • 510
  • 1
  • 5
  • 16
0
votes
1 answer

React 16 Form update operation makes new record instead of update the record

I have created React 16 form.I have done with display record, Add record, Delete Record.When it comes to record update, I am getting new record inserted instead of updated record.If I am passing same record values nothing happens.I have checked…
amar ghodke
  • 451
  • 4
  • 23
0
votes
0 answers

CSS bug -webkit-overflow-scrolling: touch

I am having an issue with the last three or so entries of my tables being hidden on mobile, most notably iOS. I have researched this css bug and seen multiple solutions. The issue is that this scrolling option seems to be set on about every html…
falconsAndFunctions
  • 171
  • 1
  • 1
  • 7
0
votes
2 answers

React Bootstrap Table has button in each row to create modal, but one button will call modal's render multiple times

I have a React Bootstrap Table, each page of the table has 20 records. In each row, I added a button using following line function attachFormatter(cell, row){ return ( ); }
Thomas
  • 1,805
  • 1
  • 15
  • 31
0
votes
1 answer

React Bootstrap Table can't create TableHeaderColumn with map Error. No any key column defined in TableHeaderColumn

I get the following error when I try to create TableHeaderColumn programatically using map. Uncaught Error: Error. No any key column defined in TableHeaderColumn. Use 'isKey={true}' to specify a unique column after version 0.5.4. If I don't use…
Ogglas
  • 62,132
  • 37
  • 328
  • 418
0
votes
2 answers

How to add a button inside every row under a particular column in Bootstrap React Table?

I have a React Bootstrap table(http://allenfang.github.io/react-bootstrap-table/index.html) which will get populated from data coming in from an API. I want to add a button to one of the columns and then perform operations on it. For example, once…
SeaWarrior404
  • 3,811
  • 14
  • 43
  • 65
0
votes
2 answers

Adding id's for Bootstraptable react

I am trying to add an id for the Bootstraptable tag of react-bootstrap-table module. I saw the props. there is a tablebodyclass prop in which we can set the class name. But i want the table to be unique. How shall i introduce Id for the table?
namratha Mk
  • 23
  • 5
0
votes
1 answer

react-bootstrap-table - multiColumnSearch - Require data from two columns instead of match all

I would like to modify the search in react-bootstrap-table multiColumnSearch to require data from two or more columns instead of matching all data in table. Example: ID FAMILY YEAR --------------------- 1 FAMILY-1 2010 2 FAMILY-1 …
Ogglas
  • 62,132
  • 37
  • 328
  • 418
0
votes
1 answer

Using react-bootstrap-table - Place search bar to the left

As the title says I would like to place the search bar for react-bootstrap-table to the left instead of to the right as default. Example can be found here, look at the bottom of the…
Ogglas
  • 62,132
  • 37
  • 328
  • 418
1 2 3
…
25 26