@pmeig/ngb-table
Advanced tools
A powerful Angular library that provides Bootstrap-styled table components with advanced styling options, responsive behavior, and flexible color theming for data presentation.
A powerful Angular library that provides Bootstrap-styled table components with advanced styling options, responsive behavior, and flexible color theming for data presentation.
npm install @pmeig/ngb-table
import { TableMaterial } from '@pmeig/ngb-table';
@Component({
imports: [TableMaterial],
// ...
})
export class MyComponent { }
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john@example.com</td>
<td>Developer</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>jane@example.com</td>
<td>Designer</td>
</tr>
</tbody>
</table>
<!-- Row Striping -->
<table striped>
<thead>
<tr>
<th>ID</th>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Laptop</td>
<td>$999</td>
</tr>
<tr>
<td>2</td>
<td>Mouse</td>
<td>$25</td>
</tr>
</tbody>
</table>
<!-- Column Striping -->
<table striped="column">
<thead>
<tr>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
<th>Q4</th>
</tr>
</thead>
<tbody>
<tr>
<td>$100K</td>
<td>$120K</td>
<td>$110K</td>
<td>$130K</td>
</tr>
</tbody>
</table>
<table hover striped>
<thead>
<tr>
<th>User</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Johnson</td>
<td>Active</td>
<td>
<button class="btn btn-sm btn-primary">Edit</button>
</td>
</tr>
</tbody>
</table>
<!-- Bordered Table -->
<table border>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
<!-- Borderless Table -->
<table border="false">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
<table small striped>
<thead>
<tr>
<th>Compact</th>
<th>Table</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dense</td>
<td>Layout</td>
<td>Data</td>
</tr>
</tbody>
</table>
<!-- Always Responsive -->
<table responsive>
<thead>
<tr>
<th>Very Long Header Name</th>
<th>Another Long Header</th>
<th>Third Long Header</th>
<th>Fourth Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Long content that might overflow</td>
<td>More long content here</td>
<td>Even more content</td>
<td>Final column</td>
</tr>
</tbody>
</table>
<!-- Responsive at specific breakpoint -->
<table responsive="md">
<!-- Table content -->
</table>
<table>
<thead color="dark">
<tr>
<th>Dark Header</th>
<th>Another Header</th>
</tr>
</thead>
<tbody>
<tr color="success">
<td>Success row</td>
<td>Green background</td>
</tr>
<tr color="warning">
<td>Warning row</td>
<td>Yellow background</td>
</tr>
<tr>
<td color="danger">Danger cell</td>
<td>Normal cell</td>
</tr>
</tbody>
</table>
<table>
<caption top>Users Overview</caption>
<thead>
<tr>
<th>Name</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Engineering</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>95</td>
</tr>
<tr>
<td>Bob</td>
<td>87</td>
</tr>
</tbody>
<tbody divider>
<tr>
<td>Charlie</td>
<td>92</td>
</tr>
<tr>
<td>David</td>
<td>88</td>
</tr>
</tbody>
</table>
| Property | Type | Default | Description |
|---|---|---|---|
striped | 'row' | 'column' | '' | Striping pattern - rows or columns |
hover | boolean | true | Enable hover effect on rows |
border | boolean | undefined | Table border style - true for bordered, false for borderless |
small | boolean | false | Compact table sizing |
responsive | string | boolean | 'table-responsive' | Responsive behavior and breakpoint |
| Property | Type | Default | Description |
|---|---|---|---|
color | Color | '' | Bootstrap color variant for table elements |
| Property | Type | Default | Description |
|---|---|---|---|
top | boolean | false | Position caption at top of table |
divider: Applied to tbody elements to add visual separation between groupsresponsive or responsive="" - Always responsiveresponsive="sm" - Responsive above 576pxresponsive="md" - Responsive above 768pxresponsive="lg" - Responsive above 992pxresponsive="xl" - Responsive above 1200pxresponsive="xxl" - Responsive above 1400pxThe table directive automatically:
.table class and variantsThis library generates and works with standard Bootstrap 5 table classes:
table - Base table stylingtable-striped - Row stripingtable-striped-columns - Column stripingtable-hover - Hover effectstable-bordered - Table borderstable-borderless - No borderstable-sm - Compact sizingtable-responsive - Responsive wrappertable-responsive-{breakpoint} - Breakpoint-specific responsivetable-{color} - Color variantscaption-top - Caption positioningtable-group-divider - Group separatorsAvailable Bootstrap color variants:
primary, secondary, success, dangerwarning, info, light, darkTable not responsive
responsive attribute is properly setStriping not working
striped attribute is correctly appliedtbody elementsColors not applying
Hover effects not working
[hover]="true" is set on the tableCaption positioning issues
[top]="true" on caption element, not tableThis project is licensed under the MIT License.
For issues and questions, please open an issue on the GitHub repository.
FAQs
A powerful Angular library that provides Bootstrap-styled table components with advanced styling options, responsive behavior, and flexible color theming for data presentation.
We found that @pmeig/ngb-table demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Malicious packages published to npm, PyPI, Go Modules, crates.io, and Packagist impersonate developer tooling to fetch staged malware, steal credentials and wallets, and enable remote access.
Security News
Microsoft has released an open source toolkit for enforcing runtime security policies on AI agents as adoption accelerates faster than governance controls.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.