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
0 answers

get data from json file in react table bootstrap

I have a data grid from react bootstrap table http://allenfang.github.io/react-bootstrap-table/start.html. i want to get data from external json file. i have tried this but in my table there is no data. where i do wrong? c lass Grid extends…
Yeganeh Salami
  • 575
  • 7
  • 29
0
votes
2 answers

How to handle event function inside object attribute?

Hello I'm using bootstrap-table for a web app where I need to transition to another url when a table row is clicked. "On row click" events are handled through an object attribute called onRowClick where you assign it a function which takes the row…
Tuco
  • 902
  • 3
  • 18
  • 33
0
votes
1 answer

React bootstrap table show number of rows

How do I show the number of rows in a table using react bootstrap table. Additionally, I am using the search parameter to filter the table, so would like the number of rows to update as the table data is filtered.
SeanPlusPlus
  • 8,663
  • 18
  • 59
  • 84
0
votes
1 answer

Equal width and height cell in react-bootstrap Grid

I'm trying to make the div cells in react-bootstrap Grid have automatically equal width and height. The content size of these cells will vary and so will the width of the entire grid. The goal is to make it responsive and independent of the size of…
Peter G.
  • 7,816
  • 20
  • 80
  • 154
0
votes
1 answer

How to generate a header of unknown size

Given import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; import React from 'react'; var products = [{ id: 1, name: "Item name 1", price: 100 },{ id: 2, name: "Item name…
P.Brian.Mackey
  • 43,228
  • 68
  • 238
  • 348
-1
votes
0 answers

react-bootstrap-table-next.js Uncaught TypeError: _events2.default is not a constructor

I am getting this "Uncaught TypeError: _events2.default is not a constructor" error in my react project while use bootstrapTable. Description of my error is below
Prajapati Jaykumar
  • 1
  • 2
-1
votes
1 answer

Change font color of inside the react bootstrap striped table

I am using this react bootstrap table with striped rows. According to the docs, I can "Invert the colors of the table — with light text on dark backgrounds by setting variant as dark." However, the font color does not match the dark mode of my site…
ragmats
  • 91
  • 8
-1
votes
2 answers

Adding column header for the row selection column in the react-bootstrap-table-next?

Question How can I add column header for the row selection in the react-bootstrap-table-next? Screenshots Design Image Current Code Image Here is the Image for the table I just need to know that how to add the column header for the row selection.…
Coder
  • 82
  • 7
-1
votes
1 answer

How to use react-select-table's rows as options to react-select's input field

I have an input field that should accept multiple inputs from options that are already set. - This input field needs to appear like tag input fields so I used the React-select library: The set options are going to come from a react-bootstrap-table…
L.Diaz
  • 51
  • 1
  • 10
-1
votes
1 answer

Add tooltips on column headers in a React Bootstrap table

(this.node = n)} pagination={paginationFactory(optionsPag)} /> I want to add the tooltip…
Keerthi
  • 21
  • 1
  • 10
-1
votes
1 answer

How to hide data rows with certain value with a button?

I use react-bootstrap-table-next. And want to use a toggle button which hide or show rows with a certain value. But the problem is that the table content doesn't change. import BootstrapTable from 'react-bootstrap-table-next'; const products = [ …
ikreb
  • 2,133
  • 1
  • 16
  • 35
-1
votes
1 answer

Using props in a functional component

I have a React Bootstrap Table2 table functional component which gets data from a single API (at the moment) and presents the data in a table. As part of the column definition of the table I process certain values and make them links. When a user…
Stuart Brown
  • 977
  • 2
  • 22
  • 47
-1
votes
2 answers

How to navigate between Components in react from button under react-bootstrap-table 2 column

I am using React Bootstrap table 2 for displaying data from external API. As part of my table i have included a dummy column which stores a button for every row when clicked should navigate to a different component with some row information. The…
Anand
  • 361
  • 1
  • 9
  • 23
-1
votes
3 answers

Display array of product in ReactJs

I am implementing a component called Table, imported from react-bootstrap. I am currently passing data from parent to child by arrays, but I am having difficulty writing arrays through the parent class, I do not know how to write code in this…
Jin
  • 1,259
  • 1
  • 12
  • 24
-1
votes
1 answer

type is invalid -- expected a string but got: undefined

I am trying to use react-bootstrap table 2 and I would like to do column span. Here my example, Field B
lwin
  • 3,784
  • 6
  • 25
  • 46
1 2 3
…
25
26