Documentation and examples for opt-in styling of Angular tables.
Available in Other JavaScript Frameworks
CoreUI Angular Table Directives is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:
On this page
Examples
Using the most basic table CoreUI, here’s how cTable based tables look in CoreUI.
import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table',
templateUrl: './table.component.html',
imports: [TableDirective]
})
export class TableComponent {}<table cTable>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</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 colSpan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Variants
Use contextual classes to color tables, table rows or individual cells.
import { Component } from '@angular/core';
import { TableColorDirective, TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-variants',
templateUrl: './table-variants.component.html',
imports: [TableDirective, TableColorDirective]
})
export class TableVariantsComponent {}<table cTable>
<thead>
<tr>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Default</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr cTableColor="primary">
<th scope="row">Primary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr cTableColor="secondary">
<th scope="row">Secondary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr cTableColor="success">
<th scope="row">Success</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr cTableColor="danger">
<th scope="row">Danger</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr cTableColor="warning">
<th scope="row">Warning</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr cTableColor="info">
<th scope="row">Info</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr cTableColor="light">
<th scope="row">Light</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr cTableColor="dark">
<th scope="row">Dark</th>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
Striped rows
Use striped property to add zebra-striping to any table row within the tbody.
import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-striped-rows',
templateUrl: './table-striped-rows.component.html',
imports: [TableDirective]
})
export class TableStripedRowsComponent {}<table [striped]="true" cTable>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</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 colSpan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Striped columns
Use stripedColumns property to add zebra-striping to any table column.
import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-striped-columns',
templateUrl: './table-striped-columns.component.html',
imports: [TableDirective]
})
export class TableStripedColumnsComponent {}<table stripedColumns cTable>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</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 colSpan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Use color property to add some color variants.
import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-striped-columns-2',
templateUrl: './table-striped-columns-2.component.html',
imports: [TableDirective]
})
export class TableStripedColumns2Component {}<table [striped]="true" cTable color="dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</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 colSpan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-striped-columns-3',
templateUrl: './table-striped-columns-3.component.html',
imports: [TableDirective]
})
export class TableStripedColumns3Component {}<table [striped]="true" cTable color="success">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</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 colSpan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Hoverable rows
Use hover property to enable a hover state on table rows within a tbody.
import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-hoverable-rows',
templateUrl: './table-hoverable-rows.component.html',
imports: [TableDirective]
})
export class TableHoverableRowsComponent {}<table cTable hover>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</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 colSpan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
These hoverable rows can also be combined with the striped variant:
import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-hoverable-rows-2',
templateUrl: './table-hoverable-rows-2.component.html',
imports: [TableDirective]
})
export class TableHoverableRows2Component {}<table cTable hover striped>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</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 colSpan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Active tables
Highlight a table row or cell by adding a cTableActive property.
import { Component } from '@angular/core';
import { TableActiveDirective, TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-active-tables',
templateUrl: './table-active-tables.component.html',
imports: [TableDirective, TableActiveDirective]
})
export class TableActiveTablesComponent {}<table cTable>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr [cTableActive]="true">
<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 [cTableActive]="true" colSpan="2">
Larry the Bird
</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Bordered tables
Add bordered property for borders on all sides of the table and cells.
import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-bordered-tables',
templateUrl: './table-bordered-tables.component.html',
imports: [TableDirective]
})
export class TableBorderedTablesComponent {}<table bordered cTable>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</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 colSpan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Border color utilities can be added to change colors:
import { Component } from '@angular/core';
import { BorderDirective, TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-bordered-tables-2',
templateUrl: './table-bordered-tables-2.component.html',
imports: [TableDirective, BorderDirective]
})
export class TableBorderedTables2Component {}<table [cBorder]="1" borderColor="primary" bordered cTable>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</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 colSpan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Borderless
Add borderless property for a table without borders.
import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-borderless',
templateUrl: './table-borderless.component.html',
imports: [TableDirective]
})
export class TableBorderlessComponent {}<table borderless cTable hover>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</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 colSpan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Small tables
Add small property to make any cTable more compact by cutting all cell padding in half.
import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-small-tables',
templateUrl: './table-small-tables.component.html',
imports: [TableDirective]
})
export class TableSmallTablesComponent {}<table cTable small>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</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 colSpan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Vertical alignment
Table cells of thead are always vertical aligned to the
bottom. Table cells in tbody inherit their alignment from
cTable and are aligned to the the top by default. Use the align
property to re-align where needed.
import { Component } from '@angular/core';
import { AlignDirective, TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-vertical-alignment',
templateUrl: './table-vertical-alignment.component.html',
imports: [TableDirective, AlignDirective]
})
export class TableVerticalAlignmentComponent {}<table responsive cAlign="middle" cTable>
<thead>
<tr>
<th class="w-25" scope="col">
Heading 1
</th>
<th class="w-25" scope="col">
Heading 2
</th>
<th class="w-25" scope="col">
Heading 3
</th>
<th class="w-25" scope="col">
Heading 4
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
This cell inherits <code>vertical-align: middle;</code> from the table
</td>
<td>
This cell inherits <code>vertical-align: middle;</code> from the table
</td>
<td>
This cell inherits <code>vertical-align: middle;</code> from the table
</td>
<td>
This here is some placeholder text, intended to take up quite a bit of
vertical space, to demonstrate how the vertical alignment works in the
preceding cells.
</td>
</tr>
<tr cAlign="bottom">
<td>
This cell inherits <code>vertical-align: bottom;</code> from the table row
</td>
<td>
This cell inherits <code>vertical-align: bottom;</code> from the table row
</td>
<td>
This cell inherits <code>vertical-align: bottom;</code> from the table row
</td>
<td>
This here is some placeholder text, intended to take up quite a bit of
vertical space, to demonstrate how the vertical alignment works in the
preceding cells.
</td>
</tr>
<tr>
<td>
This cell inherits <code>vertical-align: middle;</code> from the table
</td>
<td>
This cell inherits <code>vertical-align: middle;</code> from the table
</td>
<td cAlign="top">This cell is aligned to the top.</td>
<td>
This here is some placeholder text, intended to take up quite a bit of
vertical space, to demonsCTableRowate how the vertical alignment works in the
preceding cells.
</td>
</tr>
</tbody>
</table>
Nesting
Border styles, active styles, and table variants are not inherited by nested tables.
import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-nesting',
templateUrl: './table-nesting.component.html',
imports: [TableDirective]
})
export class TableNestingComponent {}<table striped cTable>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th colSpan="4">
<table cTable>
<thead>
<tr>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col">Header</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">A</th>
<td>First</td>
<td>Last</td>
</tr>
<tr>
<th scope="row">B</th>
<td>First</td>
<td>Last</td>
</tr>
<tr>
<th scope="row">C</th>
<td>First</td>
<td>Last</td>
</tr>
</tbody>
</table>
</th>
</tr>
<tr>
<th scope="row">3</th>
<td colSpan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>Table head
Similar to tables and dark tables, use the modifier prop color="light" or color="dark" to make thead appear light or dark gray.
import { Component } from '@angular/core';
import { TableColorDirective, TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-head',
templateUrl: './table-head.component.html',
imports: [TableDirective, TableColorDirective]
})
export class TableHeadComponent {}<table cTable>
<thead cTableColor="light">
<tr>
<th scope="col">#</th>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</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>
import { Component } from '@angular/core';
import { TableColorDirective, TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-head-2',
templateUrl: './table-head-2.component.html',
imports: [TableDirective, TableColorDirective]
})
export class TableHead2Component {}<table cTable>
<thead cTableColor="dark">
<tr>
<th scope="col">#</th>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</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 colSpan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Table foot
import { Component } from '@angular/core';
import { TableColorDirective, TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-foot',
templateUrl: './table-foot.component.html',
imports: [TableDirective, TableColorDirective]
})
export class TableFootComponent {}<table cTable>
<thead cTableColor="dark">
<tr>
<th scope="col">#</th>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</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 colSpan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
<tfoot cTableColor="dark">
<tr>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
</tr>
</tfoot>
</table>
Captions
A caption functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-captions',
templateUrl: './table-captions.component.html',
imports: [TableDirective]
})
export class TableCaptionsComponent {}<table cTable>
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</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>
You can also put a caption on the top of the table with caption="top".
import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-captions-2',
templateUrl: './table-captions-2.component.html',
imports: [TableDirective]
})
export class TableCaptions2Component {}<table cTable caption="top">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Class</th>
<th scope="col">Heading</th>
<th scope="col">Heading</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>
Responsive tables
Always responsive
Responsive tables allow tables to be scrolled horizontally with ease.
Make any table responsive across all viewports by adding a responsive property.
import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-always-responsive',
templateUrl: './table-always-responsive.component.html',
imports: [TableDirective]
})
export class TableAlwaysResponsiveComponent {}<table cTable [responsive]="true">
<thead >
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>Breakpoint specific
Or pick a maximum breakpoint with which to have a responsive table up to by using responsive="sm|md|lg|xl|xxl".
import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';
@Component({
selector: 'docs-table-breakpoint-specific',
templateUrl: './table-breakpoint-specific.component.html',
imports: [TableDirective]
})
export class TableBreakpointSpecificComponent {}<table cTable responsive="xxl">
<thead >
<tr>
<th scope="col">#</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
API reference
Table Module
import { TableModule, UtilitiesModule } from '@coreui/angular';
@NgModule({
imports: [
TableModule,
UtilitiesModule
]
})
export class AppModule() { }cTable
directive for table element
import { TableDirective } from '@coreui/angular'cTableActive
directive for tr or td elements
import { TableActiveDirective } from '@coreui/angular'cTableColor
directive for table, thead, th, tbody, tfoot tr or td elements
import { TableColorDirective } from '@coreui/angular'| Property | Default | Type |
|---|---|---|
| cTableColor | undefined | string |
Use contextual color for tables, table rows or individual cells. | ||
cAlign
directive for table, thead, th, tbody, tfoot tr or td elements
import { AlignDirective } from '@coreui/angular'