366
questions
0
votes
0
answers
65
views
Async call with react-bootstrap-table onExpand is not working
I am using react-bootstrap-table2 Row Expand Hooks. I'm trying to call function when click on the row and get data from database. However it doesn't work.
I am getting all the data in console but row ...
0
votes
0
answers
49
views
React BootstrapTable field editing issue
I'm using the BootstrapTable and TableHeaderColumn in an old React project. My problem is I have to make specific fields editable according to the kind of data I have in my DB, and when I set the ...
3
votes
1
answer
2k
views
Does react-bootstrap-table-next compatible with React 18?
I have a existing react 17 application, which needs to migrate react 18. So when migrating I faced compatible issue with react-bootstrap-table-next.
"While resolving: react-bootstrap-table-next@4....
1
vote
1
answer
226
views
react-bootstrap-table: Column formatter is not re-rendering
I have the following column formatter:
// const [shouldShowCancel, setShouldShowCancel] = useState(false);
function nameColumnFormatter(cell, row) {
var shouldShowCancel = false;
return (
...
1
vote
0
answers
218
views
I want to add a custom Header to a CSV file that I get from exportCSV of react-bootstrap-table2-toolkit
I want to add a custom Header to a CSV file that I get from exportCSV of react-bootstrap-table2-toolkit
Documentation: https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index....
1
vote
0
answers
280
views
How to use map with react-bootstrap-table-next
I'm trying to use add sorting and pagination to a HTML table by using react-bootstrap-table. I'm able to make it work on all fields except the last column where I need to map an array that has a link ...
0
votes
1
answer
175
views
the input text box focus is getting exited while navigating to the second page react-bootstrap-table2-toolkit
I am using:
"react-bootstrap-table-next": "4.0.3",
"react-bootstrap-table2-paginator": "^2.1.2",
"react-bootstrap-table2-toolkit": "^2.1.3",
...
0
votes
0
answers
49
views
How to export react-bootstrap table in to pdf
I have a react-bootstrap table and I need to export table data to a pdf. 'useReactToPrint' along with useRef is not working properly. Any other method campatible with react-bootstrap table?
Generate a ...
0
votes
1
answer
594
views
bootstrap-table with symfony 6 throught webpack not compiling
I'm trying to update a symfony project and its nodes plugins. I just discovered that when running my app, I get a webpack error about Uncaught bootstrap (not working after that) table saying
TypeError:...
0
votes
1
answer
108
views
How to get the filtered data in bootstrap datatable while using React.js by entering in search box?
I am using bootstrap datatable in my React application
function MyApp(){
const tableRef = useRef(null);
const [tableSave, setTableSave] = useState(null)
const [dataFromAPI, setDataFromAPI] = useState(...
-1
votes
1
answer
706
views
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." ...
0
votes
3
answers
60
views
fetching data not showing in table in react
I am creating a table and fetching data using Axios. However, I am not able to print the data – when I check, the data is being printed in the browser, but I am not able to print the particular data ...
0
votes
2
answers
718
views
Why isn't react-bootstrap table not working
i wanted to create a table using react-bootstrap .so installed react-bootstrap by
npm install react-bootstrap boostrap
then i imported the Table from react-bootstrap and rendered the table but it is ...
1
vote
1
answer
229
views
Is there a way to use validation on the textFilter of react-bootstrap-table2-filter?
Below is the object I use.
{
dataField: "hostname",
text: "hostName",
filter: textFilter({
placeholder: t("hostName"),
...
1
vote
0
answers
337
views
Enable Disable multiple checkboxes in React Bootstrap Table Next
I'm having a hard time trying to enable/disable checkboxes using Bootstrap Table Next and React.
For the checkboxes I'm using a column formatter like this:
formatter: (cell, row) => {
...
-2
votes
1
answer
652
views
I cant add react-bootstrap to NextJS
I cant use React-bootstrap to NextJS
I've added import 'bootstrap/dist/css/bootstrap.min.css' in _app.tsx and yarn add
Please help me, i'm newbie
import Container from 'react-bootstrap/Container';
...
1
vote
0
answers
108
views
How expand table row on right click using react-bootstrap-table2
The library has an expandRow props, it expands by default when the left mouse button is clicked, how can I make it expand when the right mouse button is clicked?
-1
votes
2
answers
929
views
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 ...
0
votes
1
answer
755
views
react-bootstrap-table2 pagination is not working with useState
I am using react-bootstrap-table2 pagination in my react application.I am using a state to update the sizePerPage dynamically.But it is not working. When I console the state, I am able to see the ...
0
votes
2
answers
3k
views
how to load data in react-bootstrap-table partially by using pagination
I am getting data partially from backend (let's say 10 rows per api call) and I want to call the api on page change but I am unable to find any relevant option in react-bootstrap-table pagination. Is ...
0
votes
1
answer
123
views
The value in the td tag is not correspondingly above table head (react-bootstrap)
I am trying to create a table in reactjs using bootstrap. Everything seems fine except:
As you can see, the titles inside the thead tag is not aligned exactly above its corresponding td tag. Is there ...
0
votes
1
answer
171
views
react-bootstrap-table can't access sub object
How can I access sub object in react-bootstrap-table
I am trying to use react-bootstrap-table in my project. My data object looks something like below-
const features = [
{
id:1,
name:'Name ...
0
votes
1
answer
571
views
Mapping to React Modal renders all items from array instead of mapping by their ID
My issue is that when I map the data into the Modal, it is returning all items from that field in the array e.g. mapping Business Name will return all business names in the array instead of 1.
I am ...
1
vote
0
answers
99
views
Received `true` for a non-boolean attribute `show`
I created a bootstrap-table, that onClick of the row, a modal pops-up showing an information of items in the row. This works fine, but when I click on the row, the browser's console shows this error.
...
-1
votes
1
answer
862
views
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 ...
-1
votes
1
answer
1k
views
Add tooltips on column headers in a React Bootstrap table
<BootstrapTable
bordered={false}
hover={true}
wrapperClasses="responsive"
keyField="id"
data={products}
columns={columns}
{...props.baseProps}
// ref={(n) => (this.node = n)...
0
votes
1
answer
303
views
State lost value in bootstrap table
I am using custom fields in react bootstrap table.
{
dataField: "hours",
text: "# of Hours",
sort: true,
footer: "# of Hours",
headerStyle: (colum, colIndex) =&...
1
vote
0
answers
680
views
How to make afterSaveCell in react bootstrap table save values to database
I am using react-bootstrap-table-next to implement crud functionalities. I need a situation whereby after the inline editing is done the data is saved to the database. Right now, after reloading the ...
0
votes
1
answer
357
views
Ttrying to load a table using react-bootstrap-table
Trying to edit the table cells using react-bootstrap-table, I am able edit successfully, but when I click on other components in the page the edited content has been restored by original value.
export ...
4
votes
2
answers
5k
views
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/...
1
vote
2
answers
1k
views
Uncaught TypeError: Cannot read properties of undefined (reading 'start_time')
I am facing this error when I update my last end time of last interval although it updates my state but not showing it in table
const onEdit = (oldValue, newValue, row, column) => {
const ...
0
votes
1
answer
1k
views
Table react bootstrap component rendering from array
I want to render a Table component with N rows, where N corresponds to a given array lenght, and for each row there will be two columns: the 1st one with a parameter of the array of objects and the ...
0
votes
1
answer
2k
views
react-bootstrap-table-next onclick(row) not providing correct key/value information
I'm attempting to add an onClick() event to a cell in a row so that I can get the keyField value for that row when the cell is clicked. This functionality worked initially, then I started getting ...
2
votes
0
answers
311
views
mdbreact datatable pagination issue
Im using mdbreact package to display the data in a datatable. In the datatable I have a column with checkbox to change the value. When I check or Uncheck and move to the second page, the values of the ...
0
votes
1
answer
217
views
IntelliJ reporting typescript error for react-bootstrap-table-next
I'm using react-bootstrap-table-next (aka react-bootstrap-table2). I'm getting a Typescript error in IntelliJ on the validator field in my column definition. I can't seem to get around it in IntelliJ ...
1
vote
1
answer
1k
views
ExportCSV using react-bootstrap-table-2
I'm trying to trigger my exportCSV from a different component outside of the TookkilProvider... is that possible? I did see some reference to this.refs.table.handleExportCSV(); here, but I can't seem ...
2
votes
0
answers
1k
views
How do I make my react-bootstrap-table-next maintain the same column width for all screen resolutions (Mobile responsive)?
I am using the BootstrapTable component from react-bootstrap-table-next. I am trying to create a page where this table must use the entire width of the screen. If the screen resolution drops down to ...
1
vote
1
answer
935
views
How to specify keys in React Bootstrap table
Using React Bootstrap table, I'm getting the warning Warning: Each child in a list should have a unique "key" prop. I've read about how this is necessary for lists, but not sure where I'm ...
1
vote
2
answers
2k
views
How to dynamically disable a row's checkbox in react-bootstrap-table2?
I want to achieve something that is in my current sandbox:
Currently I've hardcoded the nonSelectable: [1, 2] so it will make row 1 and 2 unselectable.
Now I want to make the rows unselectable based ...
0
votes
1
answer
988
views
React-Bootstrap Table with dynamic Content - Form over Radio Buttons in Rows not working
In my React App I request data from an API and store it in state:
const [entities, setEntities] = useState([]);
in my useEffect hook I get the Data from the API - basicly I have the following example ...
1
vote
2
answers
2k
views
Adding serial number to the react bootstrap table
I am using a React-bootstrap table in my project, I want to add a column in my table with a serial number but am unable to generate the serial number so kindly guide me on how to do it.
Currently am ...
-1
votes
1
answer
779
views
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 '...
2
votes
1
answer
404
views
How do I use search in react?
I want to search by holiday name on the holiday list coming from the API. The user should be able to select the line with the name of the holiday s/he is looking for by clicking on it after seeing it ...
0
votes
0
answers
652
views
How do I edit an array inside a cell in my React-bootstrap table?
As shown in the link below. I have an array inside a cell, when a click on those cell to edit them, they turns to [object, object] instead of their default values.
The first picture shows the error ...
0
votes
0
answers
378
views
Modal always re-rendering when typing in input for React-Bootstrap-Table2
I'm trying to implement an 'Edit Category' modal that can edit the current selected row in React-Bootstrap-Table2.
However, when I tried to type in Category Description, it always re-renders the modal ...
1
vote
0
answers
760
views
How to pass row data to a child component created into a format function
I have a react-bootstrap table with column defined like this:
const columns = [
...
{
dataField: "d",
text: "Actions",
formatter: actionFormatter,
...
1
vote
1
answer
2k
views
Uncaught RangeError: Invalid time value on react-DatePicker
I have a React component as Form which has some text input and a DatePicker control. I display the inputs on a table using react-bootstrap-table-next library, which can't display date directly form ...
0
votes
1
answer
251
views
Uncaught Error: Objects are not valid as a React child while using react-bootstrap-table-next
I have a React component where I am trying to render a table using the react-bootstrap-table-next library. I'm getting an error:
Uncaught Error: Objects are not valid as a React child
Issue: The ...
2
votes
1
answer
178
views
<Table> in react-bootstrap - SyntaxError
I'm working on a React project using react-bootstrap, and having a problem when trying to add JSX before of after the <Table> part.
Someone familiar with that problem?
return (
<h1&...
0
votes
1
answer
6k
views
How to add columns filter using react-bootstrap/table?
I want to add the ability to sort/filter the columns of my table. On the web I can't find any example on how to do that with react-bootstrap/table.
Here is my code:
import React from 'react';
import '...