@db-ux/react-core-components 4.5.4-mcp-e4cd7e6 → 4.5.4-table-c758ae7

package/README.md

@@ -44,6 +44,36 @@ import "@db-ux/core-components/build/styles/rollup.css";
 
 </details>
 
+> **Vite 8 Note:** Starting with Vite 8, the default CSS minifier was changed to [LightningCSS](https://lightningcss.dev/), which provides buggy transformations for modern CSS features used by the DB UX Design System (e.g. `light-dark()` CSS function). We might provide a specific configuration necessary to mitigate those problems in the near future. To keep CSS output stable in the meantime, configure `vite.config.ts` like this:
+
+```ts
+// vite.config.ts
+export default defineConfig({
+  build: {
+    cssMinify: "esbuild"
+  }
+});
+```
+
+> Alternatively, you could define a [browserslist](https://browsersl.ist/) based on your individual browser support strategy — which might be totally different from the list Vite 8 defines by default (targeting browsers from the early 2020s):
+
+```ts
+// Note: You need to install the required packages first:
+// npm install -D lightningcss browserslist
+
+// vite.config.ts
+import { browserslistToTargets } from "lightningcss";
+import browserslist from "browserslist";
+
+export default defineConfig({
+  css: {
+    lightningcss: {
+      targets: browserslistToTargets(browserslist(">= 0.5%, last 2 major versions, Firefox ESR, not dead"))
+    }
+  }
+});
+```
+
 > **Note:** The `@db-ux/core-components/build/styles/relative` file contains optional and all components styles. If you consider performance issues see [@db-ux/core-components](https://www.npmjs.com/package/@db-ux/core-components) for more information.
 
 ### DB Theme

package/dist/components/table/examples/data.d.ts

@@ -0,0 +1,9 @@
+import { DBTableData } from '../model';
+export declare const defaultTable: DBTableData;
+export declare const horizontalAlignmentStartTable: DBTableData;
+export declare const horizontalAlignmentCenterTable: DBTableData;
+export declare const horizontalAlignmentEndTable: DBTableData;
+export declare const subHeaderEmphasisNoneTable: DBTableData;
+export declare const subHeaderEmphasisWeakTable: DBTableData;
+export declare const subHeaderEmphasisStrongTable: DBTableData;
+export declare const overflowTable: DBTableData;

package/dist/components/table/examples/data.js

@@ -0,0 +1,258 @@
+const defaultHeader = [{
+        cells: [{
+                content: 'A',
+                scope: 'col'
+            }, {
+                content: 'B',
+                scope: 'col'
+            }, {
+                content: 'C',
+                scope: 'col'
+            }]
+    }];
+const defaultBody = [{
+        cells: [{
+                content: '1',
+                headerCell: true,
+                scope: 'row'
+            }, {
+                content: '2'
+            }, {
+                content: '3'
+            }]
+    }, {
+        cells: [{
+                content: '4',
+                headerCell: true,
+                scope: 'row'
+            }, {
+                content: '5'
+            }, {
+                content: '6'
+            }]
+    }, {
+        cells: [{
+                content: '7',
+                headerCell: true,
+                scope: 'row'
+            }, {
+                content: '8'
+            }, {
+                content: '9'
+            }]
+    }];
+const defaultFooter = [{
+        cells: [{
+                content: 'Footer 1',
+                headerCell: true,
+                scope: 'row'
+            }, {
+                content: 'Footer 2',
+                colSpan: 2
+            }]
+    }];
+export const defaultTable = {
+    header: defaultHeader,
+    body: defaultBody,
+    footer: defaultFooter
+};
+export const horizontalAlignmentStartTable = {
+    header: [{
+            cells: [{
+                    content: 'A',
+                    horizontalAlignment: 'start',
+                    scope: 'col'
+                }, {
+                    content: 'B',
+                    horizontalAlignment: 'start',
+                    colSpan: 2,
+                    scope: 'col'
+                }]
+        }],
+    body: [{
+            cells: [{
+                    content: '1',
+                    headerCell: true,
+                    horizontalAlignment: 'start',
+                    scope: 'row'
+                }, {
+                    content: '2',
+                    horizontalAlignment: 'start'
+                }, {
+                    content: '3',
+                    horizontalAlignment: 'start'
+                }]
+        }]
+};
+export const horizontalAlignmentCenterTable = {
+    header: [{
+            cells: [{
+                    content: 'A',
+                    horizontalAlignment: 'center',
+                    scope: 'col'
+                }, {
+                    content: 'B',
+                    horizontalAlignment: 'center',
+                    colSpan: 2,
+                    scope: 'col'
+                }]
+        }],
+    body: [{
+            cells: [{
+                    content: '1',
+                    headerCell: true,
+                    horizontalAlignment: 'center',
+                    scope: 'row'
+                }, {
+                    content: '2',
+                    horizontalAlignment: 'center'
+                }, {
+                    content: '3',
+                    horizontalAlignment: 'center'
+                }]
+        }]
+};
+export const horizontalAlignmentEndTable = {
+    header: [{
+            cells: [{
+                    content: 'A',
+                    horizontalAlignment: 'end',
+                    scope: 'col'
+                }, {
+                    content: 'B',
+                    horizontalAlignment: 'end',
+                    colSpan: 2,
+                    scope: 'col'
+                }]
+        }],
+    body: [{
+            cells: [{
+                    content: '1',
+                    headerCell: true,
+                    horizontalAlignment: 'end',
+                    scope: 'row'
+                }, {
+                    content: '2',
+                    horizontalAlignment: 'end'
+                }, {
+                    content: '3',
+                    horizontalAlignment: 'end'
+                }]
+        }]
+};
+export const subHeaderEmphasisNoneTable = {
+    header: [...defaultHeader, {
+            cells: [{
+                    content: 'Sub A',
+                    scope: 'col'
+                }, {
+                    content: 'Sub B',
+                    scope: 'col'
+                }, {
+                    content: 'Sub C',
+                    scope: 'col'
+                }]
+        }],
+    body: defaultBody,
+    footer: defaultFooter
+};
+export const subHeaderEmphasisWeakTable = {
+    header: [...defaultHeader, {
+            subHeaderEmphasis: 'weak',
+            cells: [{
+                    content: 'Sub A',
+                    scope: 'col'
+                }, {
+                    content: 'Sub B',
+                    scope: 'col'
+                }, {
+                    content: 'Sub C',
+                    scope: 'col'
+                }]
+        }],
+    body: defaultBody,
+    footer: defaultFooter
+};
+export const subHeaderEmphasisStrongTable = {
+    header: [...defaultHeader, {
+            subHeaderEmphasis: 'strong',
+            cells: [{
+                    content: 'Sub A',
+                    scope: 'col'
+                }, {
+                    content: 'Sub B',
+                    scope: 'col'
+                }, {
+                    content: 'Sub C',
+                    scope: 'col'
+                }]
+        }],
+    body: defaultBody,
+    footer: defaultFooter
+};
+export const overflowTable = {
+    header: [{
+            cells: [{
+                    content: 'A',
+                    scope: 'col'
+                }, {
+                    content: 'B',
+                    scope: 'col'
+                }, {
+                    content: 'C',
+                    scope: 'col'
+                }, {
+                    content: 'D',
+                    scope: 'col'
+                }, {
+                    content: 'E',
+                    scope: 'col'
+                }, {
+                    content: 'F',
+                    scope: 'col'
+                }, {
+                    link: {
+                        text: 'G',
+                        href: '#'
+                    },
+                    scope: 'col'
+                }]
+        }],
+    body: Array.from({
+        length: 20
+    }, (_, i) => ({
+        cells: [{
+                content: `Row ${i + 1}`,
+                headerCell: true,
+                scope: 'row'
+            }, {
+                content: `Data ${i + 1}-B`
+            }, {
+                content: `Data ${i + 1}-C`
+            }, {
+                content: `Data ${i + 1}-D`
+            }, {
+                content: `Data ${i + 1}-E`
+            }, {
+                content: `Data ${i + 1}-F`
+            }, {
+                link: {
+                    text: `Data ${i + 1}-G`,
+                    href: '#'
+                }
+            }]
+    })),
+    footer: [{
+            cells: [{
+                    content: 'Footer 1',
+                    headerCell: true,
+                    scope: 'row'
+                }, {
+                    link: {
+                        text: 'Footer 2',
+                        href: '#'
+                    },
+                    colSpan: 6
+                }]
+        }]
+};

package/dist/components/table/index.d.ts

@@ -0,0 +1 @@
+export { default as DBTable } from "./table";

package/dist/components/table/index.js

@@ -0,0 +1 @@
+export { default as DBTable } from "./table";

package/dist/components/table/model.d.ts

@@ -0,0 +1,74 @@
+import { GlobalProps, GlobalState, WidthProps } from '../../shared/model';
+import { DBTableRowDefaultProps } from '../table-row/model';
+export declare const DBTableRowSizeList: readonly ["x-small", "small", "medium", "large"];
+export type DBTableRowSizeType = (typeof DBTableRowSizeList)[number];
+export declare const DBTableVariantList: readonly ["joined", "zebra", "floating"];
+export type DBTableVariantType = (typeof DBTableVariantList)[number];
+export declare const DBTableDividerList: readonly ["none", "both", "horizontal", "vertical"];
+export type DBTableDividerType = (typeof DBTableDividerList)[number];
+export declare const DBTableMobileVariantList: readonly ["table", "list"];
+export type DBTableMobileVariantType = (typeof DBTableMobileVariantList)[number];
+export declare const DBTableStickHeaderList: readonly ["none", "both", "horizontal", "vertical"];
+export type DBTableStickHederType = (typeof DBTableStickHeaderList)[number];
+export type DBTableData = {
+    header?: DBTableRowDefaultProps[];
+    body?: DBTableRowDefaultProps[];
+    footer?: DBTableRowDefaultProps[];
+};
+export declare const DBTableColumnsSizeList: readonly ["auto", "1fr", "min-content", "max-content"];
+export type DBTableColumnsSizeType = (typeof DBTableColumnsSizeList)[number];
+export type DBTableDefaultProps = {
+    /**
+     * Slot for table caption
+     */
+    caption?: any;
+    /**
+     * String alternative for table caption slot
+     */
+    captionPlain?: string;
+    /**
+     * Table data if you don't use default slot/children
+     */
+    data?: DBTableData | string;
+    /**
+     * Show the divider between the rows and cells
+     */
+    divider?: DBTableDividerType;
+    /**
+     * Show caption above table default is hidden
+     */
+    showCaption?: boolean | string;
+    /**
+     * Size of the table rows
+     */
+    size?: DBTableRowSizeType;
+    /**
+     * Change the layout of the table
+     * floating: card style table
+     * joined: classic table
+     */
+    variant?: DBTableVariantType;
+    /**
+     * Change the layout of the table on mobile
+     * list: list style
+     * table: classic table
+     */
+    mobileVariant?: DBTableMobileVariantType;
+    /**
+     * Change the header cells to be sticky when scrolling the table
+     */
+    stickyHeader?: DBTableStickHederType;
+    /**
+     * Set the width of the columns based in their index.
+     * Alternative: Use `--db-table-column-size-$index` inside CSS to control it.
+     * See: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns
+     */
+    columnSizes?: Record<number, DBTableColumnsSizeType | string>;
+};
+export type DBTableProps = DBTableDefaultProps & GlobalProps & WidthProps;
+export type DBTableDefaultState = {
+    _data?: DBTableData;
+    _style?: any;
+    convertData: () => DBTableData;
+};
+export type DBTableState = DBTableDefaultState & GlobalState;

package/dist/components/table/model.js

@@ -0,0 +1,6 @@
+export const DBTableRowSizeList = ['x-small', 'small', 'medium', 'large'];
+export const DBTableVariantList = ['joined', 'zebra', 'floating'];
+export const DBTableDividerList = ['none', 'both', 'horizontal', 'vertical'];
+export const DBTableMobileVariantList = ['table', 'list'];
+export const DBTableStickHeaderList = ['none', 'both', 'horizontal', 'vertical'];
+export const DBTableColumnsSizeList = ['auto', '1fr', 'min-content', 'max-content'];

package/dist/components/table/table.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBTable: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "width" | keyof import("./model").DBTableDefaultProps> & import("./model").DBTableDefaultProps & import("../..").GlobalProps & import("../..").WidthProps & React.RefAttributes<any>>;
+export default DBTable;

package/dist/components/table/table.js

@@ -0,0 +1,74 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, delay, getBooleanAsString } from "../../utils";
+import DBTableBody from "../table-body/table-body";
+import DBTableFooter from "../table-footer/table-footer";
+import DBTableHead from "../table-head/table-head";
+function DBTableFn(props, component) {
+    const _ref = component || useRef(undefined);
+    const [_data, set_data] = useState(() => undefined);
+    const [_style, set_style] = useState(() => undefined);
+    function convertData() {
+        try {
+            if (typeof props.data === "string") {
+                return JSON.parse(props.data);
+            }
+            return props.data;
+        }
+        catch (error) {
+            console.error(error);
+        }
+        return {};
+    }
+    useEffect(() => {
+        if (props.data) {
+            set_data(convertData());
+        }
+    }, [props.data]);
+    useEffect(() => {
+        if (_ref.current && props.mobileVariant === "list") {
+            // Delay for angular
+            void delay(() => {
+                const table = _ref.current;
+                if (!table)
+                    return;
+                const headerCells = table.querySelectorAll("thead tr th");
+                if (headerCells.length) {
+                    const otherRows = table.querySelectorAll(":is(tbody,tfoot) tr");
+                    otherRows.forEach((row) => {
+                        const cells = row.querySelectorAll(":is(td,th)");
+                        cells.forEach((cell, index) => {
+                            const headerCell = headerCells[index];
+                            if (headerCell &&
+                                headerCell.textContent &&
+                                !cell.dataset["header"]) {
+                                cell.dataset["header"] = headerCell.textContent.trim();
+                            }
+                        });
+                    });
+                }
+            }, 1);
+        }
+    }, [props.mobileVariant, _ref.current]);
+    useEffect(() => {
+        if (props.columnSizes) {
+            const columnStyles = {};
+            Object.entries(props.columnSizes).forEach(([key, value]) => {
+                columnStyles[`--db-table-column-size-${key}`] = value;
+            });
+            set_style(columnStyles);
+        }
+    }, [props.columnSizes]);
+    return (React.createElement("div", Object.assign({}, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-table", props.className), style: _style, "data-width": props.width, "data-size": props.size, "data-divider": props.divider, "data-variant": props.variant, "data-mobile-variant": props.mobileVariant, "data-show-caption": getBooleanAsString(props.showCaption), "data-sticky-header": props.stickyHeader }),
+        React.createElement("table", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }),
+            React.createElement("caption", null, props.captionPlain ? (React.createElement(React.Fragment, null, props.captionPlain)) : (React.createElement(React.Fragment, null,
+                React.createElement(React.Fragment, null, props.caption)))),
+            _data ? (React.createElement(React.Fragment, null,
+                (_data === null || _data === void 0 ? void 0 : _data.header) ? React.createElement(DBTableHead, { rows: _data === null || _data === void 0 ? void 0 : _data.header }) : null,
+                (_data === null || _data === void 0 ? void 0 : _data.body) ? React.createElement(DBTableBody, { rows: _data === null || _data === void 0 ? void 0 : _data.body }) : null,
+                (_data === null || _data === void 0 ? void 0 : _data.footer) ? React.createElement(DBTableFooter, { rows: _data === null || _data === void 0 ? void 0 : _data.footer }) : null)) : (React.createElement(React.Fragment, null, props.children)))));
+}
+const DBTable = forwardRef(DBTableFn);
+export default DBTable;

package/dist/components/table-body/index.d.ts

@@ -0,0 +1 @@
+export { default as DBTableBody } from "./table-body";

package/dist/components/table-body/index.js

@@ -0,0 +1 @@
+export { default as DBTableBody } from "./table-body";

package/dist/components/table-body/model.d.ts

@@ -0,0 +1,8 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+import { DBTableRowProps } from '../table-row/model';
+export type DBTableBodyDefaultProps = {
+    rows?: DBTableRowProps[];
+};
+export type DBTableBodyProps = DBTableBodyDefaultProps & GlobalProps;
+export type DBTableBodyDefaultState = {};
+export type DBTableBodyState = DBTableBodyDefaultState & GlobalState;

package/dist/components/table-body/model.js

@@ -0,0 +1 @@
+export {};

package/dist/components/table-body/table-body.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBTableBody: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "rows"> & import("./model").DBTableBodyDefaultProps & import("../..").GlobalProps & React.RefAttributes<any>>;
+export default DBTableBody;

package/dist/components/table-body/table-body.js

@@ -0,0 +1,18 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useRef, forwardRef } from "react";
+import { cls } from "../../utils";
+import DBTableRow from "../table-row/table-row";
+import { useId } from "react";
+function DBTableBodyFn(props, component) {
+    var _a;
+    const uuid = useId();
+    const _ref = component || useRef(undefined);
+    return (React.createElement("tbody", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-table-body", props.className) }), props.rows ? (React.createElement(React.Fragment, null, (_a = props.rows) === null || _a === void 0 ? void 0 : _a.map((row, index) => {
+        var _a, _b;
+        return (React.createElement(DBTableRow, { key: `${(_a = props.id) !== null && _a !== void 0 ? _a : uuid}-table-body-row-${index}`, cells: row.cells, className: (_b = row.className) !== null && _b !== void 0 ? _b : row.class, id: row.id }));
+    }))) : (React.createElement(React.Fragment, null, props.children))));
+}
+const DBTableBody = forwardRef(DBTableBodyFn);
+export default DBTableBody;

package/dist/components/table-caption/index.d.ts

@@ -0,0 +1 @@
+export { default as DBTableCaption } from "./table-caption";

package/dist/components/table-caption/index.js

@@ -0,0 +1 @@
+export { default as DBTableCaption } from "./table-caption";

package/dist/components/table-caption/model.d.ts

@@ -0,0 +1,5 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+export type DBTableCaptionDefaultProps = {};
+export type DBTableCaptionProps = DBTableCaptionDefaultProps & GlobalProps;
+export type DBTableCaptionDefaultState = {};
+export type DBTableCaptionState = DBTableCaptionDefaultState & GlobalState;

package/dist/components/table-caption/model.js

@@ -0,0 +1 @@
+export {};

package/dist/components/table-caption/table-caption.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBTableCaption: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps> & import("../..").GlobalProps & React.RefAttributes<any>>;
+export default DBTableCaption;

package/dist/components/table-caption/table-caption.js

@@ -0,0 +1,11 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useRef, forwardRef } from "react";
+import { cls } from "../../utils";
+function DBTableCaptionFn(props, component) {
+    const _ref = component || useRef(undefined);
+    return (React.createElement("caption", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-table-caption", props.className) }), props.children));
+}
+const DBTableCaption = forwardRef(DBTableCaptionFn);
+export default DBTableCaption;

package/dist/components/table-data-cell/index.d.ts

@@ -0,0 +1 @@
+export { default as DBTableDataCell } from "./table-data-cell";

package/dist/components/table-data-cell/index.js

@@ -0,0 +1 @@
+export { default as DBTableDataCell } from "./table-data-cell";

package/dist/components/table-data-cell/model.d.ts

@@ -0,0 +1,5 @@
+import { DBTableCellProps, GlobalProps, GlobalState } from '../../shared/model';
+export type DBTableDataCellDefaultProps = {};
+export type DBTableDataCellProps = DBTableDataCellDefaultProps & GlobalProps & DBTableCellProps;
+export type DBTableDataCellDefaultState = {};
+export type DBTableDataCellState = DBTableDataCellDefaultState & GlobalState;

package/dist/components/table-data-cell/model.js

@@ -0,0 +1 @@
+export {};

package/dist/components/table-data-cell/table-data-cell.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBTableDataCell: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | keyof import("../..").DBTableCellProps> & import("../..").GlobalProps & import("../..").DBTableCellProps & React.RefAttributes<any>>;
+export default DBTableDataCell;

package/dist/components/table-data-cell/table-data-cell.js

@@ -0,0 +1,11 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useRef, forwardRef } from "react";
+import { cls, getNumber } from "../../utils";
+function DBTableDataCellFn(props, component) {
+    const _ref = component || useRef(undefined);
+    return (React.createElement("td", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-table-data-cell", props.className), "data-horizontal-alignment": props.horizontalAlignment, "data-vertical-alignment": props.verticalAlignment, colSpan: getNumber(props.colSpan, props.colspan), rowSpan: getNumber(props.rowSpan, props.rowspan), headers: props.headers }), props.children));
+}
+const DBTableDataCell = forwardRef(DBTableDataCellFn);
+export default DBTableDataCell;

package/dist/components/table-footer/index.d.ts

@@ -0,0 +1 @@
+export { default as DBTableFooter } from "./table-footer";

package/dist/components/table-footer/index.js

@@ -0,0 +1 @@
+export { default as DBTableFooter } from "./table-footer";

package/dist/components/table-footer/model.d.ts

@@ -0,0 +1,8 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+import { DBTableRowProps } from '../table-row/model';
+export type DBTableFooterDefaultProps = {
+    rows?: DBTableRowProps[];
+};
+export type DBTableFooterProps = DBTableFooterDefaultProps & GlobalProps;
+export type DBTableFooterDefaultState = {};
+export type DBTableFooterState = DBTableFooterDefaultState & GlobalState;

package/dist/components/table-footer/model.js

@@ -0,0 +1 @@
+export {};

package/dist/components/table-footer/table-footer.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBTableFooter: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "rows"> & import("./model").DBTableFooterDefaultProps & import("../..").GlobalProps & React.RefAttributes<any>>;
+export default DBTableFooter;

package/dist/components/table-footer/table-footer.js

@@ -0,0 +1,18 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useRef, forwardRef } from "react";
+import { cls } from "../../utils";
+import DBTableRow from "../table-row/table-row";
+import { useId } from "react";
+function DBTableFooterFn(props, component) {
+    var _a;
+    const uuid = useId();
+    const _ref = component || useRef(undefined);
+    return (React.createElement("tfoot", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-table-footer", props.className) }), props.rows ? (React.createElement(React.Fragment, null, (_a = props.rows) === null || _a === void 0 ? void 0 : _a.map((row, index) => {
+        var _a, _b;
+        return (React.createElement(DBTableRow, { key: `${(_a = props.id) !== null && _a !== void 0 ? _a : uuid}-table-footer-row-${index}`, cells: row.cells, className: (_b = row.className) !== null && _b !== void 0 ? _b : row.class, id: row.id }));
+    }))) : (React.createElement(React.Fragment, null, props.children))));
+}
+const DBTableFooter = forwardRef(DBTableFooterFn);
+export default DBTableFooter;

package/dist/components/table-head/index.d.ts

@@ -0,0 +1 @@
+export { default as DBTableHead } from "./table-head";

package/dist/components/table-head/index.js

@@ -0,0 +1 @@
+export { default as DBTableHead } from "./table-head";

package/dist/components/table-head/model.d.ts

@@ -0,0 +1,10 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+import { DBTableRowCell, DBTableRowProps } from '../table-row/model';
+export type DBTableHeadDefaultProps = {
+    rows?: DBTableRowProps[];
+};
+export type DBTableHeadProps = DBTableHeadDefaultProps & GlobalProps;
+export type DBTableHeadDefaultState = {
+    getCells: (cells?: DBTableRowCell[]) => DBTableRowCell[] | undefined;
+};
+export type DBTableHeadState = DBTableHeadDefaultState & GlobalState;

package/dist/components/table-head/model.js

@@ -0,0 +1 @@
+export {};

package/dist/components/table-head/table-head.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBTableHead: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "rows"> & import("./model").DBTableHeadDefaultProps & import("../..").GlobalProps & React.RefAttributes<any>>;
+export default DBTableHead;

package/dist/components/table-head/table-head.js

@@ -0,0 +1,21 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useRef, forwardRef } from "react";
+import { cls } from "../../utils";
+import DBTableRow from "../table-row/table-row";
+import { useId } from "react";
+function DBTableHeadFn(props, component) {
+    var _a;
+    const uuid = useId();
+    const _ref = component || useRef(undefined);
+    function getCells(cells) {
+        return cells === null || cells === void 0 ? void 0 : cells.map((cell) => (Object.assign(Object.assign({}, cell), { headerCell: true })));
+    }
+    return (React.createElement("thead", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-table-head", props.className) }), props.rows ? (React.createElement(React.Fragment, null, (_a = props.rows) === null || _a === void 0 ? void 0 : _a.map((row, index) => {
+        var _a, _b;
+        return (React.createElement(DBTableRow, { key: `${(_a = props.id) !== null && _a !== void 0 ? _a : uuid}-table-head-row-${index}`, cells: getCells(row.cells), className: (_b = row.className) !== null && _b !== void 0 ? _b : row.class, subHeaderEmphasis: row.subHeaderEmphasis, id: row.id }));
+    }))) : (React.createElement(React.Fragment, null, props.children))));
+}
+const DBTableHead = forwardRef(DBTableHeadFn);
+export default DBTableHead;

package/dist/components/table-header-cell/index.d.ts

@@ -0,0 +1 @@
+export { default as DBTableHeaderCell } from "./table-header-cell";

package/dist/components/table-header-cell/index.js

@@ -0,0 +1 @@
+export { default as DBTableHeaderCell } from "./table-header-cell";

package/dist/components/table-header-cell/model.d.ts

@@ -0,0 +1,24 @@
+import { DBTableCellProps, GlobalProps, GlobalState } from '../../shared/model';
+export declare const DBTableHeaderCellScopeList: readonly ["row", "col", "rowgroup", "colgroup"];
+export type DBTableHeaderCellScopeType = (typeof DBTableHeaderCellScopeList)[number];
+export type DBTableHeaderCellDefaultProps = {
+    /**
+     * The **`abbr`** property of the HTMLTableCellElement interface indicates an abbreviation associated with the cell.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/abbr)
+     */
+    abbr?: string;
+    /**
+     * The **`scope`** property of the HTMLTableCellElement interface indicates the scope of a th cell.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/scope)
+     */
+    scope?: DBTableHeaderCellScopeType;
+    /**
+     * Hide the text content of the cell.
+     */
+    noText?: boolean | string;
+};
+export type DBTableHeaderCellProps = DBTableHeaderCellDefaultProps & GlobalProps & DBTableCellProps;
+export type DBTableHeaderCellDefaultState = {};
+export type DBTableHeaderCellState = DBTableHeaderCellDefaultState & GlobalState;

package/dist/components/table-header-cell/model.js

@@ -0,0 +1 @@
+export const DBTableHeaderCellScopeList = ['row', 'col', 'rowgroup', 'colgroup'];

package/dist/components/table-header-cell/table-header-cell.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBTableHeaderCell: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | keyof import("../..").DBTableCellProps | keyof import("./model").DBTableHeaderCellDefaultProps> & import("./model").DBTableHeaderCellDefaultProps & import("../..").GlobalProps & import("../..").DBTableCellProps & React.RefAttributes<any>>;
+export default DBTableHeaderCell;

package/dist/components/table-header-cell/table-header-cell.js

@@ -0,0 +1,11 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useRef, forwardRef } from "react";
+import { cls, getBooleanAsString, getNumber } from "../../utils";
+function DBTableHeaderCellFn(props, component) {
+    const _ref = component || useRef(undefined);
+    return (React.createElement("th", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-table-header-cell", props.className), "data-horizontal-alignment": props.horizontalAlignment, "data-vertical-alignment": props.verticalAlignment, "data-no-text": getBooleanAsString(props.noText), scope: props.scope, colSpan: getNumber(props.colSpan, props.colspan), rowSpan: getNumber(props.rowSpan, props.rowspan), headers: props.headers, abbr: props.abbr }), props.children));
+}
+const DBTableHeaderCell = forwardRef(DBTableHeaderCellFn);
+export default DBTableHeaderCell;

package/dist/components/table-row/index.d.ts

@@ -0,0 +1 @@
+export { default as DBTableRow } from "./table-row";

package/dist/components/table-row/index.js

@@ -0,0 +1 @@
+export { default as DBTableRow } from "./table-row";

package/dist/components/table-row/model.d.ts

@@ -0,0 +1,30 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+import { DBLinkProps } from '../link/model';
+import { DBTableDataCellProps } from '../table-data-cell/model';
+import { DBTableHeaderCellProps } from '../table-header-cell/model';
+export declare const DBTableRowSubHeaderEmphasisList: readonly ["none", "weak", "strong"];
+export type DBTableRowSubHeaderEmphasisType = (typeof DBTableRowSubHeaderEmphasisList)[number];
+export type DBTableRowCell = (DBTableHeaderCellProps | DBTableDataCellProps) & {
+    headerCell?: boolean;
+    content?: any;
+    link?: DBLinkProps;
+};
+export type DBTableRowDefaultProps = {
+    /**
+     * All cells of the row
+     */
+    cells?: DBTableRowCell[];
+    /**
+     * Change styling of row only if it is inside thead
+     */
+    subHeaderEmphasis?: DBTableRowSubHeaderEmphasisType;
+    /**
+     * If true marks the row as interactive, which checks for child with data-table-row-action="true"
+     */
+    interactive?: boolean | string;
+};
+export type DBTableRowProps = DBTableRowDefaultProps & GlobalProps;
+export type DBTableRowDefaultState = {
+    getHeaderCell: (cell: DBTableRowCell) => DBTableHeaderCellProps | undefined;
+};
+export type DBTableRowState = DBTableRowDefaultState & GlobalState;

package/dist/components/table-row/model.js

@@ -0,0 +1 @@
+export const DBTableRowSubHeaderEmphasisList = ['none', 'weak', 'strong'];

package/dist/components/table-row/table-row.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBTableRow: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | keyof import("./model").DBTableRowDefaultProps> & import("./model").DBTableRowDefaultProps & import("../..").GlobalProps & React.RefAttributes<any>>;
+export default DBTableRow;

package/dist/components/table-row/table-row.js

@@ -0,0 +1,26 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useRef, forwardRef } from "react";
+import { cls, getBooleanAsString } from "../../utils";
+import DBLink from "../link/link";
+import DBTableDataCell from "../table-data-cell/table-data-cell";
+import DBTableHeaderCell from "../table-header-cell/table-header-cell";
+import { useId } from "react";
+function DBTableRowFn(props, component) {
+    var _a;
+    const uuid = useId();
+    const _ref = component || useRef(undefined);
+    function getHeaderCell(cell) {
+        if (cell.headerCell) {
+            return cell;
+        }
+        return undefined;
+    }
+    return (React.createElement("tr", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-table-row", props.className), "data-interactive": getBooleanAsString(props.interactive), "data-sub-header-emphasis": props.subHeaderEmphasis }), props.cells ? (React.createElement(React.Fragment, null, (_a = props.cells) === null || _a === void 0 ? void 0 : _a.map((cell, index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20;
+        return cell.headerCell ? (React.createElement(DBTableHeaderCell, { key: `${(_a = props.id) !== null && _a !== void 0 ? _a : uuid}-table-row-header-cell-${index}`, id: cell.id, abbr: (_b = getHeaderCell(cell)) === null || _b === void 0 ? void 0 : _b.abbr, scope: (_c = getHeaderCell(cell)) === null || _c === void 0 ? void 0 : _c.scope, noText: (_d = getHeaderCell(cell)) === null || _d === void 0 ? void 0 : _d.noText, className: (_e = cell.className) !== null && _e !== void 0 ? _e : cell.class, horizontalAlignment: cell.horizontalAlignment, verticalAlignment: cell.verticalAlignment, headers: cell.headers, colSpan: cell.colSpan, colspan: cell.colspan, rowSpan: cell.rowSpan, rowspan: cell.rowspan }, cell.link ? (React.createElement(DBLink, { content: (_f = cell.link) === null || _f === void 0 ? void 0 : _f.content, size: (_g = cell.link) === null || _g === void 0 ? void 0 : _g.size, variant: (_h = cell.link) === null || _h === void 0 ? void 0 : _h.variant, className: (_k = (_j = cell.link) === null || _j === void 0 ? void 0 : _j.className) !== null && _k !== void 0 ? _k : (_l = cell.link) === null || _l === void 0 ? void 0 : _l.class, id: (_m = cell.link) === null || _m === void 0 ? void 0 : _m.id, autofocus: (_o = cell.link) === null || _o === void 0 ? void 0 : _o.autofocus, disabled: (_p = cell.link) === null || _p === void 0 ? void 0 : _p.disabled, href: (_q = cell.link) === null || _q === void 0 ? void 0 : _q.href, hreflang: (_r = cell.link) === null || _r === void 0 ? void 0 : _r.hreflang, target: (_s = cell.link) === null || _s === void 0 ? void 0 : _s.target, rel: (_t = cell.link) === null || _t === void 0 ? void 0 : _t.rel, referrerPolicy: (_u = cell.link) === null || _u === void 0 ? void 0 : _u.referrerPolicy, role: (_v = cell.link) === null || _v === void 0 ? void 0 : _v.role, showIcon: (_w = cell.link) === null || _w === void 0 ? void 0 : _w.showIcon, text: (_x = cell.link) === null || _x === void 0 ? void 0 : _x.text, wrap: (_y = cell.link) === null || _y === void 0 ? void 0 : _y.wrap }, (_z = cell.link) === null || _z === void 0 ? void 0 : _z.children)) : (React.createElement(React.Fragment, null, cell.content)))) : (React.createElement(DBTableDataCell, { key: `${(_0 = props.id) !== null && _0 !== void 0 ? _0 : uuid}-table-row-data-cell-${index}`, id: cell.id, className: (_1 = cell.className) !== null && _1 !== void 0 ? _1 : cell.class, horizontalAlignment: cell.horizontalAlignment, verticalAlignment: cell.verticalAlignment, headers: cell.headers, colSpan: cell.colSpan, colspan: cell.colspan, rowSpan: cell.rowSpan, rowspan: cell.rowspan }, cell.link ? (React.createElement(DBLink, { content: (_2 = cell.link) === null || _2 === void 0 ? void 0 : _2.content, size: (_3 = cell.link) === null || _3 === void 0 ? void 0 : _3.size, variant: (_4 = cell.link) === null || _4 === void 0 ? void 0 : _4.variant, className: (_6 = (_5 = cell.link) === null || _5 === void 0 ? void 0 : _5.className) !== null && _6 !== void 0 ? _6 : (_7 = cell.link) === null || _7 === void 0 ? void 0 : _7.class, id: (_8 = cell.link) === null || _8 === void 0 ? void 0 : _8.id, autofocus: (_9 = cell.link) === null || _9 === void 0 ? void 0 : _9.autofocus, disabled: (_10 = cell.link) === null || _10 === void 0 ? void 0 : _10.disabled, href: (_11 = cell.link) === null || _11 === void 0 ? void 0 : _11.href, hreflang: (_12 = cell.link) === null || _12 === void 0 ? void 0 : _12.hreflang, target: (_13 = cell.link) === null || _13 === void 0 ? void 0 : _13.target, rel: (_14 = cell.link) === null || _14 === void 0 ? void 0 : _14.rel, referrerPolicy: (_15 = cell.link) === null || _15 === void 0 ? void 0 : _15.referrerPolicy, role: (_16 = cell.link) === null || _16 === void 0 ? void 0 : _16.role, showIcon: (_17 = cell.link) === null || _17 === void 0 ? void 0 : _17.showIcon, text: (_18 = cell.link) === null || _18 === void 0 ? void 0 : _18.text, wrap: (_19 = cell.link) === null || _19 === void 0 ? void 0 : _19.wrap }, (_20 = cell.link) === null || _20 === void 0 ? void 0 : _20.children)) : (React.createElement(React.Fragment, null, cell.content))));
+    }))) : (React.createElement(React.Fragment, null, props.children))));
+}
+const DBTableRow = forwardRef(DBTableRowFn);
+export default DBTableRow;

package/dist/index.d.ts

@@ -79,3 +79,19 @@ export * from './utils/document-scroll-listener';
 export * from './utils/floating-components';
 export * from './utils/index';
 export * from './utils/navigation';
+export * from "./components/table";
+export * from "./components/table/model";
+export * from "./components/table-caption";
+export * from "./components/table-caption/model";
+export * from "./components/table-head";
+export * from "./components/table-head/model";
+export * from "./components/table-body";
+export * from "./components/table-body/model";
+export * from "./components/table-footer";
+export * from "./components/table-footer/model";
+export * from "./components/table-row";
+export * from "./components/table-row/model";
+export * from "./components/table-header-cell";
+export * from "./components/table-header-cell/model";
+export * from "./components/table-data-cell";
+export * from "./components/table-data-cell/model";

package/dist/index.js

@@ -79,3 +79,19 @@ export * from './utils/document-scroll-listener';
 export * from './utils/floating-components';
 export * from './utils/index';
 export * from './utils/navigation';
+export * from "./components/table";
+export * from "./components/table/model";
+export * from "./components/table-caption";
+export * from "./components/table-caption/model";
+export * from "./components/table-head";
+export * from "./components/table-head/model";
+export * from "./components/table-body";
+export * from "./components/table-body/model";
+export * from "./components/table-footer";
+export * from "./components/table-footer/model";
+export * from "./components/table-row";
+export * from "./components/table-row/model";
+export * from "./components/table-header-cell";
+export * from "./components/table-header-cell/model";
+export * from "./components/table-data-cell";
+export * from "./components/table-data-cell/model";

package/dist/shared/model.d.ts

@@ -461,11 +461,11 @@ export type CloseEventProps<T> = {
 export type CloseEventState<T> = {
     handleClose: (event?: T | void, forceClose?: boolean) => void;
 };
-export declare const AlignmentList: readonly ["start", "center"];
+export declare const AlignmentList: readonly ["start", "center", "end"];
 export type AlignmentType = (typeof AlignmentList)[number];
 export type AlignmentProps = {
     /**
-     * Define the content alignment in full width
+     * Define the content alignment
      */
     alignment?: AlignmentType | string;
 };
@@ -555,3 +555,43 @@ export interface PatternhubProps {
      */
     isPatternhub?: boolean;
 }
+export type DBTableCellProps = {
+    /**
+     * The **`colSpan`** read-only property of the HTMLTableCellElement interface represents the number of columns this cell must span; this lets the cell occupy space across multiple columns of the table.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/colSpan)
+     */
+    colSpan?: number | string;
+    /**
+     * The **`colSpan`** read-only property of the HTMLTableCellElement interface represents the number of columns this cell must span; this lets the cell occupy space across multiple columns of the table.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/colSpan)
+     */
+    colspan?: number | string;
+    /**
+     * The **`headers`** property of the HTMLTableCellElement interface contains a list of IDs of th elements that are _headers_ for this specific cell.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/headers)
+     */
+    headers?: string;
+    /**
+     * The **`rowSpan`** read-only property of the HTMLTableCellElement interface represents the number of rows this cell must span; this lets the cell occupy space across multiple rows of the table.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/rowSpan)
+     */
+    rowSpan?: number | string;
+    /**
+     * The **`rowSpan`** read-only property of the HTMLTableCellElement interface represents the number of rows this cell must span; this lets the cell occupy space across multiple rows of the table.
+     *
+     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTableCellElement/rowSpan)
+     */
+    rowspan?: number | string;
+    /**
+     * Set the horizontal alignment of the cell content.
+     */
+    horizontalAlignment?: AlignmentType;
+    /**
+     * Set the vertical alignment of the cell content.
+     */
+    verticalAlignment?: AlignmentType;
+};

package/dist/shared/model.js

@@ -19,4 +19,4 @@ export const LabelVariantHorizontalList = ['leading', 'trailing'];
 export const AutoCompleteList = ['off', 'on', 'name', 'honorific-prefix', 'given-name', 'additional-name', 'family-name', 'honorific-suffix', 'nickname', 'email', 'username', 'new-password', 'current-password', 'one-time-code', 'organization-title', 'organization', 'street-address', 'shipping', 'billing', 'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3', 'address-level2', 'address-level1', 'country', 'country-name', 'postal-code', 'cc-name', 'cc-given-name', 'cc-additional-name', 'cc-family-name', 'cc-number', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type', 'transaction-currency', 'transaction-amount', 'language', 'bday', 'bday-day', 'bday-month', 'bday-year', 'sex', 'tel', 'tel-country-code', 'tel-national', 'tel-area-code', 'tel-local', 'tel-extension', 'impp', 'url', 'photo', 'webauthn'];
 export const LinkTargetList = ['_self', '_blank', '_parent', '_top'];
 export const LinkReferrerPolicyList = ['no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'];
-export const AlignmentList = ['start', 'center'];
+export const AlignmentList = ['start', 'center', 'end'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.5.4-mcp-e4cd7e6",
+  "version": "4.5.4-table-c758ae7",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "4.5.4-mcp-e4cd7e6",
-    "@db-ux/core-foundations": "4.5.4-mcp-e4cd7e6"
+    "@db-ux/core-components": "4.5.4-table-c758ae7",
+    "@db-ux/core-foundations": "4.5.4-table-c758ae7"
   }
 }