Updates

Author: ponnexcodev

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

@@ -324,10 +324,18 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
             if (container instanceof HTMLElement) {
                 state.debouncedResize(() => {
                     requestAnimationFrame(() => {
-                        updateState({
-                            canScroll: container.scrollWidth > container.clientWidth,
-                            tableListLeft: container.getBoundingClientRect().left,
-                        });
+                        const newCanScroll = container.scrollWidth > container.clientWidth;
+                        const newTableListLeft = container.getBoundingClientRect().left;
+
+                        if (
+                            newCanScroll !== state.canScroll ||
+                            newTableListLeft !== state.tableListLeft
+                        ) {
+                            updateState({
+                                canScroll: newCanScroll,
+                                tableListLeft: newTableListLeft,
+                            });
+                        }
                     });
                 });
             }
@@ -366,54 +374,52 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
                         isSticky ? calculateLeft(columnItem.key as string) : undefined,
                     )}
                 >
-                    ${guard([rows], () =>
-                        repeat(
-                            rows,
-                            (row, rowIndex) => rowIndex,
-                            (row, rowIndex) => {
-                                const rowItem = {
-                                    contents: row.cells[columnItem.key as keyof typeof row],
-                                    rowActions: row.rowActions,
-                                } as {
-                                    contents: HtmlInterpolation;
-                                    rowActions: typeof row.rowActions;
-                                };
-
-                                return html`
-                                    <div
-                                        class="column-content"
-                                        ${rowIndex > 0
-                                            ? listen('click', (clickEvent) => {
-                                                  rowItem?.rowActions?.click?.({
-                                                      clickEvent,
-                                                      dispatch,
-                                                  });
-                                              })
-                                            : nothing}
-                                    >
-                                        ${renderIf(
-                                            rowIndex === 0,
-                                            html`
-                                                <span class="header" style=${columnItem.style}>
-                                                    ${columnItem.title}
-                                                </span>
-                                            `,
-                                            html`
-                                                <div
-                                                    class="content-wrapper"
-                                                    ${listen('click', (event) => {
-                                                        event.preventDefault();
-                                                        event.stopPropagation();
-                                                    })}
-                                                >
-                                                    ${rowItem.contents}
-                                                </div>
-                                            `,
-                                        )}
-                                    </div>
-                                `;
-                            },
-                        ),
+                    ${repeat(
+                        rows,
+                        (row, rowIndex) => rowIndex,
+                        (row, rowIndex) => {
+                            const rowItem = {
+                                contents: row.cells[columnItem.key as keyof typeof row],
+                                rowActions: row.rowActions,
+                            } as {
+                                contents: HtmlInterpolation;
+                                rowActions: typeof row.rowActions;
+                            };
+
+                            return html`
+                                <div
+                                    class="column-content"
+                                    ${rowIndex > 0
+                                        ? listen('click', (clickEvent) => {
+                                              rowItem?.rowActions?.click?.({
+                                                  clickEvent,
+                                                  dispatch,
+                                              });
+                                          })
+                                        : nothing}
+                                >
+                                    ${renderIf(
+                                        rowIndex === 0,
+                                        html`
+                                            <span class="header" style=${columnItem.style}>
+                                                ${columnItem.title}
+                                            </span>
+                                        `,
+                                        html`
+                                            <div
+                                                class="content-wrapper"
+                                                ${listen('click', (event) => {
+                                                    event.preventDefault();
+                                                    event.stopPropagation();
+                                                })}
+                                            >
+                                                ${guard([rowIndex], () => rowItem.contents)}
+                                            </div>
+                                        `,
+                                    )}
+                                </div>
+                            `;
+                        },
                     )}
                 </div>
             `;
@@ -467,14 +473,10 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
                         }
                     })}
                 >
-                    ${guard([enabledColumns], () =>
-                        repeat(
-                            enabledColumns,
-                            (columnItem, columnIndex) => columnIndex,
-                            (columnItem) => {
-                                return listItem(columnItem);
-                            },
-                        ),
+                    ${repeat(
+                        enabledColumns,
+                        (columnItem, columnIndex) => columnIndex,
+                        (columnItem) => listItem(columnItem),
                     )}
                     ${renderIf(
                         state.canScroll,