Bootstrap Tables
Complete showcase of Bootstrap 5 table variants — striped, bordered, hover, dark header, responsive and coloured rows
Basic Table
Clean default table with thin bottom borders
| ID | Name | Department | Role | Status | Salary | Joined | Performance |
|---|---|---|---|---|---|---|---|
| EMP001 | Sarah Chen | Engineering | Senior Developer | Active | ₹18,40,000 | 12 Jan 2023 | Excellent |
| EMP002 | Marcus Webb | Marketing | Marketing Manager | Active | ₹14,20,000 | 08 Mar 2022 | Good |
| EMP003 | Priya Nair | HR & Admin | HR Specialist | Active | ₹12,80,000 | 22 Jul 2023 | Excellent |
| EMP004 | David Park | Finance | Finance Analyst | On Leave | ₹13,60,000 | 05 Nov 2021 | Good |
| EMP005 | Emily Roth | Product | Product Manager | Active | ₹16,50,000 | 14 Feb 2023 | Average |
| EMP006 | Tom Reddy | Sales | Sales Executive | Active | ₹11,20,000 | 30 Aug 2022 | Good |
| EMP007 | Anita Rao | Operations | Ops Lead | Inactive | ₹15,00,000 | 03 May 2021 | Average |
| EMP008 | Raj Sharma | Engineering | QA Engineer | Active | ₹10,80,000 | 19 Sep 2023 | Excellent |
Default table — no extra styling applied
Striped Table
Alternating row backgrounds for better readability in long tables
| ID | Name | Department | Role | Status | Salary | Joined | Performance |
|---|---|---|---|---|---|---|---|
| EMP001 | Sarah Chen | Engineering | Senior Developer | Active | ₹18,40,000 | 12 Jan 2023 | Excellent |
| EMP002 | Marcus Webb | Marketing | Marketing Manager | Active | ₹14,20,000 | 08 Mar 2022 | Good |
| EMP003 | Priya Nair | HR & Admin | HR Specialist | Active | ₹12,80,000 | 22 Jul 2023 | Excellent |
| EMP004 | David Park | Finance | Finance Analyst | On Leave | ₹13,60,000 | 05 Nov 2021 | Good |
| EMP005 | Emily Roth | Product | Product Manager | Active | ₹16,50,000 | 14 Feb 2023 | Average |
| EMP006 | Tom Reddy | Sales | Sales Executive | Active | ₹11,20,000 | 30 Aug 2022 | Good |
| EMP007 | Anita Rao | Operations | Ops Lead | Inactive | ₹15,00,000 | 03 May 2021 | Average |
| EMP008 | Raj Sharma | Engineering | QA Engineer | Active | ₹10,80,000 | 19 Sep 2023 | Excellent |
Every even row has a subtle background shade
Bordered Table
Full border on all cells — ideal for dense data grids
| ID | Name | Department | Role | Status | Salary | Joined | Performance |
|---|---|---|---|---|---|---|---|
| EMP001 | Sarah Chen | Engineering | Senior Developer | Active | ₹18,40,000 | 12 Jan 2023 | Excellent |
| EMP002 | Marcus Webb | Marketing | Marketing Manager | Active | ₹14,20,000 | 08 Mar 2022 | Good |
| EMP003 | Priya Nair | HR & Admin | HR Specialist | Active | ₹12,80,000 | 22 Jul 2023 | Excellent |
| EMP004 | David Park | Finance | Finance Analyst | On Leave | ₹13,60,000 | 05 Nov 2021 | Good |
| EMP005 | Emily Roth | Product | Product Manager | Active | ₹16,50,000 | 14 Feb 2023 | Average |
| EMP006 | Tom Reddy | Sales | Sales Executive | Active | ₹11,20,000 | 30 Aug 2022 | Good |
| EMP007 | Anita Rao | Operations | Ops Lead | Inactive | ₹15,00,000 | 03 May 2021 | Average |
| EMP008 | Raj Sharma | Engineering | QA Engineer | Active | ₹10,80,000 | 19 Sep 2023 | Excellent |
All cells have visible borders on all 4 sides
Hover Table
Rows highlight on hover — great for clickable/selectable tables
| ID | Name | Department | Role | Status | Salary | Joined | Performance |
|---|---|---|---|---|---|---|---|
| EMP001 | Sarah Chen | Engineering | Senior Developer | Active | ₹18,40,000 | 12 Jan 2023 | Excellent |
| EMP002 | Marcus Webb | Marketing | Marketing Manager | Active | ₹14,20,000 | 08 Mar 2022 | Good |
| EMP003 | Priya Nair | HR & Admin | HR Specialist | Active | ₹12,80,000 | 22 Jul 2023 | Excellent |
| EMP004 | David Park | Finance | Finance Analyst | On Leave | ₹13,60,000 | 05 Nov 2021 | Good |
| EMP005 | Emily Roth | Product | Product Manager | Active | ₹16,50,000 | 14 Feb 2023 | Average |
| EMP006 | Tom Reddy | Sales | Sales Executive | Active | ₹11,20,000 | 30 Aug 2022 | Good |
| EMP007 | Anita Rao | Operations | Ops Lead | Inactive | ₹15,00,000 | 03 May 2021 | Average |
| EMP008 | Raj Sharma | Engineering | QA Engineer | Active | ₹10,80,000 | 19 Sep 2023 | Excellent |
Row background changes on mouse hover
Combined: Striped + Hover + Dark Header
Most commonly used combination for HR dashboards
| ID | Name | Department | Role | Status | Salary | Joined | Performance |
|---|---|---|---|---|---|---|---|
| EMP001 | Sarah Chen | Engineering | Senior Developer | Active | ₹18,40,000 | 12 Jan 2023 | Excellent |
| EMP002 | Marcus Webb | Marketing | Marketing Manager | Active | ₹14,20,000 | 08 Mar 2022 | Good |
| EMP003 | Priya Nair | HR & Admin | HR Specialist | Active | ₹12,80,000 | 22 Jul 2023 | Excellent |
| EMP004 | David Park | Finance | Finance Analyst | On Leave | ₹13,60,000 | 05 Nov 2021 | Good |
| EMP005 | Emily Roth | Product | Product Manager | Active | ₹16,50,000 | 14 Feb 2023 | Average |
| EMP006 | Tom Reddy | Sales | Sales Executive | Active | ₹11,20,000 | 30 Aug 2022 | Good |
| EMP007 | Anita Rao | Operations | Ops Lead | Inactive | ₹15,00,000 | 03 May 2021 | Average |
| EMP008 | Raj Sharma | Engineering | QA Engineer | Active | ₹10,80,000 | 19 Sep 2023 | Excellent |
Striped rows, hover highlight, and dark header — the standard HR table style
Size Variants — Small / Default / Large
Compact and spacious table variants for different use cases
Small (sm) — Compact
| ID | Name | Department | Role | Status | Salary | Joined | Performance |
|---|---|---|---|---|---|---|---|
| EMP001 | Sarah Chen | Engineering | Senior Developer | Active | ₹18,40,000 | 12 Jan 2023 | Excellent |
| EMP002 | Marcus Webb | Marketing | Marketing Manager | Active | ₹14,20,000 | 08 Mar 2022 | Good |
| EMP003 | Priya Nair | HR & Admin | HR Specialist | Active | ₹12,80,000 | 22 Jul 2023 | Excellent |
| EMP004 | David Park | Finance | Finance Analyst | On Leave | ₹13,60,000 | 05 Nov 2021 | Good |
Large (lg) — Spacious
| ID | Name | Department | Role | Status | Salary | Joined | Performance |
|---|---|---|---|---|---|---|---|
| EMP001 | Sarah Chen | Engineering | Senior Developer | Active | ₹18,40,000 | 12 Jan 2023 | Excellent |
| EMP002 | Marcus Webb | Marketing | Marketing Manager | Active | ₹14,20,000 | 08 Mar 2022 | Good |
| EMP003 | Priya Nair | HR & Admin | HR Specialist | Active | ₹12,80,000 | 22 Jul 2023 | Excellent |
| EMP004 | David Park | Finance | Finance Analyst | On Leave | ₹13,60,000 | 05 Nov 2021 | Good |
Coloured Row Highlights
Semantic row colours to highlight status, alerts and categories
| Status | Employee | Department | Alert Level | Action Required |
|---|---|---|---|---|
| Active | Sarah Chen | Engineering | All Good | — |
| New Hire | Raj Sharma | Engineering | Onboarding | Send welcome email |
| On Leave | David Park | Finance | Coverage | Assign backup |
| Inactive | Anita Rao | Operations | Action Needed | Offboarding checklist |
| PIP | Tom Reddy | Sales | Monitor | Weekly check-in |
Department Summary with Progress Bars
Combining table cells with inline data visualisation
| Department | Headcount | Budget | Avg Salary | Open Roles | Engagement |
|---|---|---|---|---|---|
| Engineering | 68 | ₹4.2 Cr | ₹16.8 L | 4 | 92% |
| Sales | 42 | ₹2.8 Cr | ₹12.4 L | 6 | 78% |
| Marketing | 31 | ₹2.1 Cr | ₹13.2 L | 3 | 85% |
| HR & Admin | 18 | ₹1.2 Cr | ₹11.8 L | 2 | 88% |
| Finance | 24 | ₹1.9 Cr | ₹14.6 L | 1 | 91% |
| Product | 22 | ₹2.4 Cr | ₹15.9 L | 3 | 87% |
Selectable Rows with Checkboxes
Click checkboxes to select rows — select all with header checkbox
0 rows selected
| ID | Name | Department | Role | Status | Salary | Joined | Performance | |
|---|---|---|---|---|---|---|---|---|
| EMP001 | Sarah Chen | Engineering | Senior Developer | Active | ₹18,40,000 | 12 Jan 2023 | Excellent | |
| EMP002 | Marcus Webb | Marketing | Marketing Manager | Active | ₹14,20,000 | 08 Mar 2022 | Good | |
| EMP003 | Priya Nair | HR & Admin | HR Specialist | Active | ₹12,80,000 | 22 Jul 2023 | Excellent | |
| EMP004 | David Park | Finance | Finance Analyst | On Leave | ₹13,60,000 | 05 Nov 2021 | Good | |
| EMP005 | Emily Roth | Product | Product Manager | Active | ₹16,50,000 | 14 Feb 2023 | Average | |
| EMP006 | Tom Reddy | Sales | Sales Executive | Active | ₹11,20,000 | 30 Aug 2022 | Good | |
| EMP007 | Anita Rao | Operations | Ops Lead | Inactive | ₹15,00,000 | 03 May 2021 | Average | |
| EMP008 | Raj Sharma | Engineering | QA Engineer | Active | ₹10,80,000 | 19 Sep 2023 | Excellent |