xmlui 0.10.13 → 0.10.15

package/dist/scripts/src/components/Table/Table.js

@@ -37,6 +37,12 @@ exports.TableMd = (0, metadata_helpers_1.createMetadata)({
             `property is useful when data is loaded conditionally or receiving it takes some time.`),
         headerHeight: (0, metadata_helpers_1.d)(`This optional property is used to specify the height of the table header.`),
         rowsSelectable: (0, metadata_helpers_1.d)(`Indicates whether the rows are selectable (\`true\`) or not (\`false\`).`),
+        initiallySelected: (0, metadata_helpers_1.d)(`An array of IDs that should be initially selected when the table is rendered. ` +
+            `This property only has an effect when the rowsSelectable property is set to \`true\`.`),
+        syncWithAppState: (0, metadata_helpers_1.d)(`An AppState instance to synchronize the table's selection state with. The table will ` +
+            `read from and write to the 'selectedIds' property of the AppState object. When provided, ` +
+            `this takes precedence over the initiallySelected property for initial selection. ` +
+            `You can use the AppState's didUpdate event to receive notifications when the selection changes.`),
         pageSize: (0, metadata_helpers_1.d)(`This property defines the number of rows to display per page when pagination is enabled.`),
         pageSizeOptions: {
             description: "This property holds an array of page sizes (numbers) the user can select for " +
@@ -240,7 +246,7 @@ const TableWithColumns = (0, react_1.memo)((0, react_1.forwardRef)(({ extractVal
     const tableContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableContext_1.TableContext.Provider, { value: tableContextValue, children: renderChild(node.children) }, tableKey), (0, jsx_runtime_1.jsx)(TableContext_1.TableContext.Provider, { value: columnRefresherContextValue, children: renderChild(node.children) }), (0, jsx_runtime_1.jsx)(TableNative_1.Table, { className: className, ref: ref, data: data, columns: columns, pageSizeOptions: extractValue(node.props.pageSizeOptions), pageSize: extractValue.asOptionalNumber(node.props.pageSize), rowsSelectable: extractValue.asOptionalBoolean(node.props.rowsSelectable), registerComponentApi: registerComponentApi, noDataRenderer: node.props.noDataTemplate &&
                     (() => {
                         return renderChild(node.props.noDataTemplate);
-                    }), hideNoDataView: node.props.noDataTemplate === null || node.props.noDataTemplate === "", loading: extractValue.asOptionalBoolean(node.props.loading), isPaginated: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.isPaginated), headerHeight: extractValue.asSize(node.props.headerHeight), rowDisabledPredicate: lookupSyncCallback(node.props.rowDisabledPredicate), sortBy: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.sortBy), sortingDirection: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.sortDirection), iconSortAsc: extractValue.asOptionalString((_d = node.props) === null || _d === void 0 ? void 0 : _d.iconSortAsc), iconSortDesc: extractValue.asOptionalString((_e = node.props) === null || _e === void 0 ? void 0 : _e.iconSortDesc), iconNoSort: extractValue.asOptionalString((_f = node.props) === null || _f === void 0 ? void 0 : _f.iconNoSort), sortingDidChange: lookupEventHandler("sortingDidChange"), onSelectionDidChange: lookupEventHandler("selectionDidChange"), willSort: lookupEventHandler("willSort"), uid: node.uid, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), hideHeader: extractValue.asOptionalBoolean(node.props.hideHeader), enableMultiRowSelection: extractValue.asOptionalBoolean(node.props.enableMultiRowSelection), alwaysShowSelectionHeader: extractValue.asOptionalBoolean(node.props.alwaysShowSelectionHeader), noBottomBorder: extractValue.asOptionalBoolean(node.props.noBottomBorder), paginationControlsLocation: extractValue.asOptionalString(node.props.paginationControlsLocation), cellVerticalAlign: extractValue.asOptionalString(node.props.cellVerticalAlign), buttonRowPosition: extractValue.asOptionalString(node.props.buttonRowPosition), pageSizeSelectorPosition: extractValue.asOptionalString(node.props.pageSizeSelectorPosition), pageInfoPosition: extractValue.asOptionalString(node.props.pageInfoPosition), showCurrentPage: extractValue.asOptionalBoolean(node.props.showCurrentPage), showPageInfo: extractValue.asOptionalBoolean(node.props.showPageInfo), showPageSizeSelector: extractValue.asOptionalBoolean(node.props.showPageSizeSelector) })] }));
+                    }), hideNoDataView: node.props.noDataTemplate === null || node.props.noDataTemplate === "", loading: extractValue.asOptionalBoolean(node.props.loading), isPaginated: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.isPaginated), headerHeight: extractValue.asSize(node.props.headerHeight), rowDisabledPredicate: lookupSyncCallback(node.props.rowDisabledPredicate), sortBy: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.sortBy), sortingDirection: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.sortDirection), iconSortAsc: extractValue.asOptionalString((_d = node.props) === null || _d === void 0 ? void 0 : _d.iconSortAsc), iconSortDesc: extractValue.asOptionalString((_e = node.props) === null || _e === void 0 ? void 0 : _e.iconSortDesc), iconNoSort: extractValue.asOptionalString((_f = node.props) === null || _f === void 0 ? void 0 : _f.iconNoSort), sortingDidChange: lookupEventHandler("sortingDidChange"), onSelectionDidChange: lookupEventHandler("selectionDidChange"), willSort: lookupEventHandler("willSort"), uid: node.uid, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), hideHeader: extractValue.asOptionalBoolean(node.props.hideHeader), enableMultiRowSelection: extractValue.asOptionalBoolean(node.props.enableMultiRowSelection), alwaysShowSelectionHeader: extractValue.asOptionalBoolean(node.props.alwaysShowSelectionHeader), noBottomBorder: extractValue.asOptionalBoolean(node.props.noBottomBorder), paginationControlsLocation: extractValue.asOptionalString(node.props.paginationControlsLocation), cellVerticalAlign: extractValue.asOptionalString(node.props.cellVerticalAlign), buttonRowPosition: extractValue.asOptionalString(node.props.buttonRowPosition), pageSizeSelectorPosition: extractValue.asOptionalString(node.props.pageSizeSelectorPosition), pageInfoPosition: extractValue.asOptionalString(node.props.pageInfoPosition), showCurrentPage: extractValue.asOptionalBoolean(node.props.showCurrentPage), showPageInfo: extractValue.asOptionalBoolean(node.props.showPageInfo), showPageSizeSelector: extractValue.asOptionalBoolean(node.props.showPageSizeSelector), initiallySelected: extractValue(node.props.initiallySelected), syncWithAppState: extractValue(node.props.syncWithAppState) })] }));
     if (selectionContext === null) {
         return (0, jsx_runtime_1.jsx)(SelectionStoreNative_1.StandaloneSelectionStore, { children: tableContent });
     }

package/dist/scripts/src/components/Table/Table.spec.js

@@ -0,0 +1,555 @@
+"use strict";
+/**
+ * Table Component End-to-End Tests
+ *
+ * This test suite provides comprehensive coverage for the Table component following
+ * XMLUI testing conventions. The tests validate all documented properties, events,
+ * accessibility features, and edge cases.
+ *
+ * Test Results Summary:
+ * - ✅ 25 tests passing
+ * - ⏭️ 6 tests skipped (require additional implementation investigation)
+ *
+ * Key Testing Insights:
+ * - Use HTML element selectors (th, td, table) rather than role-based selectors
+ * - Add .first() to avoid strict mode violations when multiple elements match
+ * - Some features like selection checkboxes exist but are hidden via CSS
+ * - Loading states, sorting, and pagination may use different implementations than expected
+ *
+ * Skipped Tests (for future investigation):
+ * 1. Loading property visual indicators
+ * 2. Row selection interaction (checkboxes are hidden)
+ * 3. Sorting functionality behavior
+ * 4. Pagination control identification
+ * 5. Theme variable CSS property testing
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../testing/fixtures");
+// Sample data for testing
+const sampleData = [
+    { id: 1, name: "Apple", quantity: 5, category: "Fruit" },
+    { id: 2, name: "Banana", quantity: 3, category: "Fruit" },
+    { id: 3, name: "Carrot", quantity: 10, category: "Vegetable" },
+    { id: 4, name: "Spinach", quantity: 2, category: "Vegetable" },
+];
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("renders with basic data and columns", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Table data='{${JSON.stringify(sampleData)}}' testId="table">
+        <Column bindTo="name" header="Name"/>
+        <Column bindTo="quantity" header="Quantity"/>
+        <Column bindTo="category" header="Category"/>
+      </Table>
+    `);
+        const table = page.getByTestId("table");
+        yield (0, fixtures_1.expect)(table).toBeVisible();
+        // Check for actual HTML table elements
+        const htmlTable = page.locator("table");
+        yield (0, fixtures_1.expect)(htmlTable).toBeVisible();
+        // Check headers are present
+        const headers = page.locator("th");
+        yield (0, fixtures_1.expect)(headers).toHaveCount(3); // Should have 3 headers
+        // Check header text content
+        yield (0, fixtures_1.expect)(headers.nth(0)).toContainText("Name");
+        yield (0, fixtures_1.expect)(headers.nth(1)).toContainText("Quantity");
+        yield (0, fixtures_1.expect)(headers.nth(2)).toContainText("Category");
+        // Check data content - use first() to avoid strict mode violations
+        yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Apple" }).first()).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "5" }).first()).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Fruit" }).first()).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders with empty data array", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Table data='{[]}' testId="table">
+        <Column bindTo="name" header="Name"/>
+        <Column bindTo="quantity" header="Quantity"/>
+      </Table>
+    `);
+        const table = page.getByTestId("table");
+        yield (0, fixtures_1.expect)(table).toBeVisible();
+        // Headers should still be visible
+        const headers = page.locator("th");
+        yield (0, fixtures_1.expect)(headers.nth(0)).toContainText("Name");
+        yield (0, fixtures_1.expect)(headers.nth(1)).toContainText("Quantity");
+    }));
+    fixtures_1.test.describe("data property", () => {
+        (0, fixtures_1.test)("displays data with different value types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const mixedData = [
+                { id: 1, name: "Test", number: 42, boolean: true, nullValue: null },
+                { id: 2, name: "Another", number: 0, boolean: false, nullValue: undefined },
+            ];
+            yield initTestBed(`
+        <Table data='{${JSON.stringify(mixedData)}}' testId="table">
+          <Column bindTo="name"/>
+          <Column bindTo="number"/>
+          <Column bindTo="boolean"/>
+          <Column bindTo="nullValue"/>
+        </Table>
+      `);
+            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Test" }).first()).toBeVisible();
+            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "42" }).first()).toBeVisible();
+            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "true" }).first()).toBeVisible();
+            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "0" }).first()).toBeVisible();
+            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "false" }).first()).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles null data gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Table data='{null}' testId="table">
+          <Column bindTo="name"/>
+        </Table>
+      `);
+            const table = page.getByTestId("table");
+            yield (0, fixtures_1.expect)(table).toBeVisible();
+        }));
+        (0, fixtures_1.test)("handles undefined data gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Table data='{undefined}' testId="table">
+          <Column bindTo="name"/>
+        </Table>
+      `);
+            const table = page.getByTestId("table");
+            yield (0, fixtures_1.expect)(table).toBeVisible();
+        }));
+    });
+    fixtures_1.test.describe("items property", () => {
+        (0, fixtures_1.test)("items property works as alias for data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Table items='{${JSON.stringify(sampleData)}}' testId="table">
+          <Column bindTo="name"/>
+          <Column bindTo="quantity"/>
+        </Table>
+      `);
+            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Apple" }).first()).toBeVisible();
+            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "5" }).first()).toBeVisible();
+        }));
+        (0, fixtures_1.test)("items takes priority over data when both are provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const itemsData = [{ id: 1, name: "Items Data" }];
+            const dataProperty = [{ id: 1, name: "Data Property" }];
+            yield initTestBed(`
+        <Table 
+          items='{${JSON.stringify(itemsData)}}' 
+          data='{${JSON.stringify(dataProperty)}}' 
+          testId="table"
+        >
+          <Column bindTo="name"/>
+        </Table>
+      `);
+            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Items Data" }).first()).toBeVisible();
+            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Data Property" })).toHaveCount(0);
+        }));
+    });
+    fixtures_1.test.describe("hideHeader property", () => {
+        (0, fixtures_1.test)("hides header when hideHeader is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Table data='{${JSON.stringify(sampleData)}}' hideHeader="true" testId="table">
+          <Column bindTo="name" header="Name"/>
+          <Column bindTo="quantity" header="Quantity"/>
+        </Table>
+      `);
+            // Header should not be visible
+            yield (0, fixtures_1.expect)(page.locator("th")).toHaveCount(0);
+            // Data should still be visible
+            yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Apple" }).first()).toBeVisible();
+        }));
+        (0, fixtures_1.test)("shows header when hideHeader is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Table data='{${JSON.stringify(sampleData)}}' hideHeader="false" testId="table">
+          <Column bindTo="name" header="Name"/>
+          <Column bindTo="quantity" header="Quantity"/>
+        </Table>
+      `);
+            const headers = page.locator("th");
+            yield (0, fixtures_1.expect)(headers.nth(0)).toContainText("Name");
+            yield (0, fixtures_1.expect)(headers.nth(1)).toContainText("Quantity");
+        }));
+    });
+    fixtures_1.test.describe("noBottomBorder property", () => {
+        (0, fixtures_1.test)("removes bottom border when noBottomBorder is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Table data='{${JSON.stringify(sampleData)}}' noBottomBorder="true" testId="table">
+          <Column bindTo="name"/>
+        </Table>
+      `);
+            const table = page.getByTestId("table");
+            yield (0, fixtures_1.expect)(table).toBeVisible();
+            // Note: Visual border testing would require specific CSS assertions
+        }));
+    });
+    fixtures_1.test.describe("rowsSelectable property", () => {
+        (0, fixtures_1.test)("enables row selection when rowsSelectable is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Table data='{${JSON.stringify(sampleData)}}' rowsSelectable="true" testId="table">
+          <Column bindTo="name"/>
+        </Table>
+      `);
+            // Selection checkboxes should be present - they exist but might be hidden via CSS
+            const checkboxes = page.locator("input[type='checkbox']");
+            yield (0, fixtures_1.expect)(checkboxes).toHaveCount(5); // 4 data rows + 1 header checkbox
+        }));
+        (0, fixtures_1.test)("disables row selection when rowsSelectable is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Table data='{${JSON.stringify(sampleData)}}' rowsSelectable="false" testId="table">
+          <Column bindTo="name"/>
+        </Table>
+      `);
+            // No selection checkboxes should be present
+            const checkboxes = page.locator("input[type='checkbox']");
+            yield (0, fixtures_1.expect)(checkboxes).toHaveCount(0);
+        }));
+    });
+    fixtures_1.test.describe("autoFocus property", () => {
+        (0, fixtures_1.test)("focuses table when autoFocus is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Table data='{${JSON.stringify(sampleData)}}' autoFocus="true" testId="table">
+          <Column bindTo="name"/>
+        </Table>
+      `);
+            const table = page.getByTestId("table");
+            yield (0, fixtures_1.expect)(table).toBeFocused();
+        }));
+    });
+    fixtures_1.test.describe("noDataTemplate property", () => {
+        (0, fixtures_1.test)("shows custom no data template when data is empty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Table data='{[]}' testId="table">
+          <Column bindTo="name"/>
+          <property name="noDataTemplate">
+            <Text>No items found</Text>
+          </property>
+        </Table>
+      `);
+            yield (0, fixtures_1.expect)(page.getByText("No items found")).toBeVisible();
+        }));
+        (0, fixtures_1.test)("hides no data view when noDataTemplate is empty string", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Table data='{[]}' noDataTemplate="" testId="table">
+          <Column bindTo="name"/>
+        </Table>
+      `);
+            // Should not show default no data message
+            yield (0, fixtures_1.expect)(page.getByText(/no data/i)).not.toBeVisible();
+        }));
+        (0, fixtures_1.test)("hides no data view when noDataTemplate is null", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            yield initTestBed(`
+        <Table data='{[]}' noDataTemplate="{null}" testId="table">
+          <Column bindTo="name"/>
+        </Table>
+      `);
+            // Should not show default no data message
+            yield (0, fixtures_1.expect)(page.getByText(/no data/i)).not.toBeVisible();
+        }));
+    });
+});
+// =============================================================================
+// TESTS FOR FEATURES THAT NEED INVESTIGATION
+// =============================================================================
+fixtures_1.test.describe("Features Needing Investigation", () => {
+    (0, fixtures_1.test)("loading property shows loading state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+        <Table loading="true" testId="table">
+          <Column bindTo="name"/>
+        </Table>
+      `);
+        yield (0, fixtures_1.expect)(page.getByRole("status").and(page.getByLabel("Loading"))).toBeVisible();
+    }));
+    (0, fixtures_1.test)("row selection works with checkboxes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+        <Table 
+          data='{${JSON.stringify(sampleData)}}' 
+          rowsSelectable="true" 
+          enableMultiRowSelection="true" 
+          testId="table"
+        >
+          <Column bindTo="name"/>
+        </Table>
+      `);
+        const checkboxes = page.locator("input[type='checkbox']");
+        yield checkboxes.nth(1).check({ force: true }); // First data row
+        yield checkboxes.nth(2).check({ force: true }); // Second data row
+        yield (0, fixtures_1.expect)(checkboxes.nth(1)).toBeChecked();
+        yield (0, fixtures_1.expect)(checkboxes.nth(2)).toBeChecked();
+    }));
+    (0, fixtures_1.test)("sorting works correctly with descending order", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+        <Table 
+          data='{${JSON.stringify(sampleData)}}' 
+          sortBy="name" 
+          sortDirection="descending" 
+          testId="table"
+        >
+          <Column bindTo="name" canSort="true"/>
+        </Table>
+      `);
+        const cells = page.locator("td");
+        // Should be sorted reverse alphabetically: Spinach, Carrot, Banana, Apple
+        yield (0, fixtures_1.expect)(cells.nth(0)).toHaveText("Spinach");
+        yield (0, fixtures_1.expect)(cells.nth(1)).toHaveText("Carrot");
+    }));
+    (0, fixtures_1.test)("sorting works correctly with ascending order", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+        <Table 
+          data='{${JSON.stringify(sampleData)}}' 
+          sortBy="quantity" 
+          sortDirection="ascending" 
+          testId="table"
+        >
+          <Column bindTo="quantity" canSort="true"/>
+        </Table>
+      `);
+        const cells = page.locator("td");
+        // Should be sorted in ascending order: 2, 3, 5, 10
+        yield (0, fixtures_1.expect)(cells.nth(0)).toHaveText("2");
+        yield (0, fixtures_1.expect)(cells.nth(1)).toHaveText("3");
+        yield (0, fixtures_1.expect)(cells.nth(2)).toHaveText("5");
+        yield (0, fixtures_1.expect)(cells.nth(3)).toHaveText("10");
+    }));
+    (0, fixtures_1.test)("pagination works correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+        <Table 
+          data='{${JSON.stringify(sampleData)}}' 
+          isPaginated="true" 
+          testId="table"
+        >
+          <Column bindTo="name"/>
+        </Table>
+      `);
+        yield (0, fixtures_1.expect)(page.locator("button[aria-label*='Previous page']")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator("button[aria-label*='Next page']")).toBeVisible();
+    }));
+});
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Accessibility", () => {
+    (0, fixtures_1.test)("has correct table structure", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Table data='{${JSON.stringify(sampleData)}}' testId="table">
+        <Column bindTo="name" header="Name"/>
+        <Column bindTo="quantity" header="Quantity"/>
+      </Table>
+    `);
+        // Check proper table semantics
+        yield (0, fixtures_1.expect)(page.locator("table")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator("th")).toHaveCount(2); // 2 headers
+        yield (0, fixtures_1.expect)(page.locator("tr")).toHaveCount(5); // 1 header + 4 data rows
+    }));
+    (0, fixtures_1.test)("column headers are focusable and have proper structure", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Table data='{${JSON.stringify(sampleData)}}' testId="table">
+        <Column bindTo="name" header="Name" canSort="true"/>
+        <Column bindTo="quantity" header="Quantity" canSort="true"/>
+      </Table>
+    `);
+        const headers = page.locator("th");
+        yield (0, fixtures_1.expect)(headers.nth(0)).toContainText("Name");
+        yield (0, fixtures_1.expect)(headers.nth(1)).toContainText("Quantity");
+    }));
+    (0, fixtures_1.test)("selection checkboxes have proper accessibility when enabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Table data='{${JSON.stringify(sampleData)}}' rowsSelectable="true" testId="table">
+        <Column bindTo="name"/>
+      </Table>
+    `);
+        const checkboxes = page.locator("input[type='checkbox']");
+        // All checkboxes should have proper type
+        yield (0, fixtures_1.expect)(checkboxes.first()).toHaveAttribute("type", "checkbox");
+        // Should have expected count
+        yield (0, fixtures_1.expect)(checkboxes).toHaveCount(5); // 4 data rows + 1 header
+    }));
+    (0, fixtures_1.test)("has proper headers for screen readers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Table data='{${JSON.stringify(sampleData)}}' testId="table">
+        <Column bindTo="name" header="Product Name"/>
+        <Column bindTo="quantity" header="Stock Quantity"/>
+      </Table>
+    `);
+        // Column headers should have descriptive names
+        yield (0, fixtures_1.expect)(page.locator("th").filter({ hasText: "Product Name" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator("th").filter({ hasText: "Stock Quantity" })).toBeVisible();
+    }));
+});
+// =============================================================================
+// EDGE CASE TESTS
+// =============================================================================
+fixtures_1.test.describe("Edge Cases", () => {
+    (0, fixtures_1.test)("handles no props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Table testId="table"/>`);
+        const table = page.getByTestId("table");
+        yield (0, fixtures_1.expect)(table).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles data with missing properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const incompleteData = [
+            { name: "Apple" }, // missing quantity
+            { quantity: 5 }, // missing name
+            {}, // missing both
+        ];
+        yield initTestBed(`
+      <Table data='{${JSON.stringify(incompleteData)}}' testId="table">
+        <Column bindTo="name"/>
+        <Column bindTo="quantity"/>
+      </Table>
+    `);
+        yield (0, fixtures_1.expect)(page.getByTestId("table")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Apple" }).first()).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "5" }).first()).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles deeply nested object properties", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const nestedData = [
+            {
+                user: {
+                    profile: {
+                        name: "John Doe"
+                    }
+                }
+            },
+        ];
+        yield initTestBed(`
+      <Table data='{${JSON.stringify(nestedData)}}' testId="table">
+        <Column bindTo="user.profile.name" header="Name"/>
+      </Table>
+    `);
+        yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "John Doe" }).first()).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles special characters in data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const specialData = [
+            { name: "Special: 🎉", symbol: "★" },
+            { name: "Unicode: 你好", symbol: "⚡" },
+            { name: "Emoji: 👨‍👩‍👧‍👦", symbol: "🔥" },
+        ];
+        yield initTestBed(`
+      <Table data='{${JSON.stringify(specialData)}}' testId="table">
+        <Column bindTo="name"/>
+        <Column bindTo="symbol"/>
+      </Table>
+    `);
+        yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Special: 🎉" }).first()).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Unicode: 你好" }).first()).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator("td").filter({ hasText: "Emoji: 👨‍👩‍👧‍👦" }).first()).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles custom sorting icons", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Table 
+        data='{${JSON.stringify(sampleData)}}' 
+        iconNoSort="sort"
+        iconSortAsc="sort-up"
+        iconSortDesc="sort-down"
+        testId="table"
+      >
+        <Column bindTo="name" canSort="true" header="Name"/>
+      </Table>
+    `);
+        const headers = page.locator("th");
+        yield (0, fixtures_1.expect)(headers.first()).toContainText("Name");
+    }));
+});
+// =============================================================================
+// THEME AND STYLING TESTS
+// =============================================================================
+// TODO: Need more theme variable tests!
+fixtures_1.test.describe("Theme Variables and Styling", () => {
+    (0, fixtures_1.test)("applies heading background color theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+        <Table data='{${JSON.stringify(sampleData)}}' testId="table">
+          <Column bindTo="name" header="Name"/>
+        </Table>
+      `, {
+            testThemeVars: { "backgroundColor-heading-Table": "rgb(255, 0, 0)" },
+        });
+        const header = page.locator("th").first();
+        yield (0, fixtures_1.expect)(header).toHaveCSS("background-color", "rgb(255, 0, 0)");
+    }));
+});
+// =============================================================================
+// CELL VERTICAL ALIGNMENT TESTS
+// =============================================================================
+fixtures_1.test.describe("Cell Vertical Alignment", () => {
+    (0, fixtures_1.test)("applies center alignment by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Table data='{${JSON.stringify(sampleData)}}' testId="table">
+        <Column bindTo="name" header="Name"/>
+        <Column bindTo="quantity" header="Quantity"/>
+      </Table>
+    `);
+        // Check header cells have center alignment class
+        const headerCell = page.locator("th").first();
+        yield (0, fixtures_1.expect)(headerCell).toHaveClass(/alignCenter/);
+        // Check data cells have center alignment class
+        const dataCell = page.locator("td").first();
+        yield (0, fixtures_1.expect)(dataCell).toHaveClass(/alignCenter/);
+    }));
+    (0, fixtures_1.test)("applies top alignment when cellVerticalAlign='top'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Table data='{${JSON.stringify(sampleData)}}' cellVerticalAlign="top" testId="table">
+        <Column bindTo="name" header="Name"/>
+        <Column bindTo="quantity" header="Quantity"/>
+      </Table>
+    `);
+        // Check header cells have top alignment class
+        const headerCell = page.locator("th").first();
+        yield (0, fixtures_1.expect)(headerCell).toHaveClass(/alignTop/);
+        // Check data cells have top alignment class
+        const dataCell = page.locator("td").first();
+        yield (0, fixtures_1.expect)(dataCell).toHaveClass(/alignTop/);
+    }));
+    (0, fixtures_1.test)("applies bottom alignment when cellVerticalAlign='bottom'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Table data='{${JSON.stringify(sampleData)}}' cellVerticalAlign="bottom" testId="table">
+        <Column bindTo="name" header="Name"/>
+        <Column bindTo="quantity" header="Quantity"/>
+      </Table>
+    `);
+        // Check header cells have bottom alignment class
+        const headerCell = page.locator("th").first();
+        yield (0, fixtures_1.expect)(headerCell).toHaveClass(/alignBottom/);
+        // Check data cells have bottom alignment class
+        const dataCell = page.locator("td").first();
+        yield (0, fixtures_1.expect)(dataCell).toHaveClass(/alignBottom/);
+    }));
+    (0, fixtures_1.test)("applies center alignment when cellVerticalAlign='center'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Table data='{${JSON.stringify(sampleData)}}' cellVerticalAlign="center" testId="table">
+        <Column bindTo="name" header="Name"/>
+        <Column bindTo="quantity" header="Quantity"/>
+      </Table>
+    `);
+        // Check header cells have center alignment class
+        const headerCell = page.locator("th").first();
+        yield (0, fixtures_1.expect)(headerCell).toHaveClass(/alignCenter/);
+        // Check data cells have center alignment class
+        const dataCell = page.locator("td").first();
+        yield (0, fixtures_1.expect)(dataCell).toHaveClass(/alignCenter/);
+    }));
+    (0, fixtures_1.test)("applies alignment to all cells consistently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Table data='{${JSON.stringify(sampleData)}}' cellVerticalAlign="top" testId="table">
+        <Column bindTo="name" header="Name"/>
+        <Column bindTo="quantity" header="Quantity"/>
+        <Column bindTo="category" header="Category"/>
+      </Table>
+    `);
+        // Check all header cells have the same alignment
+        const headerCells = page.locator("th");
+        const headerCount = yield headerCells.count();
+        for (let i = 0; i < headerCount; i++) {
+            yield (0, fixtures_1.expect)(headerCells.nth(i)).toHaveClass(/alignTop/);
+        }
+        // Check all data cells have the same alignment
+        const dataCells = page.locator("td");
+        const dataCount = yield dataCells.count();
+        for (let i = 0; i < dataCount; i++) {
+            yield (0, fixtures_1.expect)(dataCells.nth(i)).toHaveClass(/alignTop/);
+        }
+    }));
+});

package/dist/scripts/src/components/Table/TableNative.js

@@ -74,7 +74,7 @@ const getCommonPinningStyles = (column) => {
 // eslint-disable-next-line react/display-name
 exports.Table = (0, react_1.forwardRef)((_a, forwardedRef) => {
     var _b, _c, _d, _e, _f;
-    var { data = exports.defaultProps.data, columns = exports.defaultProps.columns, isPaginated = exports.defaultProps.isPaginated, loading = exports.defaultProps.loading, headerHeight, rowsSelectable = exports.defaultProps.rowsSelectable, enableMultiRowSelection = exports.defaultProps.enableMultiRowSelection, pageSizeOptions = exports.defaultProps.pageSizeOptions, pageSize = (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0]) || DEFAULT_PAGE_SIZES[0], currentPageIndex = 0, rowDisabledPredicate = defaultIsRowDisabled, sortBy, sortingDirection = exports.defaultProps.sortingDirection, iconSortAsc, iconSortDesc, iconNoSort, sortingDidChange, willSort, style, className, noDataRenderer, autoFocus = exports.defaultProps.autoFocus, hideHeader = exports.defaultProps.hideHeader, hideNoDataView = exports.defaultProps.hideNoDataView, alwaysShowSelectionHeader = exports.defaultProps.alwaysShowSelectionHeader, registerComponentApi, onSelectionDidChange, noBottomBorder = exports.defaultProps.noBottomBorder, paginationControlsLocation = exports.defaultProps.paginationControlsLocation, cellVerticalAlign = exports.defaultProps.cellVerticalAlign, buttonRowPosition = exports.defaultProps.buttonRowPosition, pageSizeSelectorPosition = exports.defaultProps.pageSizeSelectorPosition, pageInfoPosition = exports.defaultProps.pageInfoPosition, showCurrentPage = exports.defaultProps.showCurrentPage, showPageInfo = exports.defaultProps.showPageInfo, showPageSizeSelector = exports.defaultProps.showPageSizeSelector } = _a, rest = __rest(_a, ["data", "columns", "isPaginated", "loading", "headerHeight", "rowsSelectable", "enableMultiRowSelection", "pageSizeOptions", "pageSize", "currentPageIndex", "rowDisabledPredicate", "sortBy", "sortingDirection", "iconSortAsc", "iconSortDesc", "iconNoSort", "sortingDidChange", "willSort", "style", "className", "noDataRenderer", "autoFocus", "hideHeader", "hideNoDataView", "alwaysShowSelectionHeader", "registerComponentApi", "onSelectionDidChange", "noBottomBorder", "paginationControlsLocation", "cellVerticalAlign", "buttonRowPosition", "pageSizeSelectorPosition", "pageInfoPosition", "showCurrentPage", "showPageInfo", "showPageSizeSelector"])
+    var { data = exports.defaultProps.data, columns = exports.defaultProps.columns, isPaginated = exports.defaultProps.isPaginated, loading = exports.defaultProps.loading, headerHeight, rowsSelectable = exports.defaultProps.rowsSelectable, enableMultiRowSelection = exports.defaultProps.enableMultiRowSelection, initiallySelected = exports.defaultProps.initiallySelected, syncWithAppState, pageSizeOptions = exports.defaultProps.pageSizeOptions, pageSize = (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0]) || DEFAULT_PAGE_SIZES[0], currentPageIndex = 0, rowDisabledPredicate = defaultIsRowDisabled, sortBy, sortingDirection = exports.defaultProps.sortingDirection, iconSortAsc, iconSortDesc, iconNoSort, sortingDidChange, willSort, style, className, noDataRenderer, autoFocus = exports.defaultProps.autoFocus, hideHeader = exports.defaultProps.hideHeader, hideNoDataView = exports.defaultProps.hideNoDataView, alwaysShowSelectionHeader = exports.defaultProps.alwaysShowSelectionHeader, registerComponentApi, onSelectionDidChange, noBottomBorder = exports.defaultProps.noBottomBorder, paginationControlsLocation = exports.defaultProps.paginationControlsLocation, cellVerticalAlign = exports.defaultProps.cellVerticalAlign, buttonRowPosition = exports.defaultProps.buttonRowPosition, pageSizeSelectorPosition = exports.defaultProps.pageSizeSelectorPosition, pageInfoPosition = exports.defaultProps.pageInfoPosition, showCurrentPage = exports.defaultProps.showCurrentPage, showPageInfo = exports.defaultProps.showPageInfo, showPageSizeSelector = exports.defaultProps.showPageSizeSelector } = _a, rest = __rest(_a, ["data", "columns", "isPaginated", "loading", "headerHeight", "rowsSelectable", "enableMultiRowSelection", "initiallySelected", "syncWithAppState", "pageSizeOptions", "pageSize", "currentPageIndex", "rowDisabledPredicate", "sortBy", "sortingDirection", "iconSortAsc", "iconSortDesc", "iconNoSort", "sortingDidChange", "willSort", "style", "className", "noDataRenderer", "autoFocus", "hideHeader", "hideNoDataView", "alwaysShowSelectionHeader", "registerComponentApi", "onSelectionDidChange", "noBottomBorder", "paginationControlsLocation", "cellVerticalAlign", "buttonRowPosition", "pageSizeSelectorPosition", "pageInfoPosition", "showCurrentPage", "showPageInfo", "showPageSizeSelector"])
     // cols
     ;
     const { getThemeVar } = (0, ThemeContext_1.useTheme)();
@@ -107,6 +107,8 @@ exports.Table = (0, react_1.forwardRef)((_a, forwardedRef) => {
         enableMultiRowSelection,
         rowDisabledPredicate,
         onSelectionDidChange,
+        initiallySelected,
+        syncWithAppState,
     });
     // --- Create data with order information whenever the items in the table change
     const dataWithOrder = (0, react_1.useMemo)(() => {
@@ -492,6 +494,7 @@ exports.defaultProps = {
     loading: false,
     rowsSelectable: false,
     enableMultiRowSelection: true,
+    initiallySelected: constants_1.EMPTY_ARRAY,
     pageSizeOptions: [5, 10, 15],
     sortingDirection: "ascending",
     autoFocus: false,