diff --git a/packages/core/src/components/table/table/test/with-tds-table-toolbar/primary/darkmode/index.html b/packages/core/src/components/table/table/test/with-tds-table-toolbar/primary/darkmode/index.html
new file mode 100644
index 000000000..e11b5c653
--- /dev/null
+++ b/packages/core/src/components/table/table/test/with-tds-table-toolbar/primary/darkmode/index.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+ <head>
+ <meta charset="UTF-8" />
+ <title>Table - Default</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+ <link rel="stylesheet" href="../../../../../../../../dist/tegel/tegel.css" />
+ <script type="module">
+ import { defineCustomElements } from '../../../../../../../../loader/index.es2017.js';
+ defineCustomElements();
+ </script>
+ </head>
+
+ <body class="tds-mode-dark" style="background-color: var(--tds-grey-958); padding: 20px">
+ <tds-table
+ vertical-dividers="false"
+ compact-design="false"
+ responsive="false"
+ mode-variant="primary"
+ >
+ <tds-table-toolbar table-title="Table toolbar title"></tds-table-toolbar>
+ <tds-table-header>
+ <tds-header-cell cell-key="truck" cell-value="Truck type"></tds-header-cell>
+ <tds-header-cell cell-key="driver" cell-value="Driver name"></tds-header-cell>
+ <tds-header-cell cell-key="country" cell-value="Country"></tds-header-cell>
+ <tds-header-cell
+ cell-key="mileage"
+ cell-value="Mileage"
+ text-align="right"
+ ></tds-header-cell>
+ </tds-table-header>
+ <tds-table-body>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 1"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 2"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 3"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 4"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 5"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 6"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 7"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 8"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 1"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 2"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 3"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 4"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 5"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 6"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 7"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 8"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 1"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 2"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 3"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 4"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 5"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 6"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 7"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 8"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ </tds-table-body>
+ </tds-table>
+ </body>
+</html>
diff --git a/packages/core/src/components/table/table/test/with-tds-table-toolbar/primary/darkmode/table.e2e.ts b/packages/core/src/components/table/table/test/with-tds-table-toolbar/primary/darkmode/table.e2e.ts
new file mode 100644
index 000000000..83ad033bd
--- /dev/null
+++ b/packages/core/src/components/table/table/test/with-tds-table-toolbar/primary/darkmode/table.e2e.ts
@@ -0,0 +1,19 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath =
+ 'src/components/table/table/test/with-tds-table-toolbar/primary/darkmode/index.html';
+
+test.describe.parallel('tds-table-with-tds-table-toolbar-primary-darkmode', () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto(componentTestPath);
+ });
+
+ test('renders default table correctly', async ({ page }) => {
+ const tableComponent = page.getByRole('table');
+ await expect(tableComponent).toHaveCount(1);
+
+ /** Check screenshot diff */
+ await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+ });
+});
diff --git a/packages/core/src/components/table/table/test/with-tds-table-toolbar/primary/darkmode/table.e2e.ts-snapshots/tds-table-with-tds-table-toolbar-primary-darkmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/with-tds-table-toolbar/primary/darkmode/table.e2e.ts-snapshots/tds-table-with-tds-table-toolbar-primary-darkmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..5b7f2170f
Binary files /dev/null and b/packages/core/src/components/table/table/test/with-tds-table-toolbar/primary/darkmode/table.e2e.ts-snapshots/tds-table-with-tds-table-toolbar-primary-darkmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/with-tds-table-toolbar/primary/lightmode/index.html b/packages/core/src/components/table/table/test/with-tds-table-toolbar/primary/lightmode/index.html
new file mode 100644
index 000000000..990c6273a
--- /dev/null
+++ b/packages/core/src/components/table/table/test/with-tds-table-toolbar/primary/lightmode/index.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+ <head>
+ <meta charset="UTF-8" />
+ <title>Table - Default</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+ <link rel="stylesheet" href="../../../../../../../../dist/tegel/tegel.css" />
+ <script type="module">
+ import { defineCustomElements } from '../../../../../../../../loader/index.es2017.js';
+ defineCustomElements();
+ </script>
+ </head>
+
+ <body style="padding: 20px">
+ <tds-table
+ vertical-dividers="false"
+ compact-design="false"
+ responsive="false"
+ mode-variant="primary"
+ >
+ <tds-table-toolbar table-title="Table toolbar title"></tds-table-toolbar>
+ <tds-table-header>
+ <tds-header-cell cell-key="truck" cell-value="Truck type"></tds-header-cell>
+ <tds-header-cell cell-key="driver" cell-value="Driver name"></tds-header-cell>
+ <tds-header-cell cell-key="country" cell-value="Country"></tds-header-cell>
+ <tds-header-cell
+ cell-key="mileage"
+ cell-value="Mileage"
+ text-align="right"
+ ></tds-header-cell>
+ </tds-table-header>
+ <tds-table-body>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 1"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 2"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 3"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 4"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 5"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 6"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 7"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 8"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 1"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 2"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 3"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 4"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 5"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 6"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 7"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 8"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 1"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 2"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 3"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 4"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 5"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 6"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 7"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 8"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ </tds-table-body>
+ </tds-table>
+ </body>
+</html>
diff --git a/packages/core/src/components/table/table/test/with-tds-table-toolbar/primary/lightmode/table.e2e.ts b/packages/core/src/components/table/table/test/with-tds-table-toolbar/primary/lightmode/table.e2e.ts
new file mode 100644
index 000000000..6d998ad75
--- /dev/null
+++ b/packages/core/src/components/table/table/test/with-tds-table-toolbar/primary/lightmode/table.e2e.ts
@@ -0,0 +1,19 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath =
+ 'src/components/table/table/test/with-tds-table-toolbar/primary/lightmode/index.html';
+
+test.describe.parallel('tds-table-with-tds-table-toolbar-primary-lightmode', () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto(componentTestPath);
+ });
+
+ test('renders default table correctly', async ({ page }) => {
+ const tableComponent = page.getByRole('table');
+ await expect(tableComponent).toHaveCount(1);
+
+ /** Check screenshot diff */
+ await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+ });
+});
diff --git a/packages/core/src/components/table/table/test/with-tds-table-toolbar/primary/lightmode/table.e2e.ts-snapshots/tds-table-with-tds-table-toolbar-primary-lightmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/with-tds-table-toolbar/primary/lightmode/table.e2e.ts-snapshots/tds-table-with-tds-table-toolbar-primary-lightmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..90f47f30c
Binary files /dev/null and b/packages/core/src/components/table/table/test/with-tds-table-toolbar/primary/lightmode/table.e2e.ts-snapshots/tds-table-with-tds-table-toolbar-primary-lightmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/with-tds-table-toolbar/secondary/darkmode/index.html b/packages/core/src/components/table/table/test/with-tds-table-toolbar/secondary/darkmode/index.html
new file mode 100644
index 000000000..d77b636e4
--- /dev/null
+++ b/packages/core/src/components/table/table/test/with-tds-table-toolbar/secondary/darkmode/index.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+ <head>
+ <meta charset="UTF-8" />
+ <title>Table - Default</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+ <link rel="stylesheet" href="../../../../../../../../dist/tegel/tegel.css" />
+ <script type="module">
+ import { defineCustomElements } from '../../../../../../../../loader/index.es2017.js';
+ defineCustomElements();
+ </script>
+ </head>
+
+ <body class="tds-mode-dark" style="background-color: var(--tds-grey-900); padding: 20px">
+ <tds-table
+ vertical-dividers="false"
+ compact-design="false"
+ responsive="false"
+ mode-variant="secondary"
+ >
+ <tds-table-toolbar table-title="Table toolbar title"></tds-table-toolbar>
+ <tds-table-header>
+ <tds-header-cell cell-key="truck" cell-value="Truck type"></tds-header-cell>
+ <tds-header-cell cell-key="driver" cell-value="Driver name"></tds-header-cell>
+ <tds-header-cell cell-key="country" cell-value="Country"></tds-header-cell>
+ <tds-header-cell
+ cell-key="mileage"
+ cell-value="Mileage"
+ text-align="right"
+ ></tds-header-cell>
+ </tds-table-header>
+ <tds-table-body>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 1"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 2"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 3"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 4"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 5"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 6"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 7"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 8"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 1"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 2"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 3"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 4"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 5"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 6"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 7"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 8"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 1"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 2"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 3"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 4"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 5"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 6"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 7"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 8"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ </tds-table-body>
+ </tds-table>
+ </body>
+</html>
diff --git a/packages/core/src/components/table/table/test/with-tds-table-toolbar/secondary/darkmode/table.e2e.ts b/packages/core/src/components/table/table/test/with-tds-table-toolbar/secondary/darkmode/table.e2e.ts
new file mode 100644
index 000000000..656af2b07
--- /dev/null
+++ b/packages/core/src/components/table/table/test/with-tds-table-toolbar/secondary/darkmode/table.e2e.ts
@@ -0,0 +1,19 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath =
+ 'src/components/table/table/test/with-tds-table-toolbar/secondary/darkmode/index.html';
+
+test.describe.parallel('tds-table-with-tds-table-toolbar-secondary-darkmode', () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto(componentTestPath);
+ });
+
+ test('renders default table correctly', async ({ page }) => {
+ const tableComponent = page.getByRole('table');
+ await expect(tableComponent).toHaveCount(1);
+
+ /** Check screenshot diff */
+ await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+ });
+});
diff --git a/packages/core/src/components/table/table/test/with-tds-table-toolbar/secondary/darkmode/table.e2e.ts-snapshots/tds-table-with-tds-table-toolbar-secondary-darkmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/with-tds-table-toolbar/secondary/darkmode/table.e2e.ts-snapshots/tds-table-with-tds-table-toolbar-secondary-darkmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..50bab1c0e
Binary files /dev/null and b/packages/core/src/components/table/table/test/with-tds-table-toolbar/secondary/darkmode/table.e2e.ts-snapshots/tds-table-with-tds-table-toolbar-secondary-darkmode-renders-default-table-correctly-1-linux.png differ
diff --git a/packages/core/src/components/table/table/test/with-tds-table-toolbar/secondary/lightmode/index.html b/packages/core/src/components/table/table/test/with-tds-table-toolbar/secondary/lightmode/index.html
new file mode 100644
index 000000000..98dff392b
--- /dev/null
+++ b/packages/core/src/components/table/table/test/with-tds-table-toolbar/secondary/lightmode/index.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+ <head>
+ <meta charset="UTF-8" />
+ <title>Table - Default</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+ <link rel="stylesheet" href="../../../../../../../../dist/tegel/tegel.css" />
+ <script type="module">
+ import { defineCustomElements } from '../../../../../../../../loader/index.es2017.js';
+ defineCustomElements();
+ </script>
+ </head>
+
+ <body style="background-color: var(--tds-grey-50); padding: 20px">
+ <tds-table
+ vertical-dividers="false"
+ compact-design="false"
+ responsive="false"
+ mode-variant="secondary"
+ >
+ <tds-table-toolbar table-title="Table toolbar title"></tds-table-toolbar>
+ <tds-table-header>
+ <tds-header-cell cell-key="truck" cell-value="Truck type"></tds-header-cell>
+ <tds-header-cell cell-key="driver" cell-value="Driver name"></tds-header-cell>
+ <tds-header-cell cell-key="country" cell-value="Country"></tds-header-cell>
+ <tds-header-cell
+ cell-key="mileage"
+ cell-value="Mileage"
+ text-align="right"
+ ></tds-header-cell>
+ </tds-table-header>
+ <tds-table-body>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 1"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 2"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 3"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 4"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 5"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 6"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 7"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 8"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 1"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 2"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 3"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 4"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 5"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 6"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 7"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 8"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 1"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 2"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 3"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 4"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ <tds-table-body-row>
+ <tds-body-cell
+ cell-value="Test value 5"
+ cell-key="truck"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 6"
+ cell-key="driver"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 7"
+ cell-key="country"
+ disable-padding="false"
+ ></tds-body-cell>
+ <tds-body-cell
+ cell-value="Test value 8"
+ cell-key="mileage"
+ disable-padding="false"
+ text-align="right"
+ ></tds-body-cell>
+ </tds-table-body-row>
+ </tds-table-body>
+ </tds-table>
+ </body>
+</html>
diff --git a/packages/core/src/components/table/table/test/with-tds-table-toolbar/secondary/lightmode/table.e2e.ts b/packages/core/src/components/table/table/test/with-tds-table-toolbar/secondary/lightmode/table.e2e.ts
new file mode 100644
index 000000000..a27ab14f7
--- /dev/null
+++ b/packages/core/src/components/table/table/test/with-tds-table-toolbar/secondary/lightmode/table.e2e.ts
@@ -0,0 +1,19 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath =
+ 'src/components/table/table/test/with-tds-table-toolbar/secondary/lightmode/index.html';
+
+test.describe.parallel('tds-table-with-tds-table-toolbar-secondary-lightmode', () => {
+ test.beforeEach(async ({ page }) => {
+ await page.goto(componentTestPath);
+ });
+
+ test('renders default table correctly', async ({ page }) => {
+ const tableComponent = page.getByRole('table');
+ await expect(tableComponent).toHaveCount(1);
+
+ /** Check screenshot diff */
+ await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+ });
+});
diff --git a/packages/core/src/components/table/table/test/with-tds-table-toolbar/secondary/lightmode/table.e2e.ts-snapshots/tds-table-with-tds-table-toolbar-secondary-lightmode-renders-default-table-correctly-1-linux.png b/packages/core/src/components/table/table/test/with-tds-table-toolbar/secondary/lightmode/table.e2e.ts-snapshots/tds-table-with-tds-table-toolbar-secondary-lightmode-renders-default-table-correctly-1-linux.png
new file mode 100644
index 000000000..7401deb05
Binary files /dev/null and b/packages/core/src/components/table/table/test/with-tds-table-toolbar/secondary/lightmode/table.e2e.ts-snapshots/tds-table-with-tds-table-toolbar-secondary-lightmode-renders-default-table-correctly-1-linux.png differ