From 4b83966a243a09896efbfb9acc1687df6d9d55b9 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 9 Jan 2026 05:05:34 +0000
Subject: [PATCH 1/4] Initial plan


From 75bd20a79dc11b31538f2cdbca315966d60ba2dd Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 9 Jan 2026 05:11:54 +0000
Subject: [PATCH 2/4] Add sorting functionality to GridView component with
 column header indicators

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 packages/ui/examples/airtable-example.tsx    |  45 +++-
 packages/ui/src/components/grid/GridView.tsx | 203 ++++++++++++++++---
 2 files changed, 211 insertions(+), 37 deletions(-)

diff --git a/packages/ui/examples/airtable-example.tsx b/packages/ui/examples/airtable-example.tsx
index e45aa5fd..c350930c 100644
--- a/packages/ui/examples/airtable-example.tsx
+++ b/packages/ui/examples/airtable-example.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import { GridView } from "../components/grid/GridView"
+import { GridView, SortConfig } from "../components/grid/GridView"
 import { Toolbar, ViewSwitcher, ToolbarIcons } from "../components/Toolbar"
 import { Button } from "../components/Button"
 import { Badge } from "../components/Badge"
@@ -119,6 +119,7 @@ export function AirtableExample() {
   const [data, setData] = React.useState(sampleData)
   const [activeView, setActiveView] = React.useState('grid')
   const [showCreateModal, setShowCreateModal] = React.useState(false)
+  const [sorts, setSorts] = React.useState<SortConfig[]>([])
 
   const handleCellEdit = (rowIndex: number, columnId: string, value: any) => {
     const newData = [...data]
@@ -141,6 +142,19 @@ export function AirtableExample() {
     setShowCreateModal(false)
   }
 
+  const handleSortChange = (newSorts: SortConfig[]) => {
+    setSorts(newSorts)
+    console.log('Sorts changed:', newSorts)
+  }
+
+  const getSortDescription = () => {
+    if (sorts.length === 0) return 'No sorting applied'
+    return sorts.map((s, i) => {
+      const column = sampleColumns.find(c => c.id === s.columnId)
+      return `${i + 1}. ${column?.label} (${s.direction === 'asc' ? '↑' : '↓'})`
+    }).join(', ')
+  }
+
   const views = [
     { id: 'grid', label: 'Grid', icon: <ToolbarIcons.Grid /> },
     { id: 'list', label: 'List', icon: <ToolbarIcons.List /> },
@@ -166,10 +180,11 @@ export function AirtableExample() {
         </Button>
         <Button
           variant="secondary"
-          onClick={() => alert('Sort functionality')}
+          onClick={() => alert(getSortDescription())}
+          title={getSortDescription()}
         >
           <ToolbarIcons.Sort />
-          <span className="ml-2">Sort</span>
+          <span className="ml-2">Sort {sorts.length > 0 && `(${sorts.length})`}</span>
         </Button>
         <Button onClick={() => setShowCreateModal(true)}>
           <ToolbarIcons.Plus />
@@ -179,13 +194,23 @@ export function AirtableExample() {
 
       <div className="flex-1 overflow-auto p-6">
         {activeView === 'grid' ? (
-          <GridView
-            columns={sampleColumns}
-            data={data}
-            onCellEdit={handleCellEdit}
-            onDelete={handleDelete}
-            emptyMessage="No projects found. Create one to get started!"
-          />
+          <div className="space-y-3">
+            {sorts.length > 0 && (
+              <div className="bg-blue-50 border border-blue-200 rounded-lg px-4 py-2 text-sm text-blue-900">
+                <strong>Active sorts:</strong> {getSortDescription()}
+                <span className="ml-2 text-xs text-blue-700">(Click column headers to sort, Shift+Click for multi-column)</span>
+              </div>
+            )}
+            <GridView
+              columns={sampleColumns}
+              data={data}
+              onCellEdit={handleCellEdit}
+              onDelete={handleDelete}
+              onSortChange={handleSortChange}
+              enableSorting={true}
+              emptyMessage="No projects found. Create one to get started!"
+            />
+          </div>
         ) : (
           <div className="bg-white rounded-lg border border-stone-200 p-8 text-center text-stone-500">
             <p>List view coming soon...</p>
diff --git a/packages/ui/src/components/grid/GridView.tsx b/packages/ui/src/components/grid/GridView.tsx
index 4bb2c838..8755b744 100644
--- a/packages/ui/src/components/grid/GridView.tsx
+++ b/packages/ui/src/components/grid/GridView.tsx
@@ -3,7 +3,7 @@ import { cn } from "../../lib/utils"
 import { Button } from "../Button"
 import { Badge } from "../Badge"
 import { Checkbox } from "../Checkbox"
-import { Copy, Trash2, GripVertical } from "lucide-react"
+import { Copy, Trash2, GripVertical, ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react"
 
 interface Column {
   id: string
@@ -11,9 +11,15 @@ interface Column {
   type?: 'text' | 'number' | 'date' | 'select' | 'badge' | 'boolean'
   width?: number | string
   editable?: boolean
+  sortable?: boolean
   options?: Array<{ value: string; label: string; variant?: 'default' | 'success' | 'warning' | 'danger' | 'info' }>
 }
 
+interface SortConfig {
+  columnId: string
+  direction: 'asc' | 'desc'
+}
+
 interface GridViewProps {
   columns: Column[]
   data: any[]
@@ -33,6 +39,9 @@ interface GridViewProps {
   // Drag & Drop for column reordering
   enableColumnDragDrop?: boolean
   onColumnReorder?: (columns: Column[]) => void
+  // Sorting
+  enableSorting?: boolean
+  onSortChange?: (sorts: SortConfig[]) => void
 }
 
 export function GridView({
@@ -50,6 +59,8 @@ export function GridView({
   enableCopyPaste = false,
   enableColumnDragDrop = false,
   onColumnReorder,
+  enableSorting = true,
+  onSortChange,
 }: GridViewProps) {
   const [editingCell, setEditingCell] = React.useState<{ row: number; col: string } | null>(null)
   const [editValue, setEditValue] = React.useState<any>('')
@@ -57,14 +68,118 @@ export function GridView({
   const [columns, setColumns] = React.useState(initialColumns)
   const [draggedColumn, setDraggedColumn] = React.useState<number | null>(null)
   const [dragOverColumn, setDragOverColumn] = React.useState<number | null>(null)
+  const [sorts, setSorts] = React.useState<SortConfig[]>([])
 
   // Update columns when initialColumns change
   React.useEffect(() => {
     setColumns(initialColumns)
   }, [initialColumns])
 
+  // Notify parent of sort changes
+  React.useEffect(() => {
+    if (onSortChange) {
+      onSortChange(sorts)
+    }
+  }, [sorts, onSortChange])
+
+  // Handle column header click for sorting
+  const handleSort = (columnId: string, shiftKey: boolean) => {
+    if (!enableSorting) return
+
+    const column = columns.find(c => c.id === columnId)
+    if (column && column.sortable === false) return
+
+    setSorts(prevSorts => {
+      const existingIndex = prevSorts.findIndex(s => s.columnId === columnId)
+      
+      if (shiftKey) {
+        // Multi-column sorting with Shift+Click
+        if (existingIndex >= 0) {
+          // Toggle direction or remove
+          const existing = prevSorts[existingIndex]
+          if (existing.direction === 'asc') {
+            return prevSorts.map((s, i) => 
+              i === existingIndex ? { ...s, direction: 'desc' as const } : s
+            )
+          } else {
+            return prevSorts.filter((_, i) => i !== existingIndex)
+          }
+        } else {
+          // Add new sort
+          return [...prevSorts, { columnId, direction: 'asc' }]
+        }
+      } else {
+        // Single column sorting
+        if (existingIndex === 0 && prevSorts.length === 1) {
+          // Toggle direction or clear
+          const existing = prevSorts[0]
+          if (existing.direction === 'asc') {
+            return [{ columnId, direction: 'desc' }]
+          } else {
+            return []
+          }
+        } else {
+          // Replace all sorts with this one
+          return [{ columnId, direction: 'asc' }]
+        }
+      }
+    })
+  }
+
+  // Get sort info for a column
+  const getSortInfo = (columnId: string): { index: number; direction: 'asc' | 'desc' } | null => {
+    const index = sorts.findIndex(s => s.columnId === columnId)
+    if (index >= 0) {
+      return { index, direction: sorts[index].direction }
+    }
+    return null
+  }
+
+  // Sort data based on current sorts
+  const sortData = (dataToSort: any[]) => {
+    if (!enableSorting || sorts.length === 0) {
+      return dataToSort
+    }
+
+    return [...dataToSort].sort((a, b) => {
+      for (const sort of sorts) {
+        const column = columns.find(c => c.id === sort.columnId)
+        if (!column) continue
+
+        let aVal = a[sort.columnId]
+        let bVal = b[sort.columnId]
+
+        // Handle null/undefined
+        if (aVal == null && bVal == null) continue
+        if (aVal == null) return 1
+        if (bVal == null) return -1
+
+        // Type-specific comparison
+        let comparison = 0
+        if (column.type === 'number') {
+          comparison = Number(aVal) - Number(bVal)
+        } else if (column.type === 'date') {
+          comparison = new Date(aVal).getTime() - new Date(bVal).getTime()
+        } else if (column.type === 'boolean') {
+          comparison = (aVal ? 1 : 0) - (bVal ? 1 : 0)
+        } else {
+          // Text comparison
+          comparison = String(aVal).localeCompare(String(bVal))
+        }
+
+        if (comparison !== 0) {
+          return sort.direction === 'asc' ? comparison : -comparison
+        }
+      }
+      return 0
+    })
+  }
+
   // Group data if grouping is enabled and create index map for performance
   const { groupedData, rowIndexMap } = React.useMemo(() => {
+    // Sort data first
+    const sortedData = sortData(data)
+
     // Create a map for O(1) index lookups
     const indexMap = new Map<any, number>()
     data.forEach((row, index) => {
@@ -72,11 +187,11 @@ export function GridView({
     })
 
     if (!enableGrouping || !groupByColumn) {
-      return { groupedData: { ungrouped: data }, rowIndexMap: indexMap }
+      return { groupedData: { ungrouped: sortedData }, rowIndexMap: indexMap }
     }
     
     const groups: Record<string, any[]> = {}
-    data.forEach(row => {
+    sortedData.forEach(row => {
       const groupValue = row[groupByColumn] || 'Ungrouped'
       if (!groups[groupValue]) {
         groups[groupValue] = []
@@ -84,7 +199,7 @@ export function GridView({
       groups[groupValue].push(row)
     })
     return { groupedData: groups, rowIndexMap: indexMap }
-  }, [data, enableGrouping, groupByColumn])
+  }, [data, enableGrouping, groupByColumn, sorts, columns, enableSorting])
 
   const [expandedGroups, setExpandedGroups] = React.useState<Set<string>>(
     new Set(Object.keys(groupedData))
@@ -360,7 +475,7 @@ export function GridView({
       <div className="overflow-auto border border-stone-200 rounded-lg">
         <table className="w-full border-collapse">
           <thead>
-            <tr className="bg-stone-50 border-b border-stone-200">
+            <tr className="bg-stone-50 border-b border-stone-200 group">
               {enableRowSelection && (
                 <th className="px-4 py-3 w-12 border-r border-stone-200">
                   <Checkbox
@@ -369,29 +484,60 @@ export function GridView({
                   />
                 </th>
               )}
-              {columns.map((column, index) => (
-                <th
-                  key={column.id}
-                  style={{ width: column.width }}
-                  className={cn(
-                    "px-4 py-3 text-left text-xs font-semibold text-stone-600 uppercase tracking-wider border-r border-stone-200 last:border-r-0",
-                    enableColumnDragDrop && "cursor-move select-none",
-                    dragOverColumn === index && "bg-blue-100"
-                  )}
-                  draggable={enableColumnDragDrop}
-                  onDragStart={(e) => handleDragStart(e, index)}
-                  onDragOver={(e) => handleDragOver(e, index)}
-                  onDrop={(e) => handleDrop(e, index)}
-                  onDragEnd={handleDragEnd}
-                >
-                  <div className="flex items-center gap-1">
-                    {enableColumnDragDrop && (
-                      <GripVertical className="w-3 h-3 text-stone-400" />
+              {columns.map((column, index) => {
+                const sortInfo = getSortInfo(column.id)
+                const isSortable = enableSorting && column.sortable !== false
+                
+                return (
+                  <th
+                    key={column.id}
+                    style={{ width: column.width }}
+                    className={cn(
+                      "px-4 py-3 text-left text-xs font-semibold text-stone-600 uppercase tracking-wider border-r border-stone-200 last:border-r-0",
+                      enableColumnDragDrop && "cursor-move select-none",
+                      isSortable && !enableColumnDragDrop && "cursor-pointer hover:bg-stone-100",
+                      dragOverColumn === index && "bg-blue-100"
                     )}
-                    {column.label}
-                  </div>
-                </th>
-              ))}
+                    draggable={enableColumnDragDrop}
+                    onDragStart={(e) => handleDragStart(e, index)}
+                    onDragOver={(e) => handleDragOver(e, index)}
+                    onDrop={(e) => handleDrop(e, index)}
+                    onDragEnd={handleDragEnd}
+                    onClick={(e) => {
+                      if (isSortable && !enableColumnDragDrop) {
+                        handleSort(column.id, e.shiftKey)
+                      }
+                    }}
+                  >
+                    <div className="flex items-center gap-1.5">
+                      {enableColumnDragDrop && (
+                        <GripVertical className="w-3 h-3 text-stone-400" />
+                      )}
+                      <span className="flex-1">{column.label}</span>
+                      {isSortable && (
+                        <div className="flex items-center">
+                          {sortInfo ? (
+                            <div className="flex items-center gap-0.5">
+                              {sortInfo.direction === 'asc' ? (
+                                <ArrowUp className="w-3.5 h-3.5 text-blue-600" />
+                              ) : (
+                                <ArrowDown className="w-3.5 h-3.5 text-blue-600" />
+                              )}
+                              {sorts.length > 1 && (
+                                <span className="text-[10px] font-bold text-blue-600 ml-0.5">
+                                  {sortInfo.index + 1}
+                                </span>
+                              )}
+                            </div>
+                          ) : (
+                            <ArrowUpDown className="w-3.5 h-3.5 text-stone-400 opacity-0 group-hover:opacity-100" />
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </th>
+                )
+              })}
               {onDelete && (
                 <th className="px-4 py-3 text-right text-xs font-semibold text-stone-600 uppercase tracking-wider w-20">
                   Actions
@@ -552,3 +698,6 @@ export function GridView({
     </div>
   )
 }
+
+// Export types for external use
+export type { SortConfig, Column }

From 123cf05d89ec0199ea82ffd79db6c2899cd547ae Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 9 Jan 2026 05:13:32 +0000
Subject: [PATCH 3/4] Add comprehensive documentation for sorting feature

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 packages/ui/ADVANCED_TABLE_FEATURES.md | 102 ++++++++++++++++++++++---
 packages/ui/AIRTABLE_GUIDE.md          |  73 ++++++++++++++++++
 2 files changed, 165 insertions(+), 10 deletions(-)

diff --git a/packages/ui/ADVANCED_TABLE_FEATURES.md b/packages/ui/ADVANCED_TABLE_FEATURES.md
index db5acfd2..49eb7864 100644
--- a/packages/ui/ADVANCED_TABLE_FEATURES.md
+++ b/packages/ui/ADVANCED_TABLE_FEATURES.md
@@ -8,15 +8,97 @@ This document describes the advanced features implementation in ObjectQL UI tabl
 
 ### ✅ 已实现的功能 (Implemented Features)
 
-1. **Grouping (分组)** - 按列分组数据显示
-2. **Inline Editing (内联编辑)** - Grid 中直接编辑单元格
-3. **Bulk Operations (批量操作)** - 批量删除、批量更新
-4. **Copy/Paste (复制粘贴)** - 复制选中行到剪贴板
-5. **Drag & Drop (拖拽排序)** - 字段拖拽排序
+1. **Sorting (排序)** - 单列和多列排序
+2. **Grouping (分组)** - 按列分组数据显示
+3. **Inline Editing (内联编辑)** - Grid 中直接编辑单元格
+4. **Bulk Operations (批量操作)** - 批量删除、批量更新
+5. **Copy/Paste (复制粘贴)** - 复制选中行到剪贴板
+6. **Drag & Drop (拖拽排序)** - 字段拖拽排序
 
 ---
 
-## 1. Grouping (分组)
+## 1. Sorting (排序)
+
+### 功能描述 (Feature Description)
+
+行排序功能允许用户对表格数据按一个或多个列进行排序，类似 Airtable 的排序体验。
+
+The row sorting feature allows users to sort table data by one or multiple columns, similar to Airtable's sorting experience.
+
+### 使用方法 (Usage)
+
+#### GridView 组件
+
+```tsx
+import { GridView, SortConfig } from '@objectql/ui'
+
+function MyComponent() {
+  const [sorts, setSorts] = useState<SortConfig[]>([])
+
+  return (
+    <GridView
+      columns={columns}
+      data={data}
+      enableSorting={true}
+      onSortChange={(newSorts) => setSorts(newSorts)}
+    />
+  )
+}
+```
+
+### 特性 (Features)
+
+- ✅ 单列排序：点击列标题排序
+- ✅ 多列排序：Shift + 点击添加多个排序级别
+- ✅ 排序指示器：显示排序方向 (↑ 升序 / ↓ 降序)
+- ✅ 排序优先级：多列排序时显示优先级数字 (1, 2, 3...)
+- ✅ 智能排序：根据数据类型自动选择排序算法
+- ✅ 可配置：可以禁用特定列的排序
+
+### 排序行为 (Sorting Behavior)
+
+**单列排序 (Single Column Sort):**
+1. 第一次点击：升序 (A→Z, 0→9, 旧→新)
+2. 第二次点击：降序 (Z→A, 9→0, 新→旧)
+3. 第三次点击：清除排序
+
+**多列排序 (Multi-Column Sort):**
+1. 按住 Shift 键点击列标题
+2. 可添加多个排序级别
+3. 先按第一个排序字段，再按第二个，以此类推
+
+**数据类型排序 (Data Type Sorting):**
+- `text`: 不区分大小写的字母排序
+- `number`: 数值比较
+- `date`: 按时间顺序
+- `boolean`: false 在前，true 在后
+- `null/undefined`: 始终排在最后
+
+### API
+
+**SortConfig 类型:**
+
+```typescript
+interface SortConfig {
+  columnId: string
+  direction: 'asc' | 'desc'
+}
+```
+
+**Column 属性:**
+
+```typescript
+interface Column {
+  id: string
+  label: string
+  sortable?: boolean  // 默认 true，设为 false 可禁用该列排序
+  // ... 其他属性
+}
+```
+
+---
+
+## 2. Grouping (分组)
 
 ### 功能描述 (Feature Description)
 
@@ -62,7 +144,7 @@ import { DataTable } from '@objectql/ui'
 
 ---
 
-## 2. Inline Editing (内联编辑)
+## 3. Inline Editing (内联编辑)
 
 ### 功能描述 (Feature Description)
 
@@ -122,7 +204,7 @@ const columns = [
 
 ---
 
-## 3. Bulk Operations (批量操作)
+## 4. Bulk Operations (批量操作)
 
 ### 功能描述 (Feature Description)
 
@@ -189,7 +271,7 @@ When rows are selected, a bulk actions toolbar appears with:
 
 ---
 
-## 4. Copy/Paste (复制粘贴)
+## 5. Copy/Paste (复制粘贴)
 
 ### 功能描述 (Feature Description)
 
@@ -233,7 +315,7 @@ Mobile App Development	Engineering	active	high
 
 ---
 
-## 5. Drag & Drop (拖拽排序)
+## 6. Drag & Drop (拖拽排序)
 
 ### 功能描述 (Feature Description)
 
diff --git a/packages/ui/AIRTABLE_GUIDE.md b/packages/ui/AIRTABLE_GUIDE.md
index 5beedd3a..98d26461 100644
--- a/packages/ui/AIRTABLE_GUIDE.md
+++ b/packages/ui/AIRTABLE_GUIDE.md
@@ -65,6 +65,12 @@ const columns = [
 - `onRowClick`: Callback when row is clicked (optional)
 - `onDelete`: Callback for delete action (optional)
 - `emptyMessage`: Message shown when no data (optional)
+- `enableSorting`: Enable sorting on column headers (default: true)
+- `onSortChange`: Callback when sort configuration changes (optional)
+- `enableRowSelection`: Enable row selection checkboxes (optional)
+- `enableGrouping`: Enable grouping by column (optional)
+- `enableCopyPaste`: Enable copy/paste functionality (optional)
+- `enableColumnDragDrop`: Enable column reordering via drag & drop (optional)
 
 **Column Types:**
 - `text`: Plain text (editable)
@@ -74,6 +80,73 @@ const columns = [
 - `badge`: Status badges with colors
 - `boolean`: Checkbox
 
+**Column Properties:**
+- `id`: Unique column identifier (required)
+- `label`: Column header label (required)
+- `type`: Column data type (optional)
+- `width`: Column width in pixels or string (optional)
+- `editable`: Enable inline editing for this column (optional)
+- `sortable`: Enable/disable sorting for this column (default: true when enableSorting is true)
+- `options`: Options for badge/select types (optional)
+
+### Sorting
+
+GridView supports single and multi-column sorting similar to Airtable:
+
+**Single Column Sorting:**
+- Click on a column header to sort ascending
+- Click again to sort descending
+- Click a third time to remove sorting
+
+**Multi-Column Sorting:**
+- Hold Shift and click column headers to add additional sort levels
+- Each sorted column shows its sort direction (↑ for ascending, ↓ for descending)
+- Multi-column sorts show sort priority numbers (1, 2, 3, etc.)
+
+**Example:**
+
+```tsx
+import { GridView, SortConfig } from '@objectql/ui'
+
+function MyComponent() {
+  const [sorts, setSorts] = useState<SortConfig[]>([])
+
+  const handleSortChange = (newSorts: SortConfig[]) => {
+    setSorts(newSorts)
+    console.log('Active sorts:', newSorts)
+    // Example output: [
+    //   { columnId: 'priority', direction: 'desc' },
+    //   { columnId: 'name', direction: 'asc' }
+    // ]
+  }
+
+  return (
+    <GridView
+      columns={columns}
+      data={data}
+      enableSorting={true}
+      onSortChange={handleSortChange}
+    />
+  )
+}
+```
+
+**Disabling Sorting for Specific Columns:**
+
+```tsx
+const columns = [
+  { id: 'name', label: 'Name', sortable: true },
+  { id: 'actions', label: 'Actions', sortable: false }, // No sorting for this column
+]
+```
+
+**Sorting Behavior:**
+- Text fields: Case-insensitive alphabetical sorting
+- Number fields: Numeric comparison
+- Date fields: Chronological sorting
+- Boolean fields: false before true
+- Null/undefined values: Always sorted to the end
+
 ### Toolbar & ViewSwitcher
 
 Toolbar provides a consistent header for your views with title, actions, and view switching.

From 38449b9a97ea6bdc6a710ddc0ba978847e053856 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 9 Jan 2026 05:15:50 +0000
Subject: [PATCH 4/4] Fix code review issues: case-insensitive sorting and
 optimize dependencies

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 packages/ui/src/components/grid/GridView.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/grid/GridView.tsx b/packages/ui/src/components/grid/GridView.tsx
index 8755b744..c70ee2f2 100644
--- a/packages/ui/src/components/grid/GridView.tsx
+++ b/packages/ui/src/components/grid/GridView.tsx
@@ -163,8 +163,8 @@ export function GridView({
         } else if (column.type === 'boolean') {
           comparison = (aVal ? 1 : 0) - (bVal ? 1 : 0)
         } else {
-          // Text comparison
-          comparison = String(aVal).localeCompare(String(bVal))
+          // Text comparison (case-insensitive)
+          comparison = String(aVal).localeCompare(String(bVal), undefined, { sensitivity: 'base' })
         }
 
         if (comparison !== 0) {
@@ -199,7 +199,8 @@ export function GridView({
       groups[groupValue].push(row)
     })
     return { groupedData: groups, rowIndexMap: indexMap }
-  }, [data, enableGrouping, groupByColumn, sorts, columns, enableSorting])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, enableGrouping, groupByColumn, sorts, enableSorting])
 
   const [expandedGroups, setExpandedGroups] = React.useState<Set<string>>(
     new Set(Object.keys(groupedData))