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 howcTable based tables look in CoreUI.

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

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

Striped rows

Usestriped property to add zebra-striping to any table row within thetbody.

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

Striped columns

UsestripedColumns 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

Usecolor property to add some color variants.

#	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

Hoverable rows

Usehover property to enable a hover state on table rows within atbody.

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

These hoverable rows can also be combined with thestriped variant:

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

Active tables

Highlight a table row or cell by adding acTableActive 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

Addbordered 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

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

Borderless

Addborderless property for a table without borders.

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

Small tables

Addsmall property to make anycTable more compact by cutting all cellpadding in half.

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

Vertical alignment

Table cells ofthead are always vertical aligned to thebottom. Table cells intbody inherit their alignment fromcTable and are aligned to the the top by default. Use the alignproperty 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 propcolor="light" orcolor="dark" to makethead 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

Acaption 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 withcaption="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 aresponsive 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 usingresponsive="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 fortable 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 fortr ortd elements