From b695eeba9aa90c91da1d99a1b3f68674869d8573 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Wed, 10 Jun 2026 02:08:06 +0700
Subject: [PATCH] Enhance DataTable component by adding a row number column
 with specific styling and size. Update header and cell rendering to apply
 conditional classes for the row number column, improving the overall table
 layout and readability.

---
 resources/js/components/data-table/DataTable.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

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>