On this page

Angular Table Directives

Documentation and examples for opt-in styling of Angular tables.

Examples

Using the most basic table CoreUI, here's how cTable based tables look in CoreUI.

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';

@Component({
  selector: 'docs-table01',
  templateUrl: './table01.component.html',
  standalone: true,
  imports: [TableDirective]
})
export class Table01Component {}

Variants

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

Class	Heading	Heading
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell

import { Component } from '@angular/core';
import { TableColorDirective, TableDirective } from '@coreui/angular';

@Component({
  selector: 'docs-table02',
  templateUrl: './table02.component.html',
  standalone: true,
  imports: [TableDirective, TableColorDirective]
})
export class Table02Component {}

Striped rows

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

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';

@Component({
  selector: 'docs-table03',
  templateUrl: './table03.component.html',
  standalone: true,
  imports: [TableDirective]
})
export class Table03Component {}

Striped columns

Use stripedColumns property to add zebra-striping to any table column.

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';

@Component({
  selector: 'docs-table22',
  templateUrl: './table22.component.html',
  standalone: true,
  imports: [TableDirective]
})
export class Table22Component {}

Use color property to add some color variants.

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';

@Component({
  selector: 'docs-table04',
  templateUrl: './table04.component.html',
  standalone: true,
  imports: [TableDirective]
})
export class Table04Component {}

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';

@Component({
  selector: 'docs-table05',
  templateUrl: './table05.component.html',
  standalone: true,
  imports: [TableDirective]
})
export class Table05Component {}

Hoverable rows

Use hover property to enable a hover state on table rows within a tbody.

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';

@Component({
  selector: 'docs-table06',
  templateUrl: './table06.component.html',
  standalone: true,
  imports: [TableDirective]
})
export class Table06Component {}

These hoverable rows can also be combined with the striped variant:

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';

@Component({
  selector: 'docs-table07',
  templateUrl: './table07.component.html',
  standalone: true,
  imports: [TableDirective]
})
export class Table07Component {}

Active tables

Highlight a table row or cell by adding a cTableActive property.

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

import { Component } from '@angular/core';
import { TableActiveDirective, TableDirective } from '@coreui/angular';

@Component({
  selector: 'docs-table08',
  templateUrl: './table08.component.html',
  standalone: true,
  imports: [TableDirective, TableActiveDirective]
})
export class Table08Component {}

Bordered tables

Add bordered property for borders on all sides of the table and cells.

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

import { Component } from '@angular/core';
import { TableDirective } from '@coreui/angular';

@Component({
  selector: 'docs-table09',
  templateUrl: './table09.component.html',
  standalone: true,
  imports: [TableDirective]
})
export class Table09Component {}

Border color utilities can be added to change colors:

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

import { Component } from '@angular/core';
import { BorderDirective, TableDirective } from '@coreui/angular';

@Component({
  selector: 'docs-table10',
  templateUrl: './table10.component.html',
  standalone: true,
  imports: [TableDirective, BorderDirective]
})
export class Table10Component {}

Borderless

Add borderless property for a table without borders.

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Small tables

Add small property to make any cTable more compact by cutting all cell padding in half.

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

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.

Heading 1	Heading 2	Heading 3	Heading 4
This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	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.
This cell inherits `vertical-align: bottom;` from the table row	This cell inherits `vertical-align: bottom;` from the table row	This cell inherits `vertical-align: bottom;` from the table row	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.
This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	This cell is aligned to the top.	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.

Nesting

Border styles, active styles, and table variants are not inherited by nested tables.

Class

Heading

Mark

Otto

@mdo

Header	Header	Header
A	First	Last
B	First	Last
C	First	Last

Larry the Bird

@twitter

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.

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Table foot

#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter
Footer	Footer	Footer	Footer

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.

List of users
#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

You can also put a caption on the top of the table with caption="top".

List of users
#	Class	Heading	Heading
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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.

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

Breakpoint specific

Or pick a maximum breakpoint with which to have a responsive table up to by using responsive="sm|md|lg|xl|xxl".

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

API reference

Table Module

import { TableModule, UtilitiesModule } from '@coreui/angular';

@NgModule({
   imports: [
     TableModule,
     UtilitiesModule
   ]
})
export class AppModule() { }

cTable

directive for table element

Inputs:

prop	type	default	description
`align`	`Alignments`	undefined	table cells vertical alignment
`borderColor`	`Colors`	undefined	border color for bordered table
`bordered`	`boolean`	undefined	adds borders on all sides of the table and cells
`borderless`	`boolean`	undefined	for a table without borders at all
`caption`	`top`	undefined	puts `caption` on the top of the table
`color`	`Colors`	undefined	sets color of whole table
`hover`	`boolean`	undefined	enable a hover state on table rows within a `tbody`
`responsive`	`boolean / breakpoint`	undefined	adds responsive wrapper to table or pick a maximum breakpoint
`small`	`boolean`	undefined	makes compact table by cutting all cell padding in half
`striped`	`boolean`	undefined	adds striping to any table row within the `tbody`
`stripedColumns`	`boolean`	undefined	adds striping to any table column

cTableActive

directive for tr or td elements

Inputs:

prop	type	default	description
`cTableActive`	`boolean`	undefined	add highlight to row `tr` or cell `td`

cTableColor

directive for table, thead, th, tbody, tfoot tr or td elements

  Input:

prop	type	default	description
`cTableColor`	`Colors`	undefined	add color tables, rows or individual cells

cAlign

directive for table, thead, th, tbody, tfoot tr or td elements

Input:

prop	type	default	description
`cAlign`	`top` `bottom` `middle`	undefined	vertical alignment for cells `table`, `tr` or `td`