diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx
index 5a74e761d8f..3961b06b0a6 100644
--- a/docs/MigrationGuide.mdx
+++ b/docs/MigrationGuide.mdx
@@ -355,7 +355,7 @@ Please use the following components instead:
- `headerContent` now only accepts the `ObjectPageHeader` component.
- `headerTitle` now only accepts the `ObjectPageTitle` component.
-**Renamed props:**
+**Renamed Props:**
- `a11yConfig.dynamicPageAnchorBar` has been renamed to `a11yConfig.objectPageAnchorBar`
@@ -422,6 +422,54 @@ function MyComponent() {
}
```
+### AnalyticalTable
+
+**Renamed or Changed Props:**
+
+- `alwaysShowSubComponent` has been removed, please use `subComponentsBehavior` with `AnalyticalTableSubComponentsBehavior.Visibe` instead.
+- The default value of `sortable` (`true`) has been removed. To allow sorting in your table please set `sorting` to `true` yourself.
+
+**Renamed Enums:**
+
+Only the names of the following enums have changed, so it's sufficient to replace them with the new name.
+
+- `TableScaleWidthMode` is now `AnalyticalTableScaleWidthMode`
+- `TableSelectionBehavior` is now `AnalyticalTableSelectionBehavior`
+- `TableSelectionMode` is now `AnalyticalTableSelectionMode`
+- `TableVisibleRowCountMode` is now `AnalyticalTableVisibleRowCountMode`
+
+**[Column Properties](https://sap.github.io/ui5-webcomponents-react/?path=/docs/data-display-analyticaltable--docs#column-properties) Changes**
+
+- `canReorder` has been removed, please use `disableDragAndDrop` instead.
+
+```jsx
+// v1
+const columns = [{ ...otherProperties, canReorder: false }];
+
+;
+
+// v2
+const columns = [{ ...otherProps, disableDragAndDrop: true }];
+
+;
+```
+
### Expandable Text
The prop `portalContainer` has been removed as it is no longer needed due to the [popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) which is now used in the UI5 Web Components.
diff --git a/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json b/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
index ba330927254..d4d51e157ac 100644
--- a/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
+++ b/packages/cli/src/scripts/codemod/transforms/v2/codemodConfig.json
@@ -16,6 +16,7 @@
},
"removedProps": ["portalContainer"]
},
+ "AnalyticalTable": {},
"Avatar": {},
"Badge": {
"newComponent": "Tag"
@@ -596,6 +597,9 @@
"renamedEnums": {
"MessageBoxActions": "MessageBoxAction",
"MessageBoxTypes": "MessageBoxType",
+ "TableScaleWidthMode": "AnalyticalTableScaleWidthMode",
+ "TableSelectionBehavior": "AnalyticalTableSelectionBehavior",
+ "TableVisibleRowCountMode": "AnalyticalTableVisibleRowCountMode",
"Themes": "Theme"
},
"enumProperties": {
diff --git a/packages/cli/src/scripts/codemod/transforms/v2/main.cts b/packages/cli/src/scripts/codemod/transforms/v2/main.cts
index ac56997fe46..0ff9731e39f 100644
--- a/packages/cli/src/scripts/codemod/transforms/v2/main.cts
+++ b/packages/cli/src/scripts/codemod/transforms/v2/main.cts
@@ -54,7 +54,6 @@ function extractValueFromProp(
const prop = j(el).find(j.JSXAttribute, { name: { name: propName } });
if (prop.size()) {
- const s = prop.get();
const stringLiteral = prop.find(j.StringLiteral);
const numericLiteral = prop.find(j.NumericLiteral);
prop.remove();
@@ -112,6 +111,39 @@ export default function transform(file: FileInfo, api: API, options?: Options):
});
}
+ if (componentName === 'AnalyticalTable') {
+ jsxElements.forEach((el) => {
+ const alwaysShowSubComponent = j(el).find(j.JSXAttribute, { name: { name: 'alwaysShowSubComponent' } });
+ if (alwaysShowSubComponent.size() > 0) {
+ const attr = alwaysShowSubComponent.get();
+
+ if (
+ attr.value.value === null ||
+ (attr.value.value?.type === 'JSXAttribute' && attr.value.value === true) ||
+ (attr.value.value?.type === 'JSXExpressionContainer' && attr.value.value.expression.value === true)
+ ) {
+ j(el)
+ .find(j.JSXOpeningElement)
+ .get()
+ .value.attributes.push(
+ j.jsxAttribute(j.jsxIdentifier('subComponentsBehavior'), j.stringLiteral('Visible'))
+ );
+ }
+ alwaysShowSubComponent.remove();
+ isDirty = true;
+ }
+
+ const sortable = j(el).find(j.JSXAttribute, { name: { name: 'sortable' } });
+ if (sortable.size() === 0) {
+ j(el)
+ .find(j.JSXOpeningElement)
+ .get()
+ .value.attributes.push(j.jsxAttribute(j.jsxIdentifier('sortable'), null));
+ isDirty = true;
+ }
+ });
+ }
+
// Special Handling for logic inversions, etc.
if (componentName === 'Button') {
jsxElements.forEach((el) => {
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
index 8c091693a12..99a47bdece3 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -92,9 +92,15 @@ describe('AnalyticalTable', () => {
it('sorting', () => {
const sort = cy.spy().as('onSortSpy');
cy.mount();
+
+ cy.findByText('Name').click();
+ cy.get('[ui5-popover]').should('not.exist');
+
+ cy.mount();
cy.get('[aria-rowindex="3"] > [aria-colindex="1"]').should('text', 'X');
cy.findByText('Name').click();
+ cy.get('[ui5-popover]').should('be.visible');
cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
cy.get('@onSortSpy').should('have.been.calledWithMatch', {
detail: { column: { id: 'name' }, sortDirection: 'asc' }
@@ -752,7 +758,7 @@ describe('AnalyticalTable', () => {
const GroupBySelectTable = (props: PropTypes) => {
const { onRowSelect } = props;
const [relevantPayload, setRelevantPayload] = useState>({});
- const tableInstance = useRef>();
+ const tableInstance = useRef>(null);
useEffect(() => {
if (tableInstance.current) {
@@ -804,7 +810,7 @@ describe('AnalyticalTable', () => {
cy.findByTestId('isSelected').should('have.text', 'true');
cy.findByText('Friend Name').click();
- cy.findByText('Group').click();
+ cy.findByText('Group').realClick();
cy.get('[aria-rowindex="7"] > [aria-colindex="3"] > [title="Expand Node"] > [ui5-icon]').click();
cy.findByText('25').click();
@@ -1454,7 +1460,7 @@ describe('AnalyticalTable', () => {
it('Alternate Row Color', () => {
const standardRowColor = cssVarToRgb(ThemingParameters.sapList_Background);
const alternatingRowColor = cssVarToRgb(ThemingParameters.sapList_AlternatingBackground);
- cy.mount();
+ cy.mount();
cy.get('[data-component-name="AnalyticalTableContainer"]').should('have.css', 'background-color', standardRowColor);
function testAlternateRowColor() {
@@ -1777,6 +1783,8 @@ describe('AnalyticalTable', () => {
}
];
cy.mount();
+ cy.get('[data-column-id="name"]').should('not.have.attr', 'aria-haspopup', 'menu').click();
+ cy.mount();
cy.get('[data-column-id="name"]').should('have.attr', 'aria-haspopup', 'menu').click();
cy.get('[ui5-popover]').should('be.visible');
cy.get('[data-column-id="age"]').should('not.have.attr', 'aria-haspopup');
@@ -2191,7 +2199,7 @@ describe('AnalyticalTable', () => {
it("Expandable: don't scroll when expanded/collapsed", () => {
const TestComp = () => {
- const tableInstanceRef = useRef();
+ const tableInstanceRef = useRef<{ toggleRowExpanded?: (e: string) => void }>({});
return (
<>