From 12b9abcbb2ff292c23deb98b4c9e38281b47d1f6 Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Wed, 6 Mar 2024 12:55:40 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/sharp-gorillas-search.md           |  5 ++++
 .../src/core/Table/Table.test.tsx             | 23 +++++++++++++++++++
 .../itwinui-react/src/core/Table/Table.tsx    |  5 +++-
 3 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/sharp-gorillas-search.md

diff --git a/.changeset/sharp-gorillas-search.md b/.changeset/sharp-gorillas-search.md
new file mode 100644
index 00000000000..2a4f72da110
--- /dev/null
+++ b/.changeset/sharp-gorillas-search.md
@@ -0,0 +1,5 @@
+---
+"@itwin/itwinui-react": patch
+---
+
+Fixed a bug in `Table` where `initialState.columnOrder` was not being respected.
diff --git a/packages/itwinui-react/src/core/Table/Table.test.tsx b/packages/itwinui-react/src/core/Table/Table.test.tsx
index 3d621b1ad8a..cc7f962ba84 100644
--- a/packages/itwinui-react/src/core/Table/Table.test.tsx
+++ b/packages/itwinui-react/src/core/Table/Table.test.tsx
@@ -3685,6 +3685,29 @@ it.each([
   },
 );
 
+it('should respect initialState.columnOrder', () => {
+  const mockColumns = columns();
+  const columnOrder = ['description', 'view', 'name'];
+
+  const { container } = render(
+    <Table
+      columns={mockColumns}
+      data={mockedData()}
+      emptyTableContent='Empty table'
+      initialState={{ columnOrder }}
+    />,
+  );
+
+  // DOM order should match columnOrder
+  container
+    .querySelectorAll<HTMLDivElement>('[role=columnheader]')
+    .forEach((cell, index) =>
+      expect(cell.textContent).toBe(
+        mockColumns.find((c) => c.id === columnOrder[index])?.Header,
+      ),
+    );
+});
+
 it('should not have `draggable` attribute on columns with `disableReordering` enabled', () => {
   const columns: Column<TestDataType>[] = [
     {
diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx
index cd008ab3e04..03fbdb5577b 100644
--- a/packages/itwinui-react/src/core/Table/Table.tsx
+++ b/packages/itwinui-react/src/core/Table/Table.tsx
@@ -717,7 +717,10 @@ export const Table = <
   // This is to avoid the old columnOrder from affecting the new columns' columnOrder
   React.useEffect(() => {
     // Check if columns have changed (by value)
-    if (JSON.stringify(lastPassedColumns.current) !== JSON.stringify(columns)) {
+    if (
+      lastPassedColumns.current.length > 0 &&
+      JSON.stringify(lastPassedColumns.current) !== JSON.stringify(columns)
+    ) {
       instance.setColumnOrder([]);
     }
     lastPassedColumns.current = columns;