Dashboard
Applications
Pages
UI Elements
Shaira Diaz

Premium Member

Tables

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap. Read the Official Bootstrap Documentation for a full list of instructions and other options.

Basic Example

Using the most basic table markup, here’s how .table based tables look in Bootstrap. All table styles are inherited in Bootstrap 5, meaning any nested tables will be styled in the same manner as the parent.

ID Name Job Title Degree Salary
1 Adrian Monino Front-End Engineer Computer Science $120,000
2 Socrates Itumay Software Engineer Computer Engineering $150,000
3 Reynante Labares Product Manager Business Management $250,000 
<table class="table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Job Title</th>
      <th scope="col">Degree</th>
      <th scope="col">Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Adrian Monino</td>
      <td>Front-End Engineer</td>
      <td>Computer Science</td>
      <td>$120,000</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Socrates Itumay</td>
      <td>Software Engineer</td>
      <td>Computer Engineering</td>
      <td>$150,000</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Reynante Labares</td>
      <td>Product Manager</td>
      <td>Business Management</td>
      <td>$250,000</td>
    </tr>
  </tbody>
</table>



Striped Rows

Use .table-striped to add zebra-striping to any table row within the tbody.

ID Name Job Title Degree Salary
1 Adrian Monino Front-End Engineer Computer Science $120,000
2 Socrates Itumay Software Engineer Computer Engineering $150,000
3 Reynante Labares Product Manager Business Management $250,000 
<table class="table table-striped">...</table>



Hoverable Rows

Add .table-hover to enable a hover state on table rows within a tbody.

ID Name Job Title Degree Salary
1 Adrian Monino Front-End Engineer Computer Science $120,000
2 Socrates Itumay Software Engineer Computer Engineering $150,000
3 Reynante Labares Product Manager Business Management $250,000 
<table class="table table-hover">...</table>



Active Rows

Highlight a table row or cell by adding a .table-active class.

ID Name Job Title Degree Salary
1 Adrian Monino Front-End Engineer Computer Science $120,000
2 Socrates Itumay Software Engineer Computer Engineering $150,000
3 Reynante Labares Product Manager Business Management $250,000 
<tr class="table-active">
  <th scope="row">2</th>
  <td>Socrates Itumay</td>
  <td>Software Engineer</td>
  <td>Computer Engineering</td>
  <td>$150,000</td>
</tr>



Color Variants

Use contextual classes to color tables, table rows or individual cells.

ID Name Job Title Degree Salary
1 Adrian Monino Front-End Engineer Computer Science $120,000
2 Socrates Itumay Software Engineer Computer Engineering $150,000
3 Reynante Labares Product Manager Business Management $250,000 
<table class="table table-primary">...</table>



Table Borders

Add .table-bordered for borders on all sides of the table and cells. Add .table-borderless for a table without borders.

ID Name Job Title Degree Salary
1 Adrian Monino Front-End Engineer Computer Science $120,000
2 Socrates Itumay Software Engineer Computer Engineering $150,000
3 Reynante Labares Product Manager Business Management $250,000 
<table class="table table-bordered">...</table>
ID Name Job Title Degree Salary
1 Adrian Monino Front-End Engineer Computer Science $120,000
2 Socrates Itumay Software Engineer Computer Engineering $150,000
3 Reynante Labares Product Manager Business Management $250,000 
<table class="table table-borderless">...</table>



Small Table

Add .table-sm to make any table more compact by cutting all cell padding in half.

ID Name Job Title Degree Salary
1 Adrian Monino Front-End Engineer Computer Science $120,000
2 Socrates Itumay Software Engineer Computer Engineering $150,000
3 Reynante Labares Product Manager Business Management $250,000 
<table class="table table-sm">...</table>



Responsive Table

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a table with .table-responsive.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>






Grid.js

Grid.js is a table plugin written in TypeScript. It is developed to be used with all popular JavaScript frameworks include React, Angular.js, Vue or without any frameworks! Read the Official Grid.js Documentation for a full list of instructions and other options.



Basic Example

In this examples, we load the data from an existing HTML table.

ID Name Job Title Degree Salary
1 Adrian Monino Front-End Engineer Computer Science $120,000
2 Socrates Itumay Software Engineer Computer Engineering $150,000
3 Reynante Labares Product Manager Business Management $250,000 
$("#tableGrid1").Grid({
  className: {
    table: 'table'
  }
});



Pagination

Pagination can be enabled by setting pagination: true.

ID Name Job Title Degree Salary
1 Adrian Monino Front-End Engineer Computer Science $120,000
2 Socrates Itumay Software Engineer Computer Engineering $150,000
3 Reynante Labares Product Manager Business Management $250,000 
$("#tableGrid2").Grid({
  className: {
    table: 'table table-bordered mb-0'
  },
  pagination: true
});



Search

Supports global search on all rows and columns. Set search: true to enable the search plugin.

ID Name Job Title Degree Salary
1 Adrian Monino Front-End Engineer Computer Science $120,000
2 Socrates Itumay Software Engineer Computer Engineering $150,000
3 Reynante Labares Product Manager Business Management $250,000 
$("#tableGrid3").Grid({
  className: {
    table: 'table table-bordered mb-0'
  },
  search: true
});



Sorting

To enable sorting, simply add sort: true to your config.

Name Job Title Degree Salary
Adrian Monino Front-End Engineer Computer Science $120,000
Socrates Itumay Software Engineer Computer Engineering $150,000
Reynante Labares Product Manager Business Management $250,000 
$("#tableGrid4").Grid({
  className: {
    table: 'table table-bordered mb-0'
  },
  sort: true
});



Resizable Columns

Simply add resizable: true to your config to enable resizable columns.

Name Job Title Degree Salary
Adrian Monino Front-End Engineer Computer Science $120,000
Socrates Itumay Software Engineer Computer Engineering $150,000
Reynante Labares Product Manager Business Management $250,000 
$("#tableGrid5").Grid({
  className: {
    table: 'table table-bordered mb-0'
  },
  sort: true,
  resizable: true
});



© 2023. Dashbyte. All Rights Reserved. Created by: Themepixels