🤩
Windframe Import update is finally here!
postImage

How to create a beautiful React Bootstrap table.

blogImage

By Emmanuel Chinonso

Web Developer

React Bootstrap tables are component with basic tables features. They let you aggregate a massive amount of data and present it in a clear and orderly way.

These tables provide additional benefits like responsiveness and the possibility to manipulate the styles of the tables. 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. All these make the react Bootstrap table editable.

Today, we’ll be creating a table in react using a react bootstrap library knows as Contrast. Contrast, also known as CDBReact is a react library which is an Elegant UI kit with full bootstrap support that has reusable components for building mobile-first, responsive websites and web apps.

Prerequisites

The tables would be built using React, Bootstrap, and CDBReact. You don’t need to have any previous knowledge of CDBReact, but the following are necessary:

  • JavaScript Knowledge
  • Basic React Knowledge
  • Basic Bootstrap Knowledge
  • Node and it’s package manager, npm. You can install it from here. Run the command node -v && npm -v to verify you have them installed.
  • Alternatively, we can use another package manager, Yarn.

The react Bootstrap editable table we will be creating will look like the image below.

React Bootstrap Table

Setup

First Check that you have node installed. To do this, run the following command in your terminal.

r
node -v

This should show you the current version of node you have installed on your machine. If you don’t have node.js installed, download it here. Installing node also installs npm on your PC, but you can still confirm using npm-v. Now that we have node installed, we can start up our React project by going to the directory of our choice and running.

r
npx create-react-app table-app

I named the project table-app but you can use any name of your choice.

Install CDBReact

Now, we have to install CDBReact in our project Run the following command to install CBDReact

Code:

r
npm install --save cdbreact

Or using Yarn

Code:

r
yarn add cdbreact

Note that we don’t need to install bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.

Table

There are different types of tables available for you in Contrast. These tables enable you to present your work concisely and. We are going to create one of these tables, known as a responsive table. First, we make a file named table.js. Then we write this code on them.

Code:

r
import React from "react";
import { CDBTable, CDBTableHeader, CDBTableBody, CDBContainer } from "cdbreact";

In the code above, we imported the table components to help us create different tables. These components include:

  • CDBTable is the table itself
  • CDBTableHeader, for creating table headers.
  • CDBTableBody, to create the body of the table
  • CDBContainer, this ouses the entire component.

Code:

jsx
const Table = () => {
return (
<CDBContainer>
<CDBTable responsive>
<CDBTableHeader>
<tr>
<th>#</th>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
<th>Fifth</th>
<th>Sixth</th>
<th>Seventh</th>
<th>Last</th>
<th>Handle</th>
</tr>
</CDBTableHeader>
<CDBTableBody>
<tr>
<td>1</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>@email</td>
</tr>
<tr>
<td>2</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>@email</td>
</tr>
<tr>
<td>3</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>@email</td>
</tr>
</CDBTableBody>
</CDBTable>
</CDBContainer>
);
};
export default Table;

In the code above, we created the table with the components we imported and included some styling to them.

Now, we are going to render the component into our app.js.

Code:

jsx
import './App.css';
import Table from './table';
import Reactdom from 'react-dom';
function App() {
return (
<div className="App">
<Table />
</div>
);
}
Reactdom.render(<App />, document.getElementById('root'));

Our page will look like the image below

React Bootstrap Table

Editable Table

With React Editable Bootstrap Table, you can add and remove rows and change text and information within cells. In-place editing on your website - based on JavaScript - is now easier and quicker.

The editable table we are going to create will look like the image below.

React Bootstrap EditableTable

You need to download the pro version of contrast to use the editable table in contrast. We can start up our React project by going to the directory of our choice and running.

r
npx create-react-app editable-table-app

I named the project Editabletable-app but you can use whatever name of your choice.

Install CDBReact-pro

Install the cdbreact-pro package in your project (we recommend adding the file to the root of the project.) by running

r
npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

r
yarn add ./path-to-the-cdbreact-pro-tgz-file

Note that we don’t need to install Bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.

Code:

jsx
import React from 'react';
import { CDBEditableTable, CDBCard, CDBCardBody, CDBContainer } from 'cdbreact';

in the code above we imported the components we need for building editable table. These components include

  • CDBEditableTable.
  • CDBCard
  • CDBCardBody

Code:

jsx
const EditableTable = () => {
const columns = ['Fullname', 'Age', 'Company Name', 'City', 'Country'];
const data = [
['Guerra Cortez', 45, 'Insectus', 'San Francisco', 'USA'],
['Elisa Gallagher', 31, 'Portica', 'London', 'United Kingdom'],
['Aurelia Vega', 30, 'Deepends', 'Madrid', 'Spain'],
['Guadalupe House', 26, 'Isotronic', 'Berlin', 'Germany'],
];
return (
<CDBContainer>
<CDBCard>
<CDBCardBody>
<CDBEditableTable striped bordered data={data} columns={columns} />
</CDBCardBody>
</CDBCard>
</CDBContainer>
);
};
export default EditableTable;

In the code above, the components were used to build a card body and editable table and some styles were added to the components to enable it to be more presentable.

The next step is to render the components into the app.js.

Code:

jsx
import './App.css';
import EditableTable from './Editabletable';
function App() {
return (
<Router>
<div className="App">
<EditableTable />
</div>
</Router>
);
}
export default App;

The code above shows the editabletable components in the root app, which allows the application to be presented on the web.

This is how the page will look like now.

React Bootstrap EditableTable

Conclusion

The react Bootstrap editable table can be built easily into any number of your project. You can use other features available in the contrast pro version to make your table your style and preference.

Resources

CDBReact Tables Docs

Link to code on github

Get Contrast Pro

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...