Components

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

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

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

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

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

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

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

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

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

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

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

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

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