Data Table Themes

Ornamentum data table list has a variety of predefined themes which you can apply to your application. Greater selection of themes are available with different colour variations to chose from.

You can check the user experience of these themes via toggling the predefined themes via theme selector as follows.

Sales Products

IDOrder Method TypeRetailer TypeProduct TypeRevenueQuantityGross Margin
Select
Select
Select
10FaxOutdoors ShopCOOKING GEAR59628.664890.34754797
15FaxOutdoors ShopSLEEPING BAGS87728.963520.39814629
20TelephoneOutdoors ShopLANTERNS6940.031090.36186587
25FaxOutdoors ShopSAFETY62464.888980.24468085
30WebOutdoors ShopCLIMBING ACCESSORIES19476.82960.47613982
35WebOutdoors ShopCLIMBING ACCESSORIES4621.682620.51643991
40TelephoneOutdoors ShopTOOLS32870.48560.49166667
45TelephoneOutdoors ShopKNIVES30940.252750.28895209
50TelephoneOutdoors ShopFIRST AID4057.21800.60070985
55TelephoneGolf ShopWATCHES7939.8660.44272652
Results: 1 -10of20
/ 2

Predefined Themes

Ornamentum bundles prebuilt CSS and source SCSS theme files. However, we recommend you to use the source SCSS files for best browser support with the use of browserlist configuration.

Import the Ornamentum theme style sheet reference to apply theming of your preference. Follow Angular CLI: Global Styles documentation for more information on how to integrate third party style sheets.

Below images illustrate the list of available themes and a glimpse of their appearance.

Base Theme

Minimalistic theme with white colour based variations.

SCSS (recommended): Include Ornamentum theme source SCSS references.

"node_modules/ornamentum/themes/base.theme.scss"
"node_modules/ornamentum/themes/addon.base.theme.scss"

CSS: Include Ornamentum prebuilt CSS references.

"node_modules/ornamentum/prebuilt-themes/base.theme.css"
"node_modules/ornamentum/prebuilt-themes/addon.base.theme.css"

Dark Theme

The following image illustrate the ornamentum Data Table look and feel with its Dark theme.

SCSS (recommended): Include Ornamentum theme source SCSS references.

"node_modules/ornamentum/themes/dark.theme.scss"
"node_modules/ornamentum/themes/addon.dark.theme.scss"

CSS: Include Ornamentum prebuilt CSS references.

"node_modules/ornamentum/prebuilt-themes/dark.theme.css"
"node_modules/ornamentum/prebuilt-themes/addon.dark.theme.css"

Flat Theme

The following image illustrate the ornamentum Data Table look and feel with its Flat theme.

SCSS (recommended): Include Ornamentum theme source SCSS references.

"node_modules/ornamentum/prebuilt-themes/flat.theme.css"
"node_modules/ornamentum/prebuilt-themes/addon.flat.theme.css"

CSS: Include Ornamentum prebuilt CSS references.

"node_modules/ornamentum/prebuilt-themes/flat.theme.css"
"node_modules/ornamentum/prebuilt-themes/addon.flat.theme.css"

Ornamentum Theme

The following image illustrate the ornamentum Data Table look and feel with its Ornamentum theme.

SCSS (recommended): Include Ornamentum theme source SCSS references.

"node_modules/ornamentum/themes/ornamentum.theme.scss"
"node_modules/ornamentum/themes/addon.ornamentum.theme.scss"

CSS: Include Ornamentum prebuilt CSS references.

"node_modules/ornamentum/prebuilt-themes/ornamentum.theme.css"
"node_modules/ornamentum/prebuilt-themes/addon.ornamentum.theme.css"

Aegean Theme

The following image illustrate the ornamentum Data Table look and feel with it's Aegean theme.

SCSS (recommended): Include Ornamentum theme source SCSS references.

 "node_modules/ornamentum/themes/aegean.theme.scss"
 "node_modules/ornamentum/themes/addon.aegean.theme.scss"

CSS: Include Ornamentum prebuilt CSS references.

"node_modules/ornamentum/prebuilt-themes/aegean.theme.css"
"node_modules/ornamentum/prebuilt-themes/addon.aegean.theme.css"
Custom Theming
API Doc for Data Table Themes