From f0e7ece05f0057e5ccbc897845c50a932b0e3a1c Mon Sep 17 00:00:00 2001 From: "Bajohr, Rayk" Date: Tue, 28 Jul 2026 11:50:30 +0200 Subject: [PATCH] docs: improve HTML table description and examples --- .../lists-tables-trees/html-table.md | 79 ++++++++++++++++++- .../e2e/element-examples/static.spec.ts | 6 +- ...-element-examples-chromium-light-linux.png | 3 - ...c-element-examples-chromium-dark-linux.png | 3 + ...-element-examples-chromium-light-linux.png | 3 + .../datatable--html-table-basic.yaml | 15 ++++ ...n-element-examples-chromium-dark-linux.png | 3 + ...-element-examples-chromium-light-linux.png | 3 + .../datatable--html-table-caption.yaml | 10 +++ ...-element-examples-chromium-dark-linux.png} | 0 ...-element-examples-chromium-light-linux.png | 3 + ...e-element-examples-chromium-dark-linux.png | 3 + ...-element-examples-chromium-light-linux.png | 3 + .../datatable--html-table-responsive.yaml | 21 +++++ ...s-element-examples-chromium-dark-linux.png | 3 + ...-element-examples-chromium-light-linux.png | 3 + .../datatable--html-table-variants.yaml | 19 +++++ ...tstrap.yaml => datatable--html-table.yaml} | 14 ++-- .../src/styles/bootstrap/_variables.scss | 2 +- .../examples/datatable/html-table-basic.html | 21 +++++ .../examples/datatable/html-table-basic.ts | 12 +++ .../datatable/html-table-caption.html | 15 ++++ .../examples/datatable/html-table-caption.ts | 12 +++ .../datatable/html-table-responsive.html | 29 +++++++ .../datatable/html-table-responsive.ts | 12 +++ .../datatable/html-table-variants.html | 26 ++++++ .../examples/datatable/html-table-variants.ts | 12 +++ .../{bootstrap.html => html-table.html} | 0 .../datatable/{bootstrap.ts => html-table.ts} | 2 +- 29 files changed, 320 insertions(+), 17 deletions(-) delete mode 100644 playwright/snapshots/static.spec.ts-snapshots/datatable--bootstrap-element-examples-chromium-light-linux.png create mode 100644 playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic-element-examples-chromium-dark-linux.png create mode 100644 playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic-element-examples-chromium-light-linux.png create mode 100644 playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic.yaml create mode 100644 playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption-element-examples-chromium-dark-linux.png create mode 100644 playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption-element-examples-chromium-light-linux.png create mode 100644 playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption.yaml rename playwright/snapshots/static.spec.ts-snapshots/{datatable--bootstrap-element-examples-chromium-dark-linux.png => datatable--html-table-element-examples-chromium-dark-linux.png} (100%) create mode 100644 playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-element-examples-chromium-light-linux.png create mode 100644 playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive-element-examples-chromium-dark-linux.png create mode 100644 playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive-element-examples-chromium-light-linux.png create mode 100644 playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive.yaml create mode 100644 playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants-element-examples-chromium-dark-linux.png create mode 100644 playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants-element-examples-chromium-light-linux.png create mode 100644 playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants.yaml rename playwright/snapshots/static.spec.ts-snapshots/{datatable--bootstrap.yaml => datatable--html-table.yaml} (87%) create mode 100644 src/app/examples/datatable/html-table-basic.html create mode 100644 src/app/examples/datatable/html-table-basic.ts create mode 100644 src/app/examples/datatable/html-table-caption.html create mode 100644 src/app/examples/datatable/html-table-caption.ts create mode 100644 src/app/examples/datatable/html-table-responsive.html create mode 100644 src/app/examples/datatable/html-table-responsive.ts create mode 100644 src/app/examples/datatable/html-table-variants.html create mode 100644 src/app/examples/datatable/html-table-variants.ts rename src/app/examples/datatable/{bootstrap.html => html-table.html} (100%) rename src/app/examples/datatable/{bootstrap.ts => html-table.ts} (93%) diff --git a/docs/components/lists-tables-trees/html-table.md b/docs/components/lists-tables-trees/html-table.md index 9516b198cd..e0829d178e 100644 --- a/docs/components/lists-tables-trees/html-table.md +++ b/docs/components/lists-tables-trees/html-table.md @@ -23,8 +23,79 @@ it comes with some inherent limitations. ## Code --- -For simple HTML tables the general [Bootstrap Tables](https://getbootstrap.com/docs/5.1/content/tables/) -documentation applies. Add the CSS class `table-hover` for row hover effect. The theme comes with the -following styling for `table`: +Element styles native HTML tables with CSS classes. Apply the `.table` class to a `` element. - + + +### Usage + +Use semantic table markup with a caption, table headers, and table body. Add `scope="col"` to column headers and `scope="row"` to row headers so assistive technologies can associate headers with their cells. + +```html +
+ + + + + + + + + + + + + +
Device status
DeviceStatus
Cooling unitOperational
+``` + + + +### Variants + +Add `.table-sm` to use condensed rows. Add `.table-striped` to distinguish alternating body rows, and `.table-hover` to provide hover feedback for body rows. + +Apply `.table-active` to a row or cell to highlight it. Use `.table-success`, `.table-info`, `.table-warning`, or `.table-danger` on a row or cell to communicate its status. + +```html + + +
+ + + + + + + + +``` + + + +### Captions + +Captions are displayed below the table by default. Add `.caption-top` to the `` element to display the caption above it. + +```html +
+ + +
Device status
+``` + + + +### Responsive tables + +Wrap a wide table in `.table-responsive` to allow horizontal scrolling. Use a breakpoint variant such as `.table-responsive-md` to enable scrolling only below that breakpoint. + +```html +
+ + +
+
+``` + + diff --git a/playwright/e2e/element-examples/static.spec.ts b/playwright/e2e/element-examples/static.spec.ts index c287a411c7..425157fc02 100644 --- a/playwright/e2e/element-examples/static.spec.ts +++ b/playwright/e2e/element-examples/static.spec.ts @@ -13,7 +13,11 @@ test('colors/color-utils', ({ si }) => si.static()); test('custom-form-elements/checkbox', ({ si }) => si.static()); test('custom-form-elements/radio', ({ si }) => si.static()); test('custom-form-elements/select', ({ si }) => si.static()); -test('datatable/bootstrap', ({ si }) => si.static()); +test('datatable/html-table', ({ si }) => si.static()); +test('datatable/html-table-basic', ({ si }) => si.static()); +test('datatable/html-table-caption', ({ si }) => si.static()); +test('datatable/html-table-responsive', ({ si }) => si.static()); +test('datatable/html-table-variants', ({ si }) => si.static()); test('datatable/datatable-footer', async ({ si }) => { test.setTimeout(60000); await si.static({ disabledA11yRules: ['scrollable-region-focusable'] }); diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--bootstrap-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--bootstrap-element-examples-chromium-light-linux.png deleted file mode 100644 index 5b4f84dd37..0000000000 --- a/playwright/snapshots/static.spec.ts-snapshots/datatable--bootstrap-element-examples-chromium-light-linux.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:148956d13a6f431e6ed87aa185d3cf97f16f79b03e505a1a8273cac70f9189b5 -size 29242 diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic-element-examples-chromium-dark-linux.png new file mode 100644 index 0000000000..bf02c3d241 --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic-element-examples-chromium-dark-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:004b10df103bfebe3be45343b69e8fafd80cfaef5644f1218495729df9f45e4d +size 13080 diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic-element-examples-chromium-light-linux.png new file mode 100644 index 0000000000..70997df7a7 --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic-element-examples-chromium-light-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:84e6db0a901932bbbc147d17d64c35d9b8676f98d04f67d5efdea016602a7a77 +size 12170 diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic.yaml b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic.yaml new file mode 100644 index 0000000000..79bfd7ea9b --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-basic.yaml @@ -0,0 +1,15 @@ +- table: + - rowgroup: + - row "Device Status Last updated": + - columnheader "Device" + - columnheader "Status" + - columnheader "Last updated" + - rowgroup: + - row /Cooling unit Operational \d+:\d+/: + - rowheader "Cooling unit" + - cell "Operational" + - cell /\d+:\d+/ + - row /Ventilation unit Operational \d+:\d+/: + - rowheader "Ventilation unit" + - cell "Operational" + - cell /\d+:\d+/ \ No newline at end of file diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption-element-examples-chromium-dark-linux.png new file mode 100644 index 0000000000..e19080d068 --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption-element-examples-chromium-dark-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:bf04b9aa248b3211cd5abe599af83f15fbed4765a4495c14d993540597d41309 +size 9637 diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption-element-examples-chromium-light-linux.png new file mode 100644 index 0000000000..2a2f21e814 --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption-element-examples-chromium-light-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e52a7146d0200390bc193bff2032a0d89ec0cf46a7e28854b4a35b4298c0cdc1 +size 9234 diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption.yaml b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption.yaml new file mode 100644 index 0000000000..6f3d1d46f8 --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-caption.yaml @@ -0,0 +1,10 @@ +- table "Device status": + - caption: Device status + - rowgroup: + - row "Device Status": + - columnheader "Device" + - columnheader "Status" + - rowgroup: + - row "Cooling unit Operational": + - rowheader "Cooling unit" + - cell "Operational" \ No newline at end of file diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--bootstrap-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-element-examples-chromium-dark-linux.png similarity index 100% rename from playwright/snapshots/static.spec.ts-snapshots/datatable--bootstrap-element-examples-chromium-dark-linux.png rename to playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-element-examples-chromium-dark-linux.png diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-element-examples-chromium-light-linux.png new file mode 100644 index 0000000000..f1e34b2752 --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-element-examples-chromium-light-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:60d5c8e4d03c48ecdb0fb24372d8857da6d5c23bbbb23061ce7ad11405619ec7 +size 29248 diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive-element-examples-chromium-dark-linux.png new file mode 100644 index 0000000000..46c7cd59d8 --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive-element-examples-chromium-dark-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f64a7dfcbd015e660700eafb88c9f0cb7562c68ca9906464d4d8f96198cfc639 +size 16601 diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive-element-examples-chromium-light-linux.png new file mode 100644 index 0000000000..a1991b095a --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive-element-examples-chromium-light-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0568e48491ebad6d1e61ccab68e7680a66ab833908f2a95f5f6177c6d89a5a53 +size 15309 diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive.yaml b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive.yaml new file mode 100644 index 0000000000..a6047e2a33 --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-responsive.yaml @@ -0,0 +1,21 @@ +- table: + - rowgroup: + - row "Device Status Last updated Location Operator": + - columnheader "Device" + - columnheader "Status" + - columnheader "Last updated" + - columnheader "Location" + - columnheader "Operator" + - rowgroup: + - row /Cooling unit Operational \d+:\d+ Building A Alex Smith/: + - rowheader "Cooling unit" + - cell "Operational" + - cell /\d+:\d+/ + - cell "Building A" + - cell "Alex Smith" + - row /Ventilation unit Operational \d+:\d+ Building B Jordan Lee/: + - rowheader "Ventilation unit" + - cell "Operational" + - cell /\d+:\d+/ + - cell "Building B" + - cell "Jordan Lee" \ No newline at end of file diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants-element-examples-chromium-dark-linux.png new file mode 100644 index 0000000000..46c19c2774 --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants-element-examples-chromium-dark-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7c1cea9bb10da761821116070ca0f8367ef1cb4fb87a02ab408e01710ce7994e +size 16393 diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants-element-examples-chromium-light-linux.png new file mode 100644 index 0000000000..4091609854 --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants-element-examples-chromium-light-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4954923c89e76809bf4cf921006a939ca7e764d64fd0badaa683bf97ac6c30f2 +size 15618 diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants.yaml b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants.yaml new file mode 100644 index 0000000000..8e1dfa4620 --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table-variants.yaml @@ -0,0 +1,19 @@ +- table: + - rowgroup: + - row "Device Status Last updated": + - columnheader "Device" + - columnheader "Status" + - columnheader "Last updated" + - rowgroup: + - row /Cooling unit Operational \d+:\d+/: + - rowheader "Cooling unit" + - cell "Operational" + - cell /\d+:\d+/ + - row /Ventilation unit Selected \d+:\d+/: + - rowheader "Ventilation unit" + - cell "Selected" + - cell /\d+:\d+/ + - row /Heating unit Maintenance required \d+:\d+/: + - rowheader "Heating unit" + - cell "Maintenance required" + - cell /\d+:\d+/ \ No newline at end of file diff --git a/playwright/snapshots/static.spec.ts-snapshots/datatable--bootstrap.yaml b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table.yaml similarity index 87% rename from playwright/snapshots/static.spec.ts-snapshots/datatable--bootstrap.yaml rename to playwright/snapshots/static.spec.ts-snapshots/datatable--html-table.yaml index 4eec2e17fa..3bc1ab1e11 100644 --- a/playwright/snapshots/static.spec.ts-snapshots/datatable--bootstrap.yaml +++ b/playwright/snapshots/static.spec.ts-snapshots/datatable--html-table.yaml @@ -16,19 +16,19 @@ - cell "selected": - checkbox "selected" - cell "open dropdown": - - button "open dropdown" + - button "open dropdown":  - cell - cell "Cooling coil device mode B1'Flr_1'RSegm1'HVAC" - cell - cell - cell - cell /\d+%/: - - textbox "value" [disabled] + - textbox "value" [disabled]: /\d+%/ - row "selected open dropdown Cooling coil cooling request Control Mode": - cell "selected": - checkbox "selected" - cell "open dropdown": - - button "open dropdown" + - button "open dropdown":  - cell - cell "Cooling coil cooling request" - cell @@ -41,26 +41,26 @@ - cell "selected": - checkbox "selected" - cell "open dropdown": - - button "open dropdown" + - button "open dropdown":  - cell - cell "Cooling coil dehumidification request" - cell - cell - cell - cell /\d+%/: - - textbox "value" [disabled] + - textbox "value" [disabled]: /\d+%/ - row /selected open dropdown Cooling coil available for cooling \d+%/: - cell "selected": - checkbox "selected" - cell "open dropdown": - - button "open dropdown" + - button "open dropdown":  - cell - cell "Cooling coil available for cooling" - cell - cell - cell - cell /\d+%/: - - textbox "value" [disabled] + - textbox "value" [disabled]: /\d+%/ - text: Settings Condensed rows - checkbox "Check to apply the table-sm class for condensed row height." - text: Check to apply the table-sm class for condensed row height. Hoverable rows diff --git a/projects/element-theme/src/styles/bootstrap/_variables.scss b/projects/element-theme/src/styles/bootstrap/_variables.scss index d6822aaeae..55e847cea8 100644 --- a/projects/element-theme/src/styles/bootstrap/_variables.scss +++ b/projects/element-theme/src/styles/bootstrap/_variables.scss @@ -273,7 +273,7 @@ $table-striped-order: odd !default; $table-group-separator-color: currentColor !default; -$table-caption-color: $text-muted !default; +$table-caption-color: semantic-tokens.$element-text-secondary !default; $table-variants: ( 'success': semantic-tokens.$element-base-success, diff --git a/src/app/examples/datatable/html-table-basic.html b/src/app/examples/datatable/html-table-basic.html new file mode 100644 index 0000000000..eff73685f0 --- /dev/null +++ b/src/app/examples/datatable/html-table-basic.html @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + +
DeviceStatusLast updated
Cooling unitOperational10:30
Ventilation unitOperational10:28
diff --git a/src/app/examples/datatable/html-table-basic.ts b/src/app/examples/datatable/html-table-basic.ts new file mode 100644 index 0000000000..652d4a8dc4 --- /dev/null +++ b/src/app/examples/datatable/html-table-basic.ts @@ -0,0 +1,12 @@ +/** + * Copyright (c) Siemens 2016 - 2026 + * SPDX-License-Identifier: MIT + */ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-sample', + templateUrl: './html-table-basic.html', + host: { class: 'p-5' } +}) +export class SampleComponent {} diff --git a/src/app/examples/datatable/html-table-caption.html b/src/app/examples/datatable/html-table-caption.html new file mode 100644 index 0000000000..2168f70b5d --- /dev/null +++ b/src/app/examples/datatable/html-table-caption.html @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + +
Device status
DeviceStatus
Cooling unitOperational
diff --git a/src/app/examples/datatable/html-table-caption.ts b/src/app/examples/datatable/html-table-caption.ts new file mode 100644 index 0000000000..3810e077a4 --- /dev/null +++ b/src/app/examples/datatable/html-table-caption.ts @@ -0,0 +1,12 @@ +/** + * Copyright (c) Siemens 2016 - 2026 + * SPDX-License-Identifier: MIT + */ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-sample', + templateUrl: './html-table-caption.html', + host: { class: 'p-5' } +}) +export class SampleComponent {} diff --git a/src/app/examples/datatable/html-table-responsive.html b/src/app/examples/datatable/html-table-responsive.html new file mode 100644 index 0000000000..58427b2a38 --- /dev/null +++ b/src/app/examples/datatable/html-table-responsive.html @@ -0,0 +1,29 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
DeviceStatusLast updatedLocationOperator
Cooling unitOperational10:30Building AAlex Smith
Ventilation unitOperational10:28Building BJordan Lee
+
diff --git a/src/app/examples/datatable/html-table-responsive.ts b/src/app/examples/datatable/html-table-responsive.ts new file mode 100644 index 0000000000..723864dae5 --- /dev/null +++ b/src/app/examples/datatable/html-table-responsive.ts @@ -0,0 +1,12 @@ +/** + * Copyright (c) Siemens 2016 - 2026 + * SPDX-License-Identifier: MIT + */ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-sample', + templateUrl: './html-table-responsive.html', + host: { class: 'p-5' } +}) +export class SampleComponent {} diff --git a/src/app/examples/datatable/html-table-variants.html b/src/app/examples/datatable/html-table-variants.html new file mode 100644 index 0000000000..bc9ae3e71b --- /dev/null +++ b/src/app/examples/datatable/html-table-variants.html @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + +
DeviceStatusLast updated
Cooling unitOperational10:30
Ventilation unitSelected10:28
Heating unitMaintenance required10:20
diff --git a/src/app/examples/datatable/html-table-variants.ts b/src/app/examples/datatable/html-table-variants.ts new file mode 100644 index 0000000000..3805412c9a --- /dev/null +++ b/src/app/examples/datatable/html-table-variants.ts @@ -0,0 +1,12 @@ +/** + * Copyright (c) Siemens 2016 - 2026 + * SPDX-License-Identifier: MIT + */ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-sample', + templateUrl: './html-table-variants.html', + host: { class: 'p-5' } +}) +export class SampleComponent {} diff --git a/src/app/examples/datatable/bootstrap.html b/src/app/examples/datatable/html-table.html similarity index 100% rename from src/app/examples/datatable/bootstrap.html rename to src/app/examples/datatable/html-table.html diff --git a/src/app/examples/datatable/bootstrap.ts b/src/app/examples/datatable/html-table.ts similarity index 93% rename from src/app/examples/datatable/bootstrap.ts rename to src/app/examples/datatable/html-table.ts index c9b1e7d369..106b953333 100644 --- a/src/app/examples/datatable/bootstrap.ts +++ b/src/app/examples/datatable/html-table.ts @@ -10,7 +10,7 @@ import { SiIconComponent } from '@siemens/element-ng/icon'; @Component({ selector: 'app-sample', imports: [FormsModule, SiFormItemComponent, SiIconComponent], - templateUrl: './bootstrap.html', + templateUrl: './html-table.html', host: { class: 'p-5' } }) export class SampleComponent {