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

How to add href to react-bootstrap-table column dynamically?

I'm using react-bootstrap-table for datatable in react, Here am getting c=data from the backend as JSON object. How to add ahref to a column in react-bootstrap-table dynamically const data = [ { id: 0, name: 'John Doe', registered:…
Abhiram
  • 1,540
  • 1
  • 11
  • 25
2
votes
2 answers

Trouble with defaultSorted and React Bootstrap table Next

I have created a table with react bootstrap table next and I try to use the defaultSorted features. Here is an example from the doc: import BootstrapTable from 'react-bootstrap-table-next'; const columns = [{ dataField: 'id', text: 'Product…
C0G1T0
  • 350
  • 1
  • 5
  • 17
2
votes
1 answer

Warning: validateDOMNesting(...):

I have this code. This and more is in the return statement of the render() method
Alex Ironside
  • 4,658
  • 11
  • 59
  • 119
2
votes
1 answer

How to make a column as clickable in a react bootstrap table and avoid showing it as text field in "Add Row"?

I referred to the following to make a column in my react bootstrap table clickable: How to add a button inside every row under a particular column in Bootstrap React Table? But when i using the "Add New Row" button, the column in my react bootstrap…
Rahul Alapati
  • 21
  • 3
2
votes
1 answer

Date formatting within react bootstrap table

I am trying format the date in the column below as 'DD/MM/YYYY' and also the header row is not aligned with the data, how to fix this? I am using the function function dateFormatter(cell: any) { var d = (moment(new…
Mostafa
  • 169
  • 1
  • 3
  • 12
2
votes
1 answer

Create clickable buttons on react-bootstrap-table on cell

I am trying to load a modal on click of 'Click here to view' Button in react-bootstrap-table Can anybody help me? How can I load a modal onClick of cell
bhuwan
  • 105
  • 1
  • 1
  • 7
2
votes
2 answers

Extend TypeScript 2.5.2 Component Props definition in a separate definition file

I have downloaded a NPM package called react-bootstrap-table with type definitions. https://www.npmjs.com/package/react-bootstrap-table https://www.npmjs.com/package/@types/react-bootstrap-table Unfortunately the types are outdated and a prop…
Ogglas
  • 62,132
  • 37
  • 328
  • 418
2
votes
0 answers

How to remove focus on a cell in a React-Bootstrap-Table?

The problem I'm having is that if a user clicks to edit a cell but then does something on another view that re-renders the BootstrapTable, the cell is still focused and retaining the old value until the user clicks somewhere else on the table. I…
azulBonnet
  • 831
  • 4
  • 14
  • 31
2
votes
2 answers

REST API: Infinite scroll pagination in the GUI, but allow searching through all entries

I have Express running in a Node.js server, which serves as a backen for my React frontend application. The frontend application fetches data from the backend (which is stored in Mongo) through a REST call, and display this data in a table. The…
kenneho
  • 401
  • 1
  • 7
  • 24
2
votes
1 answer

onRowMouseOver not triggering in react-bootstrap-table

My table is:
Shamoon
  • 41,293
  • 91
  • 306
  • 570
2
votes
1 answer

How to insert data into firebase by using react-bootstrap-table insertRow?

I am having trouble modified insertRow function to insert data into firebase. I attend to do so when user click at the handleSaveBtnClick(). I have been spent the last 2 days on this problem, Please point me in the right direction, Many Thanks. I am…
y.Doe
  • 1,217
  • 1
  • 8
  • 7
2
votes
0 answers

react-bootstrap-table, checkbox and textfield

couldn't find anything what relates to my problem hopefully someone has a link or the right answer. Currently learning reactjs and trying to create a react-bootstrap-table to display some data. So the problem I have is with the checkBox. The first…
Philipp G.
  • 21
  • 1
  • 5
2
votes
2 answers

react-bootstrap-table: How to handle key fields with database generated values?

I am writing a CRUD application using react-bootstrap-table to edit records stored in a database table. The primary key is database generated (an int field that gets an incremented value when inserting the record in the database). The…
Jürgen Bayer
  • 2,993
  • 3
  • 26
  • 51
2
votes
1 answer

How to programmatically set the height of a BootstrapTable element?

I need to programmatically set the height of a BootstrapTable element (because I want to ensure that the table takes the available space up to the bottom of the browser window). I tried to set the CSS property height of the div with the CSS class…
Jürgen Bayer
  • 2,993
  • 3
  • 26
  • 51
2
votes
1 answer

how add react-loading in react bootstrap table

i'm new in reactjs and react bootstrap table. i want add react-loading in my react component before data show. because data show so long. but doesn't work. this is my code import React, { Component } from 'react'; import { BootstrapTable,…
Quinn
  • 697
  • 1
  • 10
  • 25
1 2 3
…
25 26
Imie Nazwisko/Nazwa firmy