From 412618bfb5e58fe5524d2029ff8edb50dbeba23e Mon Sep 17 00:00:00 2001
From: Jacob Wallraff <thyeggman@github.com>
Date: Mon, 13 Nov 2023 11:21:09 -0800
Subject: [PATCH] Move `DataTable` header creation to before updating sort
 order (#3924)

* Move header creation before sort order determination

* Create slimy-foxes-wash.md

---------

Co-authored-by: Josh Black <joshblack@github.com>
---
 .changeset/slimy-foxes-wash.md |  5 +++++
 src/DataTable/useTable.ts      | 18 +++++++++---------
 2 files changed, 14 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/slimy-foxes-wash.md

diff --git a/.changeset/slimy-foxes-wash.md b/.changeset/slimy-foxes-wash.md
new file mode 100644
index 000000000000..1f6da28c4d1c
--- /dev/null
+++ b/.changeset/slimy-foxes-wash.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fix issue in DataTable so that sort order is determined after column headers are created
diff --git a/src/DataTable/useTable.ts b/src/DataTable/useTable.ts
index c9a6b874cc1f..5d4a5ec2c626 100644
--- a/src/DataTable/useTable.ts
+++ b/src/DataTable/useTable.ts
@@ -71,15 +71,6 @@ export function useTable<Data extends UniqueRow>({
     }
   }
 
-  // Update the row order and apply the current sort column to the incoming data
-  if (data !== prevData) {
-    setPrevData(data)
-    setRowOrder(data)
-    if (sortByColumn) {
-      sortRows(sortByColumn)
-    }
-  }
-
   const headers = columns.map(column => {
     const id = column.id ?? column.field
     if (id === undefined) {
@@ -102,6 +93,15 @@ export function useTable<Data extends UniqueRow>({
     }
   })
 
+  // Update the row order and apply the current sort column to the incoming data
+  if (data !== prevData) {
+    setPrevData(data)
+    setRowOrder(data)
+    if (sortByColumn) {
+      sortRows(sortByColumn)
+    }
+  }
+
   /**
    * Sort the input row data by the given header
    */