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

check boxes are not functioning in react-bootstrap-table-next

I am using react-bootstrap-table2, to make tables, I have encounter an issue i.e I want o have a checkbox inside my table, so I am following This, mention in the documentation, but I am getting unexpected result. My code For selecting the row const…
vivek singh
  • 417
  • 2
  • 12
  • 36
2
votes
2 answers

adding a delete button

I created a search app where users can search movies and it will be shown in the table. However, I want a delete button in the last column in each movie row to delete a movie from the table. I'm being unable to do that. Can someone help me as to how…
user14008727
2
votes
2 answers

Sticky column headers in react-bootstrap-table-next

Want some help over here, I am new for react js hence needed a quick push to get my query resolved. I am displaying API response in the form of table on UI, here I am using react-bootstrap-table-next which gives lot of readily available features,…
UtkarshaG
  • 389
  • 1
  • 5
  • 19
2
votes
1 answer

React-bootstrap-table - Expand component only after row click and not by default

I am using react-bootstrap-table for expanding the row and displaying the data inside it. This is my code: class PhoneSystem extends Component { isExpandableRow(row) { if (row.uniqueid > 0) return true; else return false; } //this is…
Nikunj V
  • 271
  • 4
  • 18
2
votes
1 answer

REACT: Customize checkbox to show/hide columns of a table

I'm trying to customize the buttons selectors of columns with checkboxes. The table is made it with import BootstrapTable from "react-bootstrap-table-next"; import ToolkitProvider from "react-bootstrap-table2-toolkit"; I have creacted the…
José Carlos
  • 2,850
  • 12
  • 59
  • 95
2
votes
1 answer

React Bootstrap Table2 sorting and search

I am using React-Bootstrap-Table-2 for developing table displaying and etc So today I already successfully added the table into my code, now I would like to add two features both sorting and search function on top of the table header My code as…
Lawraoke
  • 540
  • 5
  • 25
2
votes
0 answers

Edit row on Edit button click in 'react-bootstrap-table-next'

I am trying to implement a table using 'react-bootstrap-table-next'. I want the row to be editable only after the click of the 'edit' button. Currently, with my code on click of the cell, the cell is changed into an editable cell. Screenshot of what…
Avi
  • 102
  • 1
  • 9
2
votes
1 answer

Partial and Dynamic data loading using pagination in React Bootstrap Table

I would like to update the data partially/dynamically using the pagination click. codesandbox On the initial load, I would like to render 100 records(DB has more data) and the pagination has to work normally without calling the API. Once it user…
kabeer rifaye
  • 417
  • 2
  • 8
  • 18
2
votes
1 answer

Programmatically Filter with function component, impossible to get the filter - react-bootstrap-table-2

I'm trying to implement a custom filter using react bootstrap table 2 in a function component, but when I use the getFilter function to get access to the filter, the setFilter didn't work and filter.text stay at null const ExempleTable = () => { …
Nicolas Menettrier
  • 1,647
  • 1
  • 13
  • 28
2
votes
1 answer

Disable/Remove Pagination numbers from React Bootstrap Table

I would like to remove all the numbers(1,2,...,n) from the pagination. I just want to display the Prev, First, Next and Last Buttons. Here is the Table component created using the react-bootstrap-table. An attached working example of code…
kabeer rifaye
  • 417
  • 2
  • 8
  • 18
2
votes
1 answer

How to wrap a long text in table cell (react-bootstrap-table-next)?

I am introduced to react/redux/sagas/redux-form web application development. I used react-bootstrap-table-next in order to display data in a table format. It has two columns as Title, Description however data for Title column is a long string…
DaeYoung
  • 1,161
  • 6
  • 27
  • 59
2
votes
0 answers

Table layout changed after navigating to a specific route then navigating back

I have a table with with children expanded row (The row with caret is parent row and below it are its children) like the image below: In this image, the dots (regardless green or red) of parent rows and children rows are in ordered. But, after…
thelonglqd
  • 1,805
  • 16
  • 28
2
votes
1 answer

How do I get a react-bootstrap-table2 caption to be above the table instead of below it?

I tried using the code in the react-bootstrap-table2 "Table with caption" example, but my caption is below the table. I found this answer: "That's because bootstrap 4 has default caption css style - caption-side: bottom", but it's not about…
Daryl Spitzer
  • 143,156
  • 76
  • 154
  • 173
2
votes
2 answers

Could not find a declaration file for module 'react-bootstrap-table-next'

I'm trying to run 'react-bootstrap-table-next' with my reactjs app. I'm having a problem root@ubuntu:/home/rin/sc-deal/client# npm install @types/react-bootstrap-table-next root@ubuntu:/home/rin/sc-deal/client# npm install…
Rin
  • 81
  • 2
  • 9
2
votes
1 answer

How to disable form control button due to bootstraptable validation failure

I have a react component that contains a form and a bootstrap table. The form contains a submit button that I'd like to disable if the input to the table cells fail to pass validation. I've implemented the validators, but I can't find a way to tie…
omer
  • 1,242
  • 4
  • 18
  • 45
1 2 3
…
25 26