From 9cc83958482968f8fe157bc9ac196a3576fa2fac Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sun, 30 Aug 2026 21:02:36 +0700
Subject: [PATCH] feat: enhance table styling with background color and text
 color adjustments

---
 resources/js/components/data-table.tsx | 972 ++++++++++++-------------
 resources/js/components/ui/table.tsx   |   4 +-
 2 files changed, 488 insertions(+), 488 deletions(-)

diff --git a/resources/js/components/data-table.tsx b/resources/js/components/data-table.tsx
index 3f7863f..fcea6e3 100644
--- a/resources/js/components/data-table.tsx
+++ b/resources/js/components/data-table.tsx
@@ -1,30 +1,30 @@
 import type { DragEndEvent } from '@dnd-kit/core';
 import {
-  DndContext,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
+    DndContext,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors,
 } from '@dnd-kit/core';
 import {
-  SortableContext,
-  useSortable,
-  verticalListSortingStrategy,
+    SortableContext,
+    useSortable,
+    verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import type { ColumnDef, ExpandedState, Row } from '@tanstack/react-table';
 import {
-  flexRender,
-  getCoreRowModel,
-  getExpandedRowModel,
-  useReactTable,
+    flexRender,
+    getCoreRowModel,
+    getExpandedRowModel,
+    useReactTable,
 } from '@tanstack/react-table';
 import {
-  ChevronLeft,
-  ChevronRight,
-  ChevronsLeft,
-  ChevronsRight,
-  GripVertical,
+    ChevronLeft,
+    ChevronRight,
+    ChevronsLeft,
+    ChevronsRight,
+    GripVertical,
 } from 'lucide-react';
 import * as React from 'react';
 
@@ -32,528 +32,528 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
 } from '@/components/ui/select';
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
 } from '@/components/ui/table';
 
 export interface PaginationState {
-  current_page: number;
-  last_page: number;
-  per_page: number;
-  total: number;
+    current_page: number;
+    last_page: number;
+    per_page: number;
+    total: number;
 }
 
 interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[];
-  data: TData[];
-  searchKey?: string;
-  searchPlaceholder?: string;
-  emptyText?: string;
-  onReorder?: (items: TData[]) => void;
-  getRowId?: (item: TData) => string | number;
-  toolbar?: React.ReactNode;
-  renderSubRow?: (row: Row<TData>, searchValue?: string) => React.ReactNode;
-  defaultExpanded?: boolean;
-  pagination?: PaginationState;
-  onPageChange?: (page: number) => void;
-  onPerPageChange?: (perPage: number) => void;
-  onSearchChange?: (search: string) => void;
-  searchValue?: string;
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    searchKey?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    onReorder?: (items: TData[]) => void;
+    getRowId?: (item: TData) => string | number;
+    toolbar?: React.ReactNode;
+    renderSubRow?: (row: Row<TData>, searchValue?: string) => React.ReactNode;
+    defaultExpanded?: boolean;
+    pagination?: PaginationState;
+    onPageChange?: (page: number) => void;
+    onPerPageChange?: (perPage: number) => void;
+    onSearchChange?: (search: string) => void;
+    searchValue?: string;
 }
 
 const DragHandleContext = React.createContext<{
-  listeners?: Record<string, unknown>;
-  attributes?: Record<string, string>;
+    listeners?: Record<string, unknown>;
+    attributes?: Record<string, string>;
 }>({});
 
 export function DragHandleTrigger() {
-  const { listeners, attributes } = React.useContext(DragHandleContext);
+    const { listeners, attributes } = React.useContext(DragHandleContext);
 
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      className="-ml-2 cursor-grab active:cursor-grabbing"
-      {...listeners}
-      {...attributes}
-    >
-      <GripVertical className="h-4 w-4 text-muted-foreground" />
-    </Button>
-  );
+    return (
+        <Button
+            variant="ghost"
+            size="icon"
+            className="-ml-2 cursor-grab active:cursor-grabbing"
+            {...listeners}
+            {...attributes}
+        >
+            <GripVertical className="h-4 w-4 text-muted-foreground" />
+        </Button>
+    );
 }
 
 function SortableTableRow({
-  id,
-  children,
+    id,
+    children,
 }: {
-  id: string;
-  children: React.ReactNode;
+    id: string;
+    children: React.ReactNode;
 }) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id });
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging,
+    } = useSortable({ id });
 
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.4 : undefined,
-  };
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.4 : undefined,
+    };
 
-  return (
-    <DragHandleContext.Provider value={{ listeners, attributes }}>
-      <TableRow
-        ref={setNodeRef}
-        style={style}
-        data-state={isDragging ? 'dragging' : undefined}
-      >
-        {children}
-      </TableRow>
-    </DragHandleContext.Provider>
-  );
+    return (
+        <DragHandleContext.Provider value={{ listeners, attributes }}>
+            <TableRow
+                ref={setNodeRef}
+                style={style}
+                data-state={isDragging ? 'dragging' : undefined}
+            >
+                {children}
+            </TableRow>
+        </DragHandleContext.Provider>
+    );
 }
 
 function useDebounce(callback: (value: string) => void, delay: number) {
-  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+    const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  return React.useCallback(
-    (value: string) => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
+    return React.useCallback(
+        (value: string) => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
 
-      timeoutRef.current = setTimeout(() => {
-        callback(value);
-      }, delay);
-    },
-    [callback, delay],
-  );
+            timeoutRef.current = setTimeout(() => {
+                callback(value);
+            }, delay);
+        },
+        [callback, delay],
+    );
 }
 
 export function DataTable<TData, TValue>({
-  columns,
-  data,
-  searchKey,
-  searchPlaceholder = 'Ketikkan sesuatu...',
-  emptyText = 'Tidak ada data.',
-  onReorder,
-  getRowId,
-  toolbar,
-  renderSubRow,
-  defaultExpanded = false,
-  pagination,
-  onPageChange,
-  onPerPageChange,
-  onSearchChange,
-  searchValue,
+    columns,
+    data,
+    searchKey,
+    searchPlaceholder = 'Ketikkan sesuatu...',
+    emptyText = 'Tidak ada data.',
+    onReorder,
+    getRowId,
+    toolbar,
+    renderSubRow,
+    defaultExpanded = false,
+    pagination,
+    onPageChange,
+    onPerPageChange,
+    onSearchChange,
+    searchValue,
 }: DataTableProps<TData, TValue>) {
-  const [expanded, setExpanded] = React.useState<ExpandedState>(() => {
-    if (!defaultExpanded || !data.length) {
-      return {};
-    }
+    const [expanded, setExpanded] = React.useState<ExpandedState>(() => {
+        if (!defaultExpanded || !data.length) {
+            return {};
+        }
 
-    const initial: Record<string, boolean> = {};
-    data.forEach((item, index) => {
-      initial[String(index)] = true;
+        const initial: Record<string, boolean> = {};
+        data.forEach((item, index) => {
+            initial[String(index)] = true;
+        });
+
+        return initial;
     });
 
-    return initial;
-  });
+    const [localSearch, setLocalSearch] = React.useState(searchValue ?? '');
 
-  const [localSearch, setLocalSearch] = React.useState(searchValue ?? '');
+    React.useEffect(() => {
+        setLocalSearch(searchValue ?? '');
+    }, [searchValue]);
 
-  React.useEffect(() => {
-    setLocalSearch(searchValue ?? '');
-  }, [searchValue]);
+    const isServerMode = !!pagination && !!onPageChange;
+    const isSortable = !!onReorder && !!getRowId;
 
-  const isServerMode = !!pagination && !!onPageChange;
-  const isSortable = !!onReorder && !!getRowId;
+    const handleSearchDebounced = useDebounce(
+        (value: string) => onSearchChange?.(value),
+        300,
+    );
 
-  const handleSearchDebounced = useDebounce(
-    (value: string) => onSearchChange?.(value),
-    300,
-  );
+    const totalPages = pagination?.last_page ?? 1;
+    const currentPage = pagination?.current_page ?? 1;
 
-  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
-      ? [
+    const visibleColumns = [
         {
-          id: 'drag',
-          header: '',
-          cell: () => <DragHandleTrigger />,
-          meta: {
-            className: 'w-[40px]',
-            headerClassName: 'w-[40px]',
-          },
+            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>,
-      ]
-      : []),
-    ...columns,
-  ];
+        ...(isSortable
+            ? [
+                  {
+                      id: 'drag',
+                      header: '',
+                      cell: () => <DragHandleTrigger />,
+                      meta: {
+                          className: 'w-[40px]',
+                          headerClassName: 'w-[40px]',
+                      },
+                  } as ColumnDef<TData, TValue>,
+              ]
+            : []),
+        ...columns,
+    ];
 
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: { distance: 8 },
-    }),
-    useSensor(KeyboardSensor),
-  );
+    const sensors = useSensors(
+        useSensor(PointerSensor, {
+            activationConstraint: { distance: 8 },
+        }),
+        useSensor(KeyboardSensor),
+    );
 
-  const table = useReactTable({
-    data,
-    columns: visibleColumns,
-    getCoreRowModel: getCoreRowModel(),
-    getExpandedRowModel: renderSubRow ? getExpandedRowModel() : undefined,
-    onExpandedChange: setExpanded,
-    state: {
-      expanded,
-    },
-  });
+    const table = useReactTable({
+        data,
+        columns: visibleColumns,
+        getCoreRowModel: getCoreRowModel(),
+        getExpandedRowModel: renderSubRow ? getExpandedRowModel() : undefined,
+        onExpandedChange: setExpanded,
+        state: {
+            expanded,
+        },
+    });
 
-  const itemIds = React.useMemo(
-    () => data.map((item) => String(getRowId ? getRowId(item) : '')),
-    [data, getRowId],
-  );
+    const itemIds = React.useMemo(
+        () => data.map((item) => String(getRowId ? getRowId(item) : '')),
+        [data, getRowId],
+    );
 
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event;
+    function handleDragEnd(event: DragEndEvent) {
+        const { active, over } = event;
 
-    if (!over || active.id === over.id) {
-      return;
+        if (!over || active.id === over.id) {
+            return;
+        }
+
+        const oldIndex = itemIds.indexOf(String(active.id));
+        const newIndex = itemIds.indexOf(String(over.id));
+
+        if (oldIndex === -1 || newIndex === -1) {
+            return;
+        }
+
+        const reordered = [...data];
+        const [moved] = reordered.splice(oldIndex, 1);
+        reordered.splice(newIndex, 0, moved);
+
+        onReorder?.(reordered);
     }
 
-    const oldIndex = itemIds.indexOf(String(active.id));
-    const newIndex = itemIds.indexOf(String(over.id));
+    function handleSearchChange(value: string) {
+        setLocalSearch(value);
 
-    if (oldIndex === -1 || newIndex === -1) {
-      return;
+        if (isServerMode) {
+            handleSearchDebounced(value);
+        }
     }
 
-    const reordered = [...data];
-    const [moved] = reordered.splice(oldIndex, 1);
-    reordered.splice(newIndex, 0, moved);
-
-    onReorder?.(reordered);
-  }
-
-  function handleSearchChange(value: string) {
-    setLocalSearch(value);
-
-    if (isServerMode) {
-      handleSearchDebounced(value);
-    }
-  }
-
-  return (
-    <>
-      {(searchKey || toolbar || isServerMode) && (
-        <div className="flex items-center gap-2">
-          {searchKey && (
-            <Input
-              placeholder={searchPlaceholder}
-              value={localSearch}
-              onChange={(event) =>
-                handleSearchChange(event.target.value)
-              }
-              className="max-w-sm"
-            />
-          )}
-          {toolbar}
-          <div className="ml-auto flex items-center gap-2">
-            {isServerMode && onPerPageChange && (
-              <Select
-                value={String(pagination?.per_page ?? 25)}
-                onValueChange={(value) =>
-                  onPerPageChange(Number(value))
-                }
-              >
-                <SelectTrigger className="h-8 w-[70px]">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="25">25</SelectItem>
-                  <SelectItem value="50">50</SelectItem>
-                  <SelectItem value="100">100</SelectItem>
-                  <SelectItem value="999999">
-                    Semua
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            )}
-          </div>
-        </div>
-      )}
-      <Card className="shrink-0 bg-sidebar p-0">
-        <CardContent className="p-0">
-          <Table>
-            <TableHeader>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <TableRow key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => (
-                    <TableHead
-                      key={header.id}
-                      className={
-                        (
-                          header.column.columnDef
-                            .meta as {
-                              headerClassName?: string;
+    return (
+        <>
+            {(searchKey || toolbar || isServerMode) && (
+                <div className="flex items-center gap-2">
+                    {searchKey && (
+                        <Input
+                            placeholder={searchPlaceholder}
+                            value={localSearch}
+                            onChange={(event) =>
+                                handleSearchChange(event.target.value)
                             }
-                        )?.headerClassName
-                      }
-                    >
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                          header.column.columnDef
-                            .header,
-                          header.getContext(),
+                            className="max-w-sm"
+                        />
+                    )}
+                    {toolbar}
+                    <div className="ml-auto flex items-center gap-2">
+                        {isServerMode && onPerPageChange && (
+                            <Select
+                                value={String(pagination?.per_page ?? 25)}
+                                onValueChange={(value) =>
+                                    onPerPageChange(Number(value))
+                                }
+                            >
+                                <SelectTrigger className="h-8 w-[70px]">
+                                    <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="25">25</SelectItem>
+                                    <SelectItem value="50">50</SelectItem>
+                                    <SelectItem value="100">100</SelectItem>
+                                    <SelectItem value="999999">
+                                        Semua
+                                    </SelectItem>
+                                </SelectContent>
+                            </Select>
                         )}
-                    </TableHead>
-                  ))}
-                </TableRow>
-              ))}
-            </TableHeader>
-            <TableBody>
-              {table.getRowModel().rows?.length ? (
-                isSortable ? (
-                  <DndContext
-                    sensors={sensors}
-                    onDragEnd={handleDragEnd}
-                  >
-                    <SortableContext
-                      items={itemIds}
-                      strategy={
-                        verticalListSortingStrategy
-                      }
-                    >
-                      {table
-                        .getRowModel()
-                        .rows.map((row) => (
-                          <SortableTableRow
-                            key={row.id}
-                            id={String(
-                              getRowId!(
-                                row.original,
-                              ),
+                    </div>
+                </div>
+            )}
+            <Card className="shrink-0 overflow-hidden bg-sidebar p-0">
+                <CardContent className="p-0">
+                    <Table>
+                        <TableHeader>
+                            {table.getHeaderGroups().map((headerGroup) => (
+                                <TableRow key={headerGroup.id}>
+                                    {headerGroup.headers.map((header) => (
+                                        <TableHead
+                                            key={header.id}
+                                            className={
+                                                (
+                                                    header.column.columnDef
+                                                        .meta as {
+                                                        headerClassName?: string;
+                                                    }
+                                                )?.headerClassName
+                                            }
+                                        >
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                      header.column.columnDef
+                                                          .header,
+                                                      header.getContext(),
+                                                  )}
+                                        </TableHead>
+                                    ))}
+                                </TableRow>
+                            ))}
+                        </TableHeader>
+                        <TableBody>
+                            {table.getRowModel().rows?.length ? (
+                                isSortable ? (
+                                    <DndContext
+                                        sensors={sensors}
+                                        onDragEnd={handleDragEnd}
+                                    >
+                                        <SortableContext
+                                            items={itemIds}
+                                            strategy={
+                                                verticalListSortingStrategy
+                                            }
+                                        >
+                                            {table
+                                                .getRowModel()
+                                                .rows.map((row) => (
+                                                    <SortableTableRow
+                                                        key={row.id}
+                                                        id={String(
+                                                            getRowId!(
+                                                                row.original,
+                                                            ),
+                                                        )}
+                                                    >
+                                                        {row
+                                                            .getVisibleCells()
+                                                            .map((cell) => (
+                                                                <TableCell
+                                                                    key={
+                                                                        cell.id
+                                                                    }
+                                                                    className={
+                                                                        (
+                                                                            cell
+                                                                                .column
+                                                                                .columnDef
+                                                                                .meta as {
+                                                                                className?: string;
+                                                                            }
+                                                                        )
+                                                                            ?.className
+                                                                    }
+                                                                >
+                                                                    {flexRender(
+                                                                        cell
+                                                                            .column
+                                                                            .columnDef
+                                                                            .cell,
+                                                                        cell.getContext(),
+                                                                    )}
+                                                                </TableCell>
+                                                            ))}
+                                                    </SortableTableRow>
+                                                ))}
+                                        </SortableContext>
+                                    </DndContext>
+                                ) : (
+                                    table.getRowModel().rows.map((row) => (
+                                        <React.Fragment key={row.id}>
+                                            <TableRow
+                                                data-state={
+                                                    row.getIsSelected() &&
+                                                    'selected'
+                                                }
+                                            >
+                                                {row
+                                                    .getVisibleCells()
+                                                    .map((cell) => (
+                                                        <TableCell
+                                                            key={cell.id}
+                                                            className={
+                                                                (
+                                                                    cell.column
+                                                                        .columnDef
+                                                                        .meta as {
+                                                                        className?: string;
+                                                                    }
+                                                                )?.className
+                                                            }
+                                                        >
+                                                            {flexRender(
+                                                                cell.column
+                                                                    .columnDef
+                                                                    .cell,
+                                                                cell.getContext(),
+                                                            )}
+                                                        </TableCell>
+                                                    ))}
+                                            </TableRow>
+                                            {renderSubRow &&
+                                                row.getIsExpanded() && (
+                                                    <TableRow>
+                                                        <TableCell
+                                                            colSpan={
+                                                                visibleColumns.length
+                                                            }
+                                                            className="bg-muted/50 p-0"
+                                                        >
+                                                            <div className="p-4">
+                                                                {renderSubRow(
+                                                                    row,
+                                                                    localSearch,
+                                                                )}
+                                                            </div>
+                                                        </TableCell>
+                                                    </TableRow>
+                                                )}
+                                        </React.Fragment>
+                                    ))
+                                )
+                            ) : (
+                                <TableRow>
+                                    <TableCell
+                                        colSpan={visibleColumns.length}
+                                        className="h-24 text-center"
+                                    >
+                                        {emptyText}
+                                    </TableCell>
+                                </TableRow>
                             )}
-                          >
-                            {row
-                              .getVisibleCells()
-                              .map((cell) => (
-                                <TableCell
-                                  key={
-                                    cell.id
-                                  }
-                                  className={
-                                    (
-                                      cell
-                                        .column
-                                        .columnDef
-                                        .meta as {
-                                          className?: string;
-                                        }
-                                    )
-                                      ?.className
-                                  }
-                                >
-                                  {flexRender(
-                                    cell
-                                      .column
-                                      .columnDef
-                                      .cell,
-                                    cell.getContext(),
-                                  )}
-                                </TableCell>
-                              ))}
-                          </SortableTableRow>
-                        ))}
-                    </SortableContext>
-                  </DndContext>
-                ) : (
-                  table.getRowModel().rows.map((row) => (
-                    <React.Fragment key={row.id}>
-                      <TableRow
-                        data-state={
-                          row.getIsSelected() &&
-                          'selected'
-                        }
-                      >
-                        {row
-                          .getVisibleCells()
-                          .map((cell) => (
-                            <TableCell
-                              key={cell.id}
-                              className={
-                                (
-                                  cell.column
-                                    .columnDef
-                                    .meta as {
-                                      className?: string;
-                                    }
-                                )?.className
-                              }
-                            >
-                              {flexRender(
-                                cell.column
-                                  .columnDef
-                                  .cell,
-                                cell.getContext(),
-                              )}
-                            </TableCell>
-                          ))}
-                      </TableRow>
-                      {renderSubRow &&
-                        row.getIsExpanded() && (
-                          <TableRow>
-                            <TableCell
-                              colSpan={
-                                visibleColumns.length
-                              }
-                              className="bg-muted/50 p-0"
-                            >
-                              <div className="p-4">
-                                {renderSubRow(
-                                  row,
-                                  localSearch,
-                                )}
-                              </div>
-                            </TableCell>
-                          </TableRow>
-                        )}
-                    </React.Fragment>
-                  ))
-                )
-              ) : (
-                <TableRow>
-                  <TableCell
-                    colSpan={visibleColumns.length}
-                    className="h-24 text-center"
-                  >
-                    {emptyText}
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </CardContent>
-      </Card>
+                        </TableBody>
+                    </Table>
+                </CardContent>
+            </Card>
 
-      <div className="flex items-center justify-end gap-2">
-        <span className="text-sm text-muted-foreground">
-          {isServerMode
-            ? `Halaman ${currentPage} dari ${totalPages}`
-            : `Halaman ${table.getState().pagination.pageIndex + 1} dari ${table.getPageCount()}`}
-        </span>
-        <div className="flex items-center gap-1">
-          {isServerMode ? (
-            <>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => onPageChange(1)}
-                disabled={currentPage <= 1}
-              >
-                <ChevronsLeft className="h-4 w-4" />
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => onPageChange(currentPage - 1)}
-                disabled={currentPage <= 1}
-              >
-                <ChevronLeft className="h-4 w-4" />
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => onPageChange(currentPage + 1)}
-                disabled={currentPage >= totalPages}
-              >
-                <ChevronRight className="h-4 w-4" />
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => onPageChange(totalPages)}
-                disabled={currentPage >= totalPages}
-              >
-                <ChevronsRight className="h-4 w-4" />
-              </Button>
-            </>
-          ) : (
-            <>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => table.setPageIndex(0)}
-                disabled={!table.getCanPreviousPage()}
-              >
-                <ChevronsLeft className="h-4 w-4" />
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => table.previousPage()}
-                disabled={!table.getCanPreviousPage()}
-              >
-                <ChevronLeft className="h-4 w-4" />
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => table.nextPage()}
-                disabled={!table.getCanNextPage()}
-              >
-                <ChevronRight className="h-4 w-4" />
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() =>
-                  table.setPageIndex(table.getPageCount() - 1)
-                }
-                disabled={!table.getCanNextPage()}
-              >
-                <ChevronsRight className="h-4 w-4" />
-              </Button>
-            </>
-          )}
-        </div>
-      </div>
-    </>
-  );
+            <div className="flex items-center justify-end gap-2">
+                <span className="text-sm text-muted-foreground">
+                    {isServerMode
+                        ? `Halaman ${currentPage} dari ${totalPages}`
+                        : `Halaman ${table.getState().pagination.pageIndex + 1} dari ${table.getPageCount()}`}
+                </span>
+                <div className="flex items-center gap-1">
+                    {isServerMode ? (
+                        <>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => onPageChange(1)}
+                                disabled={currentPage <= 1}
+                            >
+                                <ChevronsLeft className="h-4 w-4" />
+                            </Button>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => onPageChange(currentPage - 1)}
+                                disabled={currentPage <= 1}
+                            >
+                                <ChevronLeft className="h-4 w-4" />
+                            </Button>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => onPageChange(currentPage + 1)}
+                                disabled={currentPage >= totalPages}
+                            >
+                                <ChevronRight className="h-4 w-4" />
+                            </Button>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => onPageChange(totalPages)}
+                                disabled={currentPage >= totalPages}
+                            >
+                                <ChevronsRight className="h-4 w-4" />
+                            </Button>
+                        </>
+                    ) : (
+                        <>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => table.setPageIndex(0)}
+                                disabled={!table.getCanPreviousPage()}
+                            >
+                                <ChevronsLeft className="h-4 w-4" />
+                            </Button>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => table.previousPage()}
+                                disabled={!table.getCanPreviousPage()}
+                            >
+                                <ChevronLeft className="h-4 w-4" />
+                            </Button>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => table.nextPage()}
+                                disabled={!table.getCanNextPage()}
+                            >
+                                <ChevronRight className="h-4 w-4" />
+                            </Button>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() =>
+                                    table.setPageIndex(table.getPageCount() - 1)
+                                }
+                                disabled={!table.getCanNextPage()}
+                            >
+                                <ChevronsRight className="h-4 w-4" />
+                            </Button>
+                        </>
+                    )}
+                </div>
+            </div>
+        </>
+    );
 }
diff --git a/resources/js/components/ui/table.tsx b/resources/js/components/ui/table.tsx
index fcfa0a2..668571e 100644
--- a/resources/js/components/ui/table.tsx
+++ b/resources/js/components/ui/table.tsx
@@ -21,7 +21,7 @@ function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
   return (
     <thead
       data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
+      className={cn("bg-primary [&_tr]:border-b", className)}
       {...props}
     />
   )
@@ -68,7 +68,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-primary-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
         className
       )}
       {...props}
-- 
2.45.2