dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Yoga Pangestu 2026-06-10 02:08:06 +07:00
parent 432bbd110a
commit b695eeba9a
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
resources/js/components/data-table/DataTable.vue
View File

@ -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>