make table responsive react-bootstrap-table2
To make a table responsive using react-bootstrap-table2, you can use the responsive
prop provided by the library.
First, make sure you have installed the required dependencies by running the following command in your terminal:
npm install react-bootstrap-table2
Once you have the dependencies installed, you can import the necessary components in your React component file:
import BootstrapTable from 'react-bootstrap-table-next';
import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';
Next, you can define your table data and columns. For example:
const data = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 },
// ...
];
const columns = [
{ dataField: 'id', text: 'ID' },
{ dataField: 'name', text: 'Name' },
{ dataField: 'age', text: 'Age' },
// ...
];
Then, you can render the responsive table using the BootstrapTable
component:
<BootstrapTable
keyField="id"
data={data}
columns={columns}
responsive
/>
By setting the responsive
prop to true
in the BootstrapTable
component, the table will automatically adjust its layout based on the screen size, making it responsive.
Remember to replace data
and columns
with your own data and column definitions.
That's it! You now have a responsive table using react-bootstrap-table2 in your React application.