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
9
votes
3 answers

react-bootstrap-table-next dependency tree issue

I am receiving an error when to installing npm install react-bootstrap-table-next --save. I do not not understand what it is telling me nor how to resolve, any guidance appreciated: the error: $ npm install react-bootstrap-table-next --save npm ERR!…
trig79
  • 384
  • 3
  • 12
7
votes
2 answers

How to sort react-bootstrap Table component

I'm new to React and am using the Table component from react-bootstrap. I want to sort my table in ascending order of the 'Days Till Expiry' column. But the Table component doesn't have a sorting property, does anyone know how I could do this?
tnoel999888
  • 584
  • 3
  • 12
  • 29
7
votes
3 answers

Unable to access nested fields in react-bootstrap-table

The Mongo database could return an array with nested data. I'd like to display the data contained in: {applications: {data: {description: 'My description}}} But it doesn't work at all. Do you have an idea about how to do, I found nothing in doc nor…
Vincent
  • 483
  • 4
  • 16
6
votes
2 answers

I am trying to use rowEvents to trigger an action in react-bootstrap-table-2 but 'this' in the onClick is undefined. Any ideas?

Here is the codeblock: const expandRow = { renderer: row => (
…
PraJaL
  • 136
  • 8
6
votes
0 answers

React-bootstrap-table: Warning: Component's children should not be mutated

I use this short example snippet in my code Product ID Product Name
olegzhermal
  • 799
  • 10
  • 26
6
votes
2 answers

How to edit react bootstrap table and save data after editing

how to edit table directly on the browser page and save data after reloading page. The table is made using react bootstrap table.screenshot of project is here.edit and save like in screenshot code of my project is here. onAfterSaveCell(value,…
Pawan Bhusal
  • 131
  • 1
  • 1
  • 6
5
votes
1 answer

Expand row by column : Expand row by multiple columns and load different components according to the column clicked

I am following below example to implement "expand row by column". /* eslint max-len: 0 */ import React from 'react'; import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; const products = []; function addProducts(quantity) { …
zubug55
  • 729
  • 7
  • 27
5
votes
4 answers

I don't have border on react-bootstrap-table-next

I use react-bootstrap-table-next in this way: import React, { Component } from 'react'; import products from './data.js'; import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'; import BootstrapTable from…
tesicg
  • 3,971
  • 16
  • 62
  • 121
5
votes
1 answer

Alternating Background Color react-bootstrap-table

I am using react-bootstrap-table and I am trying to alternate the background color. The documentation leaves it a bit unclear what type of data in particular goes into it's implementation of the conditional rendering function so I cannot receive the…
Ryan Cocuzzo
  • 3,109
  • 7
  • 35
  • 64
5
votes
3 answers

How can I make my React app render Bootstrap tables with crud

I'm using the following code to generate a simple UI, and I'm trying to convert it to use Bootstrap. This is my original code (using Skeleton); render:function(){ return (
user6171746
5
votes
3 answers

React bootstrap table with tooltip

I am using a react bootstrap table to display some data stored in the info array.
Mahdi
  • 1,778
  • 1
  • 21
  • 35
4
votes
2 answers

react-bootstrap-table-toolkit Search Import Error

I wanted to use React Bootstrap Table in my project and I'm getting the following error. Uncaught ReferenceError: arguments is not defined at Object../node_modules/react-bootstrap-table2-toolkit/lib/src/search/SearchBar.js here is the following…
Narek Grigoryan
  • 369
  • 3
  • 7
4
votes
1 answer

React-Bootstrap-Table-Next Sort Alphanumeric Strings on Dynamic Table

I have a dynamic table that generates 70+ columns in React-Bootstrap-Table-Next. I'm running into a problem trying to sort the columns in alphanumerical order (some columns are numbers and some columns are letters). The data being fed into the…
pt2t
  • 431
  • 1
  • 7
  • 16
4
votes
2 answers

Borderless table react-bootstrap-table

I am trying to make my react-bootstrap-table table fully borderless and have checked out all their docs and GitHub issues but haven't been able to get a fully borderless table. Here's what I have: In my CSS: .react-bs-container-header tr { …
Ryan Cocuzzo
  • 3,109
  • 7
  • 35
  • 64
4
votes
2 answers

Trouble with react-bootstrap-table width

I use react-bootstrap-table and need the vertical scroll. My code: Product ID
sf_
  • 1,138
  • 2
  • 13
  • 28
1
2 3
…
25 26