diff --git a/resources/js/components/data-table.tsx b/resources/js/components/data-table.tsx
index 5795a6b..c211202 100644
--- a/resources/js/components/data-table.tsx
+++ b/resources/js/components/data-table.tsx
@@ -189,20 +189,42 @@ export function DataTable<TData, TValue>({
         300,
     );
 
-    const visibleColumns = isSortable
-        ? [
-              {
-                  id: 'drag',
-                  header: '',
-                  cell: () => <DragHandleTrigger />,
-                  meta: {
-                      className: 'w-[40px]',
-                      headerClassName: 'w-[40px]',
-                  },
-              } as ColumnDef<TData, TValue>,
-              ...columns,
-          ]
-        : columns;
+    const totalPages = pagination?.last_page ?? 1;
+    const currentPage = pagination?.current_page ?? 1;
+
+    const visibleColumns = [
+        {
+            id: 'no',
+            header: () => <span className="block text-center">No</span>,
+            cell: ({ row }) => (
+                <span className="block text-center">
+                    {isServerMode
+                        ? (currentPage - 1) * (pagination?.per_page ?? 25) +
+                          row.index +
+                          1
+                        : row.index + 1}
+                </span>
+            ),
+            meta: {
+                className: 'w-[50px] text-center',
+                headerClassName: 'w-[50px] text-center',
+            },
+        } as ColumnDef<TData, TValue>,
+        ...(isSortable
+            ? [
+                  {
+                      id: 'drag',
+                      header: '',
+                      cell: () => <DragHandleTrigger />,
+                      meta: {
+                          className: 'w-[40px]',
+                          headerClassName: 'w-[40px]',
+                      },
+                  } as ColumnDef<TData, TValue>,
+              ]
+            : []),
+        ...columns,
+    ];
 
     const sensors = useSensors(
         useSensor(PointerSensor, {
@@ -256,9 +278,6 @@ export function DataTable<TData, TValue>({
         }
     }
 
-    const totalPages = pagination?.last_page ?? 1;
-    const currentPage = pagination?.current_page ?? 1;
-
     return (
         <>
             {(searchKey || toolbar || isServerMode) && (
diff --git a/resources/js/pages/admin/finance/cash-account/columns.tsx b/resources/js/pages/admin/finance/cash-account/columns.tsx
index 8d878d5..2d04802 100644
--- a/resources/js/pages/admin/finance/cash-account/columns.tsx
+++ b/resources/js/pages/admin/finance/cash-account/columns.tsx
@@ -26,17 +26,6 @@ export function createCashAccountColumns(
     const { handleEdit, handleDeleteClick } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'name',
             header: () => <span>Nama</span>,
diff --git a/resources/js/pages/admin/finance/cash-account/transaction-columns.tsx b/resources/js/pages/admin/finance/cash-account/transaction-columns.tsx
index 8591151..9cba56d 100644
--- a/resources/js/pages/admin/finance/cash-account/transaction-columns.tsx
+++ b/resources/js/pages/admin/finance/cash-account/transaction-columns.tsx
@@ -105,17 +105,6 @@ export function createTransactionColumns(
     const { handleEdit, handleDeleteClick } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'created_at',
             header: () => <span>Tanggal</span>,
diff --git a/resources/js/pages/admin/finance/employee-advance/columns.tsx b/resources/js/pages/admin/finance/employee-advance/columns.tsx
index a0c015e..557cc04 100644
--- a/resources/js/pages/admin/finance/employee-advance/columns.tsx
+++ b/resources/js/pages/admin/finance/employee-advance/columns.tsx
@@ -100,17 +100,6 @@ export function createEmployeeAdvanceColumns(
     const { handleEdit, handleDeleteClick, handleApprove, handlePay } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'created_at',
             header: () => <span>Tanggal</span>,
diff --git a/resources/js/pages/admin/finance/expense/columns.tsx b/resources/js/pages/admin/finance/expense/columns.tsx
index 53e0917..bf786e4 100644
--- a/resources/js/pages/admin/finance/expense/columns.tsx
+++ b/resources/js/pages/admin/finance/expense/columns.tsx
@@ -78,17 +78,6 @@ export function createExpenseColumns(
     const { handleEdit, handleDeleteClick } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'created_at',
             header: () => <span>Tanggal</span>,
diff --git a/resources/js/pages/admin/finance/payroll-period/columns.tsx b/resources/js/pages/admin/finance/payroll-period/columns.tsx
index 20b832b..dc108f1 100644
--- a/resources/js/pages/admin/finance/payroll-period/columns.tsx
+++ b/resources/js/pages/admin/finance/payroll-period/columns.tsx
@@ -79,17 +79,6 @@ export function createPayrollPeriodColumns(
     const { showUrl, handleClose, handleReopen } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'year',
             header: () => <span>Periode</span>,
diff --git a/resources/js/pages/admin/finance/payroll-period/show-columns.tsx b/resources/js/pages/admin/finance/payroll-period/show-columns.tsx
index 2cf34d8..17c4c36 100644
--- a/resources/js/pages/admin/finance/payroll-period/show-columns.tsx
+++ b/resources/js/pages/admin/finance/payroll-period/show-columns.tsx
@@ -82,17 +82,6 @@ export function createPayrollColumns(
     } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             id: 'employee_name',
             header: () => <span>Nama Karyawan</span>,
diff --git a/resources/js/pages/admin/hr/employee/columns.tsx b/resources/js/pages/admin/hr/employee/columns.tsx
index e3e81fb..202479e 100644
--- a/resources/js/pages/admin/hr/employee/columns.tsx
+++ b/resources/js/pages/admin/hr/employee/columns.tsx
@@ -64,17 +64,6 @@ export function createEmployeeColumns(
     } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'user_profile.full_name',
             id: 'full_name',
diff --git a/resources/js/pages/admin/hr/leave-request/columns.tsx b/resources/js/pages/admin/hr/leave-request/columns.tsx
index 718b3ab..4530347 100644
--- a/resources/js/pages/admin/hr/leave-request/columns.tsx
+++ b/resources/js/pages/admin/hr/leave-request/columns.tsx
@@ -78,17 +78,6 @@ export function createLeaveRequestColumns(
         params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             id: 'employee_name',
             header: () => <span>Oleh</span>,
diff --git a/resources/js/pages/admin/master/category/columns.tsx b/resources/js/pages/admin/master/category/columns.tsx
index 8c68c65..4277fa0 100644
--- a/resources/js/pages/admin/master/category/columns.tsx
+++ b/resources/js/pages/admin/master/category/columns.tsx
@@ -24,17 +24,6 @@ export function createCategoryColumns(
     const { handleEdit, handleDeleteClick } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'name',
             header: () => <span>Nama</span>,
diff --git a/resources/js/pages/admin/master/customer/columns.tsx b/resources/js/pages/admin/master/customer/columns.tsx
index 3dc2a1c..37e85a9 100644
--- a/resources/js/pages/admin/master/customer/columns.tsx
+++ b/resources/js/pages/admin/master/customer/columns.tsx
@@ -26,17 +26,6 @@ export function createCustomerColumns(
     const { handleEdit, handleDeleteClick } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'name',
             header: () => <span>Nama</span>,
diff --git a/resources/js/pages/admin/master/product/columns.tsx b/resources/js/pages/admin/master/product/columns.tsx
index c38045c..130629d 100644
--- a/resources/js/pages/admin/master/product/columns.tsx
+++ b/resources/js/pages/admin/master/product/columns.tsx
@@ -143,17 +143,6 @@ export function createProductColumns(
                 headerClassName: 'hidden',
             },
         },
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'name',
             header: () => <span>Nama Produk</span>,
diff --git a/resources/js/pages/admin/master/supplier/columns.tsx b/resources/js/pages/admin/master/supplier/columns.tsx
index ae9c051..ddb16e7 100644
--- a/resources/js/pages/admin/master/supplier/columns.tsx
+++ b/resources/js/pages/admin/master/supplier/columns.tsx
@@ -26,17 +26,6 @@ export function createSupplierColumns(
     const { handleEdit, handleDeleteClick } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'name',
             header: () => <span>Nama</span>,
diff --git a/resources/js/pages/admin/roles/columns.tsx b/resources/js/pages/admin/roles/columns.tsx
index 4d6e9ed..a2d3d86 100644
--- a/resources/js/pages/admin/roles/columns.tsx
+++ b/resources/js/pages/admin/roles/columns.tsx
@@ -25,17 +25,6 @@ export function createRoleColumns(
     const { handleEdit, handleDeleteClick } = params;
 
     return [
-        {
-            id: 'no',
-            header: () => <span className="block text-center">No</span>,
-            cell: ({ row }) => (
-                <span className="block text-center">{row.index + 1}</span>
-            ),
-            meta: {
-                className: 'w-[50px] text-center',
-                headerClassName: 'w-[50px] text-center',
-            },
-        },
         {
             accessorKey: 'name',
             header: () => <span>Nama Role</span>,