diff --git a/frontend/after_sort.png b/frontend/after_sort.png
new file mode 100644
index 00000000..c7c82156
Binary files /dev/null and b/frontend/after_sort.png differ
diff --git a/frontend/before_sort.png b/frontend/before_sort.png
new file mode 100644
index 00000000..933d76bb
Binary files /dev/null and b/frontend/before_sort.png differ
diff --git a/frontend/src/shared/ui/components/KsDataGrid.vue b/frontend/src/shared/ui/components/KsDataGrid.vue
index 7e1e2d2c..5483e7c9 100644
--- a/frontend/src/shared/ui/components/KsDataGrid.vue
+++ b/frontend/src/shared/ui/components/KsDataGrid.vue
@@ -23,7 +23,8 @@ const columnDefs = computed<ColDef[]>(() => {
   if (props.showRowNumber) {
     const rowNumCol: ColDef = {
       headerName: 'No.',
-      valueGetter: params => (params.node?.rowIndex !== null && params.node?.rowIndex !== undefined) ? params.node.rowIndex + 1 : '',
+      valueGetter: 'node.rowIndex + 1',
+      colId: 'rowNum',
       width: 54,
       minWidth: 50,
       maxWidth: 65,
@@ -43,6 +44,9 @@ const rowSelectionOptions = computed(() => props.rowSelection === 'none' ? undef
 function onRowClicked(event: RowClickedEvent): void {
   if (event.data) emit('rowSelected', event.data)
 }
+function onSortChanged(params: { api: { redrawRows: () => void; refreshCells: (options: { force: boolean }) => void } }): void {
+  params.api.redrawRows()
+}
 function onGridReady(params: { api: { sizeColumnsToFit: () => void } }): void {
   params.api.sizeColumnsToFit()
 }
@@ -60,6 +64,7 @@ function onGridReady(params: { api: { sizeColumnsToFit: () => void } }): void {
       :suppress-no-rows-overlay="props.rows.length > 0"
       @grid-ready="onGridReady"
       @first-data-rendered="onGridReady"
+      @sort-changed="onSortChanged"
       @row-clicked="onRowClicked"
     />
   </div>