React Bootstrap Table | By Ahmed Belaid

One of the most basic components required for presenting your data is a Data-grid also known as a Table. It does not, however, provide additional functionality that is typically required in applications, such as sorting, filtering, paging, in-cell editing…

That’s where React Bootstrap Tables catch a lot of eyeballs. They include predefined style classes that are both responsive and reliable that enable you to compile large amounts of data and show it in a logical and ordered manner.

You can enhance your tables by adding buttons, checkboxes, panels, and many other additional elements. You can also use advanced data tables options like sort, search, or pagination.

Basic table

Below, an example of how a basic table looks in Bootstrap. All table styles are inherited in Bootstrap 4, this means that any nested tables will be styled in the same way as the parent table.

#NameHandle1Ordinarycoders1@Ordinarycoders12Ordinarycoders2@Ordinarycoders23Ordinarycoders3@Ordinarycoders3

Adding React Bootstrap Table

Starting by adding the React Bootstrap Table to our project:

# add with npm
npm install react-bootstrap-table-next
# or with yarn
yarn add react-bootstrap-table-next

React Bootstrap Table is based on Bootstrap for styling, so we must install the bootstrap package for the Bootstrap CSS files as well:

# add with npm
npm install bootstrap
# or with yarn
yarn add bootstrap

If you need additional features, React Bootstrap Table provides separate packages and if you’re going to use some of these additional features, you need to install them as well.

Now, we can add the Bootstrap Table to our project.

We will begin by importing CSS files. The bootstrap.css file is used to style tables. Then we will import the react-bootstrap-table2.min.css for specific React Bootstrap Table styles not covered by Bootstrap. And finally, we will import the Bootstrap-Table table component.

import React from "react";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.css";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";
import BootstrapTable from "react-bootstrap-table-next";
const products = [
  { id: 1, name: "Ordinarycoders course 1", price: 101 },
  { id: 2, name: "Ordinarycoders course 2", price: 102 },
  { id: 3, name: "Ordinarycoders course 3", price: 103 },
  { id: 4, name: "Ordinarycoders course 4", price: 104 },
  { id: 5, name: "Ordinarycoders course 5", price: 105 }
];
const columns = [
  {
    dataField: "id",
    text: "Product ID",
    sort: true
  },
  {
    dataField: "name",
    text: "Product Name",
    sort: true
  },
  {
    dataField: "price",
    text: "Product Price in $"
  }
];
export default function App() {
  return (
    <div className="App">
      <BootstrapTable
        bootstrap4
        keyField="id"
        data={products}
        columns={columns}
      />
    </div>
  );
}

The results should be as the table below:

The products array holds a list of items that we want to show. The columns array specifies the table’s column configurations. With the data-Field field, we describe the name of the field that should be displayed, the display name with the text field, and whether it should be sortable with the sort field for each column.

Finally, we render the table with the table component. We use the bootstrap4 property to inform the table that we’re using Bootstrap version 4 of the framework.

After that, we provide the data to show in the data property and columns configuration in the columns property. We also specify that the id property of products should be used as the unique key with the key-Field property.

• Note: If you don’t specify the bootstrap4 property, React Bootstrap Table will render table for Bootstrap version 3.

Configuring React Bootstrap Table

We can configure the React Bootstrap Table component using its properties that are available on the official site.

Let’s say we want to add paging to our table.

Paging, as previously stated, is implemented in a separate package. Before we can use it, we must first install it:

# add with npm
npm install react-bootstrap-table2-paginator
# or with yarn
yarn add react-bootstrap-table2-paginator

Now, we can add it to our table:

import React from "react";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.css";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
export const productsGenerator = quantity => {
  const items = [];
  for (let i = 1; i < quantity; i++) {
    items.push({ id: i, name: `Ordinarycoders course ${i}`, price: 100 + i });
  }
  return items;
};
const products = productsGenerator(100);
const columns = [
  {
    dataField: "id",
    text: "Product ID",
    sort: true
  },
  {
    dataField: "name",
    text: "Product Name",
    sort: true
  },
  {
    dataField: "price",
    text: "Product Price in $"
  }
];
export default function App() {
  return (
    <div className="App">
      <BootstrapTable
        bootstrap4
        keyField="id"
        data={products}
        columns={columns}
        pagination={paginationFactory({ sizePerPage: 5 })}
      />
    </div>
  );
}

The results should be as the table below:

This demonstration is identical to the simple table demonstration. The pagination Factory function from the react-bootstrap-table2-paginator package is imported instead of the pagination Factory function from the previous example. We call this function and provide the result to the table's pagination attribute.

Note: If your React project is using Bootstrap, the table will have the same styling as the rest of the app. All of the additional theming will be applied as well. This is a good option if you want to apply styling to all tables in your application.

Conclusion

If you start programming in React Bootstrap with a table, you will quickly learn how to handle code. Tables are responsible for displaying information in an organized way to see patterns and ideas from data grouped into categories and choosing React Bootstrap tables is a great choice when you need to display a data grid with sorting, paging, and filtering.

— This Article was published in Ordinary-coders