diff --git a/resources/js/components/data-table/DataTable.vue b/resources/js/components/data-table/DataTable.vue
index 6e46d68..c0687d4 100644
--- a/resources/js/components/data-table/DataTable.vue
+++ b/resources/js/components/data-table/DataTable.vue
@@ -49,9 +49,12 @@ const emit = defineEmits<{
     'filters-reset': [];
 }>();
 
+const ROW_NUMBER_COLUMN_CLASS = 'w-12 max-w-12 shrink-0 text-center';
+
 const rowNumberColumn: ColumnDef<TData> = {
     id: '_row_number',
     header: 'No.',
+    size: 48,
     enableSorting: false,
     enableHiding: false,
     cell: ({ row }) => {
@@ -126,7 +129,11 @@ const paginationSummary = computed(() => {
             <Table>
                 <TableHeader>
                     <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
-                        <TableHead v-for="header in headerGroup.headers" :key="header.id">
+                        <TableHead
+                            v-for="header in headerGroup.headers"
+                            :key="header.id"
+                            :class="header.column.id === '_row_number' ? ROW_NUMBER_COLUMN_CLASS : undefined"
+                        >
                             <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header"
                                 :props="header.getContext()" />
                         </TableHead>
@@ -136,7 +143,11 @@ const paginationSummary = computed(() => {
                     <template v-if="table.getRowModel().rows.length">
                         <TableRow v-for="row in table.getRowModel().rows" :key="row.id"
                             :data-state="row.getIsSelected() ? 'selected' : undefined">
-                            <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
+                            <TableCell
+                                v-for="cell in row.getVisibleCells()"
+                                :key="cell.id"
+                                :class="cell.column.id === '_row_number' ? ROW_NUMBER_COLUMN_CLASS : undefined"
+                            >
                                 <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
                             </TableCell>
                         </TableRow>