Create a table in ReactJS

Hey devs, here is a new article.In this article I will explain how to create a table in reactJS with the use of Bootstrap. If you don’t know how to use bootstrap in reactJS, you can check this previous article on how to use bootstrap with reactJS. If you want to read another article on bootstrap, here is another article that can help you. If you already have some experience with bootstrap and reactJS, you can continue the article.

In the next example there is the code of a basic table:

<table className="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

We have the ‘table’ component that has other two components in it: the body and the head (tbody, thead). In the head we return the names of the columns. Inside the body we have different rows. Each ‘tr’ returns a row.

We can obviously customise it in different ways. This example will return a white table. If we want we can return a dark table by adding “table-dark” in the className of the ‘table’ component, like in the next example:

<table className="table table-dark">

We can also just make the header dark while using a light table or make the header light while using a dark table:

<thead class="thead-dark">
<thead class="thead-light">

Another thing we can do with, is create a striped table, one row will be light, the next will be grey :

<table class="table table-striped">
<table class="table table-striped table-dark">

We can have a borderless table or a bordered table:

<table class="table table-borderless">
<table class="table table-bordered">

There are other few things you can do to a table in reactJS and bootstrap, but these were basic things and knowledge that can help you at the begging and on how to create a simple table in reactJS.

Thank you for reading this article, I hope it was helpful!

Check other posts

Check Bootstrap website