How to create a beautiful tables using bootstrap and Contrast on React.
Tags: react, programming, webdev, codenewbie
Published: 2021-08-02 09:50:55

---
title: How to create a beautiful tables using bootstrap and Contrast on React.
published: true
date: 2021-04-20 01:16:04 UTC
tags: [react, programming, webdev, codenewbie]
canonical_url: https://www.devwares.com/blog//create-tables-with-contrast
cover_image: https://devwares.com/blog/images/reactArticle2.png
---

How to create different tables, editable tables in React using bootstrap and contrast.

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

React 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 an advanced data tables options like sort, search or pagination.

Today, we’ll be creating a table in react using a react 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
- JavaScript Knowledge
- NPM installed

The table we will be creating will look like the image below

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hml4v3hfg2wcsjukvvsi.png)

**Setup**

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

```javascript
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

```javascript
npx create-react-app table-app
```

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

**Install CDBReact**

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

**Code:**

```javascript
npm install --save cdbreact
```

Or using Yarn

**Code:**
```javascript
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 table available for you in contrast. This tables enable you to present your work in a concise and simple way. We are going to create a one of this table known as responsive table. First we create a file named table.js. then we write this code on them.

**Code:**

```jsx
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 is used to create the header for the table
- CDBTableBody is used to create the body of the table
- CDBContainer is houses the entire table components.

**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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hml4v3hfg2wcsjukvvsi.png)



## 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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/168fadkmull6hkilel84.png)


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

```javascript
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

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

Or using Yarn

```javascript
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 in the web.

This is how the page will look like now

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/168fadkmull6hkilel84.png)


**Conclusion**

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


**Resources**

[CDBReact Tables Docs](https://devwares.com/docs/contrast/react/table/table)

[Link to code on github](https://github.com/devwares-team/cdbreact)

[Get Contrast Pro](https://devwares.com/product/contrast-pro)


###Create Stunning Websites and Web Apps

Building different custom components in react for your web apps or websites can get very stressful. Thats why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro. [Try contrast pro!](https://www.devwares.com/product/contrast-pro)

![Contrast Design Boostrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulsutxnzjpbpaauhvbew.png)

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc project with a clean, well documented, well crafted template and UI components. [Learn more about Contrast Pro](https://www.devwares.com/product/contrast-pro) 


## Resources 

- [Link to the Github Code](https://github.com/Iheanacho-ai/Tailwind-react-modal)

- [Link to the Tailwind CSS Modals Docs](https://tailwindui.com/components/application-ui/overlays/modals)

- [Get Tailwind CSS PRO](https://tailwindui.com/pricing)

- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)

- [Link to the modal documentation](https://www.devwares.com/docs/contrast/javascript/components/modal)

- [How to create Tailwind CSS Modal](https://www.devwares.com/blog/how-to-create-tailwind-css-modal)

- [How to use tailwind CSS in HTML]  (https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table]
(https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)