`, `| `, and ` | ` elements.
+
+As a result, tables no longer require the `ui-table` wrapper and instead can directly utilize the provided CSS classes.
+
+## ๐พ Slots
+
+### โ Removed Slots
+
+The following slots have been removed from the new components:
+
+1. [default]
+
+
+
+## ๐จ CSS Classes
+
+### โจ New CSS Classes
+
+#### [sd-table]
+
+The `sd-table` class is intended for use with the `` element and effectively resets the table styles like padding and border.
+
+#### [sd-table-cell]
+
+The `sd-table-cell` class should be applied to both `| ` and ` | ` elements. It introduces top and bottom borders to the cell and defines font size, text alignment and padding.
+
+#### [sd-table-cell--divider]
+
+This class adds a divider to the right side of the table cell.
+
+#### [sd-table-cell--bg-transparent]
+
+This class adds a transparent background color to the table cell.
+
+#### [sd-table-cell--bg-white]
+
+This class adds a white background color to the table cell.
+
+#### [sd-table-cell--bg-primary-100]
+
+This class adds a background color of primary-100 to the table cell.
+
+#### [sd-table-cell--bg-neutral-100]
+
+This class adds a background color of neutral-100 to the table cell.
+
+
+
+## โ๏ธ Attributes
+
+### โ Removed Attributes
+
+Since the new [sd-table] and [sd-table-cell] are no longer components basically all attributes have been removed:
+
+1. [backgroundAlternating]
+2. [coloredHead]
+3. [columnLayout]
+4. [firstColumnAsHeader]
+5. [firstColumnFixed]
+6. [firstRowAsHeader]
+7. [light]
+
+
+
+## โ๏ธ CSS Variables
+
+### โ Removed CSS variables
+
+The following CSS variables have been removed from the new components:
+
+1. [--component-table-head-color]
+2. [--component-table-first-column-color]
+
+
+
+## ๐ฆป Event Listeners
+
+### โ Removed Event Listeners:
+
+The following event listeners have been removed from the new components:
+
+1. [onGridReady]
+
+
+
+## ๐งช Methods
+
+### โ Removed Methods:
+
+The following methods have been removed from the new components:
+
+1. [componentDidLoad]
+
+
diff --git a/packages/components/src/solid-styles.css b/packages/components/src/solid-styles.css
index 8589d72259..b770673dfe 100644
--- a/packages/components/src/solid-styles.css
+++ b/packages/components/src/solid-styles.css
@@ -4,3 +4,5 @@
@import './styles/paragraph/paragraph.css';
@import './styles/mark/mark.css';
@import './styles/interactive/interactive.css';
+@import './styles/table-cell/table-cell.css';
+@import './styles/table/table.css';
diff --git a/packages/components/src/styles/table-cell/table-cell.css b/packages/components/src/styles/table-cell/table-cell.css
new file mode 100644
index 0000000000..75b6306b9a
--- /dev/null
+++ b/packages/components/src/styles/table-cell/table-cell.css
@@ -0,0 +1,21 @@
+.sd-table-cell {
+ @apply bg-transparent border-solid border-neutral-400 border-y-[1px] border-x-0 text-black text-sm text-left p-4;
+
+ &--divider {
+ @apply border-r-[1px];
+ }
+
+ &--bg {
+ &-white {
+ @apply bg-white;
+ }
+
+ &-primary-100 {
+ @apply bg-primary-100;
+ }
+
+ &-neutral-100 {
+ @apply bg-neutral-100;
+ }
+ }
+}
diff --git a/packages/components/src/styles/table-cell/table-cell.declaration.ts b/packages/components/src/styles/table-cell/table-cell.declaration.ts
new file mode 100644
index 0000000000..1cc7f768b1
--- /dev/null
+++ b/packages/components/src/styles/table-cell/table-cell.declaration.ts
@@ -0,0 +1,20 @@
+import type { Style } from '../../declaration';
+
+export default {
+ styleName: 'sd-table-cell',
+ summary: 'A table cell is a single cell inside a table, used to display discrete data elements.',
+ status: 'stable',
+ since: '1.13',
+ attributes: [
+ {
+ name: 'sd-table-cell--divider',
+ description: 'Displays a divider to the right.'
+ },
+ {
+ name: 'sd-table-cell--bg-...',
+ options: ['white', 'primary-100', 'neutral-100'],
+ description:
+ 'Applies the selected background-color to the table cell. If not selected, a transparent background-color is used per default.'
+ }
+ ]
+} satisfies Style;
diff --git a/packages/components/src/styles/table-cell/table-cell.stories.ts b/packages/components/src/styles/table-cell/table-cell.stories.ts
new file mode 100644
index 0000000000..84631412dc
--- /dev/null
+++ b/packages/components/src/styles/table-cell/table-cell.stories.ts
@@ -0,0 +1,208 @@
+import '../../solid-components';
+import { html } from 'lit-html';
+import { storybookDefaults, storybookHelpers, storybookTemplate } from '../../../scripts/storybook/helper';
+
+const { argTypes, parameters } = storybookDefaults('sd-table-cell');
+const { overrideArgs } = storybookHelpers('sd-table-cell');
+const { generateTemplate } = storybookTemplate('sd-table-cell');
+
+/**
+ * The `sd-table-cell` component offers basic styling for table cells.
+ * It is designed to be used in conjunction with the `sd-table` component.
+ */
+
+export default {
+ title: 'Styles/sd-table-cell',
+ component: 'sd-table-cell',
+ parameters: {
+ ...parameters
+ },
+ args: overrideArgs([
+ { type: 'slot', name: 'default', value: 'Lorem ipsum dolor sit amet.' },
+ { type: 'attribute', name: 'sd-table-cell--bg-...', value: 'transparent' }
+ ]),
+ argTypes
+};
+
+/**
+ * This shows sd-table-cell in its default state.
+ */
+
+export const Default = {
+ render: (args: any) => {
+ return generateTemplate({
+ options: { templateContent: '' },
+ args
+ });
+ }
+};
+
+/**
+ * These examples demonstrate the usage of sd-table-cell in various contexts.
+ * The examples are intended solely for illustrating how sd-table-cell can be used to style tables.
+ * The data generation and table sorting logic should not be used in production environments.
+ *
+ */
+
+export const Samples = {
+ parameters: {
+ controls: {
+ exclude: ['sd-table-cell--divider', 'sd-table-cell--bg-...']
+ }
+ },
+ render: (args: Record) => {
+ // Initalize table data
+ const tableRowCount = 7;
+ const tableColumnCount = 5;
+ const headerData = Array.from({ length: tableColumnCount }, () => 'Header');
+ const tableData = Array.from({ length: tableRowCount }, () =>
+ Array.from({ length: tableColumnCount }, () => {
+ return args['default-slot'] ?? 'Lorem ipsum dolor sit amet.';
+ })
+ );
+
+ return html`
+
+
+ Simple Table
+
+
+ ${(() => {
+ return html`
+ ${headerData.map(cellData => {
+ return html`| ${cellData} | `;
+ })}
+ `;
+ })()}
+
+
+ ${tableData.map(rowData => {
+ return html`
+ ${rowData.map(cellData => {
+ return html`| ${cellData} | `;
+ })}
+ `;
+ })}
+
+
+ Simple Table With Vertical Lines
+
+
+ ${(() => {
+ return html`
+ ${headerData.map((cellData, columnIndex) => {
+ return html`|
+ ${cellData}
+ | `;
+ })}
+ `;
+ })()}
+
+
+ ${tableData.map(rowData => {
+ return html`
+ ${rowData.map((cellData, columnIndex) => {
+ return html`|
+ ${cellData}
+ | `;
+ })}
+ `;
+ })}
+
+
+ Simple Table With Alternating Colors
+
+
+ ${(() => {
+ return html`
+ ${headerData.map(cellData => {
+ return html`| ${cellData} | `;
+ })}
+ `;
+ })()}
+
+
+ ${tableData.map((rowData, rowIndex) => {
+ return html`
+ ${rowData.map(cellData => {
+ return html`|
+ ${cellData}
+ | `;
+ })}
+ `;
+ })}
+
+
+ Simple Table, First Column Fixed
+ This sample will be provided soon.
+
+ Multi Select Table
+ This sample will be provided soon.
+ | |