Add keyed to listItems when rowStyles changes

Author: ponnexcodev

packages/design-system/src/elements/toniq-list-table/toniq-list-table.element.ts

@@ -14,6 +14,7 @@ import {
     css,
     defineElementEvent,
     html,
+    keyed,
     listen,
     nothing,
     onResize,
@@ -379,11 +380,9 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
         function tableUpdate() {
             const container = host.shadowRoot.querySelector('.table-list') as HTMLElement;
             if (container instanceof HTMLElement) {
-                requestAnimationFrame(() => {
-                    updateState({
-                        canScroll: container.scrollWidth > container.clientWidth,
-                        tableListLeft: container.getBoundingClientRect().left,
-                    });
+                updateState({
+                    canScroll: container.scrollWidth > container.clientWidth,
+                    tableListLeft: container.getBoundingClientRect().left,
                 });
             }
         }
@@ -545,7 +544,9 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
                         updateRowItems();
                     })}
                     ${listen('scroll', () => {
-                        tableUpdate();
+                        requestAnimationFrame(() => {
+                            tableUpdate();
+                        });
                     })}
                     ${listen('keydown', (event) => {
                         if (inputs.showLoading) {
@@ -554,12 +555,15 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
                         }
                     })}
                 >
-                    ${repeat(
-                        rows,
-                        (item) => item,
-                        (item: ListTableRow<any>, index: number) => {
-                            return listItem(item, index);
-                        },
+                    ${keyed(
+                        state.rowStyles,
+                        repeat(
+                            rows,
+                            (item) => item,
+                            (item: ListTableRow<any>, index: number) => {
+                                return listItem(item, index);
+                            },
+                        ),
                     )}
                     ${renderIf(
                         state.canScroll,