Refactor table column headers to remove sorting functionality

- Removed sorting buttons and associated logic from various table columns across payroll, employee, leave request, category, customer, product, supplier, and role management pages.
- Simplified header definitions to use static text instead of buttons for sorting.
- Cleaned up unused sort state management in related index components.

resources/js/components/data-table.tsx

@@ -54,11 +54,6 @@ export interface PaginationState {
     total: number;
 }
 
-export interface SortState {
-    column: string;
-    direction: 'asc' | 'desc';
-}
-
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
@@ -74,8 +69,6 @@ interface DataTableProps<TData, TValue> {
     onPageChange?: (page: number) => void;
     onPerPageChange?: (perPage: number) => void;
     onSearchChange?: (search: string) => void;
-    onSortChange?: (column: string, direction: 'asc' | 'desc') => void;
-    currentSort?: SortState;
     searchValue?: string;
 }
 
@@ -167,8 +160,6 @@ export function DataTable<TData, TValue>({
     onPageChange,
     onPerPageChange,
     onSearchChange,
-    onSortChange,
-    currentSort,
     searchValue,
 }: DataTableProps<TData, TValue>) {
     const [expanded, setExpanded] = React.useState<ExpandedState>(() => {
@@ -265,18 +256,6 @@ export function DataTable<TData, TValue>({
         }
     }
 
-    function handleSort(columnId: string) {
-        if (!onSortChange) {
-            return;
-        }
-
-        const newDirection =
-            currentSort?.column === columnId && currentSort?.direction === 'asc'
-                ? 'desc'
-                : 'asc';
-        onSortChange(columnId, newDirection);
-    }
-
     const totalPages = pagination?.last_page ?? 1;
     const currentPage = pagination?.current_page ?? 1;
 

resources/js/pages/admin/finance/cash-account/columns.tsx

@@ -1,5 +1,5 @@
 import type { ColumnDef } from '@tanstack/react-table';
-import { ArrowUpDown, Pencil, Trash2 } from 'lucide-react';
+import { Pencil, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
     Tooltip,
@@ -39,18 +39,7 @@ export function createCashAccountColumns(
         },
         {
             accessorKey: 'name',
-            header: ({ column }) => (
+            header: () => <span>Nama</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Nama</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span className="font-medium">
                     {row.getValue('name') as string}
@@ -59,18 +48,7 @@ export function createCashAccountColumns(
         },
         {
             accessorKey: 'balance',
-            header: ({ column }) => (
+            header: () => <span>Saldo</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Saldo</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span className="font-medium">
                     {formatCurrency(row.getValue('balance') as number)}

resources/js/pages/admin/finance/cash-account/index.tsx

@@ -9,7 +9,7 @@ import {
 import { useCallback, useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
 import { DataTable } from '@/components/data-table';
-import type { PaginationState, SortState } from '@/components/data-table';
+import type { PaginationState } from '@/components/data-table';
 import { FileUpload } from '@/components/file-upload';
 import InputError from '@/components/input-error';
 import { RupiahInput } from '@/components/rupiah-input';
@@ -106,11 +106,6 @@ export default function CashAccountIndex({
     } | null>(null);
 
     const [search, setSearch] = useState('');
-    const [sort, setSort] = useState<SortState>({
-        column: 'created_at',
-        direction: 'desc',
-    });
-
     const pagination: PaginationState = {
         current_page: transactions.current_page,
         last_page: transactions.last_page,
@@ -136,8 +131,6 @@ export default function CashAccountIndex({
                 page: 1,
                 per_page: pagination.per_page,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -150,8 +143,6 @@ export default function CashAccountIndex({
                 page: 1,
                 per_page: pagination.per_page,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -176,8 +167,6 @@ export default function CashAccountIndex({
                 page,
                 per_page: pagination.per_page,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -191,8 +180,6 @@ export default function CashAccountIndex({
                 page: 1,
                 per_page: perPage,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -208,31 +195,13 @@ export default function CashAccountIndex({
                     page: 1,
                     per_page: pagination.per_page,
                     search: value,
-                    sort: sort.column,
-                    direction: sort.direction,
                 },
                 { preserveState: true, replace: true },
             );
         },
-        [pagination.per_page, sort, filters],
+        [pagination.per_page, filters],
     );
 
-    function handleSortChange(column: string, direction: 'asc' | 'desc') {
-        setSort({ column, direction });
-        router.get(
-            cashAccountIndex(),
-            {
-                ...filters,
-                page: 1,
-                per_page: pagination.per_page,
-                search,
-                sort: column,
-                direction,
-            },
-            { preserveState: true, replace: true },
-        );
-    }
-
     const columns = createTransactionColumns({
         handleEdit: (transaction) => {
             setEditing(transaction);
@@ -357,8 +326,6 @@ export default function CashAccountIndex({
                     onPageChange={handlePageChange}
                     onPerPageChange={handlePerPageChange}
                     onSearchChange={handleSearchChange}
-                    onSortChange={handleSortChange}
-                    currentSort={sort}
                     searchValue={search}
                     toolbar={filterToolbar}
                 />

resources/js/pages/admin/finance/cash-account/transaction-columns.tsx

@@ -8,7 +8,7 @@ import {
 } from '@/components/ui/tooltip';
 import { formatCurrency } from '@/lib/utils';
 import type { ColumnDef } from '@tanstack/react-table';
-import { ArrowUpDown, Pencil, Trash2 } from 'lucide-react';
+import { Pencil, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 
 export type CashTransaction = {
@@ -118,18 +118,7 @@ export function createTransactionColumns(
         },
         {
             accessorKey: 'created_at',
-            header: ({ column }) => (
+            header: () => <span>Tanggal</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Tanggal</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span>{formatDate(row.getValue('created_at') as string)}</span>
             ),
@@ -156,18 +145,7 @@ export function createTransactionColumns(
         },
         {
             accessorKey: 'amount',
-            header: ({ column }) => (
+            header: () => <span>Jumlah</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Jumlah</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => {
                 const transaction = row.original;
                 const isDeposit = transaction.type === 'deposit';
@@ -188,18 +166,7 @@ export function createTransactionColumns(
         },
         {
             accessorKey: 'balance_after',
-            header: ({ column }) => (
+            header: () => <span>Saldo Setelah</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Saldo Setelah</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span className="font-medium">
                     {formatCurrency(row.getValue('balance_after') as number)}

resources/js/pages/admin/finance/employee-advance/columns.tsx

@@ -1,11 +1,5 @@
 import type { ColumnDef } from '@tanstack/react-table';
-import {
+import { CheckCircle, CircleDollarSign, Pencil, Trash2 } from 'lucide-react';
-    ArrowUpDown,
-    CheckCircle,
-    CircleDollarSign,
-    Pencil,
-    Trash2,
-} from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import {
@@ -119,18 +113,7 @@ export function createEmployeeAdvanceColumns(
         },
         {
             accessorKey: 'created_at',
-            header: ({ column }) => (
+            header: () => <span>Tanggal</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Tanggal</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span>{formatDate(row.getValue('created_at') as string)}</span>
             ),
@@ -150,18 +133,7 @@ export function createEmployeeAdvanceColumns(
         },
         {
             accessorKey: 'amount',
-            header: ({ column }) => (
+            header: () => <span>Jumlah</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Jumlah</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span className="font-medium text-red-600">
                     - {formatCurrency(row.getValue('amount') as number)}
@@ -179,18 +151,7 @@ export function createEmployeeAdvanceColumns(
         },
         {
             accessorKey: 'due_date',
-            header: ({ column }) => (
+            header: () => <span>Jatuh Tempo</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Jatuh Tempo</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span>
                     {formatShortDate(row.getValue('due_date') as string)}

resources/js/pages/admin/finance/employee-advance/index.tsx

@@ -3,7 +3,7 @@ import { Plus } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
 import { DataTable } from '@/components/data-table';
-import type { PaginationState, SortState } from '@/components/data-table';
+import type { PaginationState } from '@/components/data-table';
 import { DatePicker } from '@/components/date-picker';
 import InputError from '@/components/input-error';
 import { RupiahInput } from '@/components/rupiah-input';
@@ -49,11 +49,6 @@ export default function EmployeeAdvanceIndex({ employeeAdvances }: Props) {
         undefined,
     );
     const [search, setSearch] = useState('');
-    const [sort, setSort] = useState<SortState>({
-        column: 'created_at',
-        direction: 'desc',
-    });
-
     const pagination: PaginationState = {
         current_page: employeeAdvances.current_page,
         last_page: employeeAdvances.last_page,
@@ -114,8 +109,6 @@ export default function EmployeeAdvanceIndex({ employeeAdvances }: Props) {
                 page,
                 per_page: pagination.per_page,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -128,8 +121,6 @@ export default function EmployeeAdvanceIndex({ employeeAdvances }: Props) {
                 page: 1,
                 per_page: perPage,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -144,30 +135,13 @@ export default function EmployeeAdvanceIndex({ employeeAdvances }: Props) {
                     page: 1,
                     per_page: pagination.per_page,
                     search: value,
-                    sort: sort.column,
-                    direction: sort.direction,
                 },
                 { preserveState: true, replace: true },
             );
         },
-        [pagination.per_page, sort],
+        [pagination.per_page],
     );
 
-    function handleSortChange(column: string, direction: 'asc' | 'desc') {
-        setSort({ column, direction });
-        router.get(
-            employeeAdvanceIndex.url(),
-            {
-                page: 1,
-                per_page: pagination.per_page,
-                search,
-                sort: column,
-                direction,
-            },
-            { preserveState: true, replace: true },
-        );
-    }
-
     const columns = createEmployeeAdvanceColumns({
         handleEdit: (employeeAdvance) => setEditing(employeeAdvance),
         handleDeleteClick: (employeeAdvance) => setDeleting(employeeAdvance),
@@ -323,8 +297,6 @@ export default function EmployeeAdvanceIndex({ employeeAdvances }: Props) {
                     onPageChange={handlePageChange}
                     onPerPageChange={handlePerPageChange}
                     onSearchChange={handleSearchChange}
-                    onSortChange={handleSortChange}
-                    currentSort={sort}
                     searchValue={search}
                 />
 

resources/js/pages/admin/finance/expense/columns.tsx

@@ -8,7 +8,7 @@ import {
 } from '@/components/ui/tooltip';
 import { formatCurrency } from '@/lib/utils';
 import type { ColumnDef } from '@tanstack/react-table';
-import { ArrowUpDown, Pencil, Trash2 } from 'lucide-react';
+import { Pencil, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 
 export type Expense = {
@@ -91,18 +91,7 @@ export function createExpenseColumns(
         },
         {
             accessorKey: 'created_at',
-            header: ({ column }) => (
+            header: () => <span>Tanggal</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Tanggal</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span>{formatDate(row.getValue('created_at') as string)}</span>
             ),
@@ -136,18 +125,7 @@ export function createExpenseColumns(
         },
         {
             accessorKey: 'amount',
-            header: ({ column }) => (
+            header: () => <span>Jumlah</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Jumlah</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span className="font-medium text-red-600">
                     - {formatCurrency(row.getValue('amount') as number)}

resources/js/pages/admin/finance/expense/index.tsx

@@ -2,7 +2,7 @@ import { Form, Head, router } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useCallback, useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
-import type { PaginationState, SortState } from '@/components/data-table';
+import type { PaginationState } from '@/components/data-table';
 import { DataTable } from '@/components/data-table';
 import { FileUpload } from '@/components/file-upload';
 import InputError from '@/components/input-error';
@@ -55,11 +55,6 @@ export default function ExpenseIndex({ expenses }: Props) {
         type: string;
     } | null>(null);
     const [search, setSearch] = useState('');
-    const [sort, setSort] = useState<SortState>({
-        column: 'created_at',
-        direction: 'desc',
-    });
-
     const pagination: PaginationState = {
         current_page: expenses.current_page,
         last_page: expenses.last_page,
@@ -74,8 +69,6 @@ export default function ExpenseIndex({ expenses }: Props) {
                 page,
                 per_page: pagination.per_page,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -88,8 +81,6 @@ export default function ExpenseIndex({ expenses }: Props) {
                 page: 1,
                 per_page: perPage,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -104,30 +95,13 @@ export default function ExpenseIndex({ expenses }: Props) {
                     page: 1,
                     per_page: pagination.per_page,
                     search: value,
-                    sort: sort.column,
-                    direction: sort.direction,
                 },
                 { preserveState: true, replace: true },
             );
         },
-        [pagination.per_page, sort],
+        [pagination.per_page],
     );
 
-    function handleSortChange(column: string, direction: 'asc' | 'desc') {
-        setSort({ column, direction });
-        router.get(
-            expenseIndex.url(),
-            {
-                page: 1,
-                per_page: pagination.per_page,
-                search,
-                sort: column,
-                direction,
-            },
-            { preserveState: true, replace: true },
-        );
-    }
-
     function handleDelete() {
         if (!deleting) {
             return;
@@ -322,8 +296,6 @@ export default function ExpenseIndex({ expenses }: Props) {
                     onPageChange={handlePageChange}
                     onPerPageChange={handlePerPageChange}
                     onSearchChange={handleSearchChange}
-                    onSortChange={handleSortChange}
-                    currentSort={sort}
                     searchValue={search}
                 />
 

resources/js/pages/admin/finance/payroll-period/columns.tsx

@@ -1,5 +1,5 @@
 import type { ColumnDef } from '@tanstack/react-table';
-import { ArrowUpDown, Eye, Lock, Unlock } from 'lucide-react';
+import { Eye, Lock, Unlock } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import {
@@ -92,18 +92,7 @@ export function createPayrollPeriodColumns(
         },
         {
             accessorKey: 'year',
-            header: ({ column }) => (
+            header: () => <span>Periode</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Periode</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span className="font-medium">
                     {formatPeriod(row.original)}
@@ -121,18 +110,7 @@ export function createPayrollPeriodColumns(
         },
         {
             accessorKey: 'payrolls_sum_total_amount',
-            header: ({ column }) => (
+            header: () => <span>Total Gaji</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Total Gaji</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span className="font-medium">
                     {formatCurrency(
@@ -144,18 +122,7 @@ export function createPayrollPeriodColumns(
         },
         {
             accessorKey: 'payrolls_sum_bonus_amount',
-            header: ({ column }) => (
+            header: () => <span>Bonus</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Bonus</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => {
                 const value =
                     (row.getValue('payrolls_sum_bonus_amount') as number) ?? 0;
@@ -176,18 +143,7 @@ export function createPayrollPeriodColumns(
         },
         {
             accessorKey: 'payrolls_sum_deduction_amount',
-            header: ({ column }) => (
+            header: () => <span>Potongan</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Potongan</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => {
                 const value =
                     (row.getValue('payrolls_sum_deduction_amount') as number) ??

resources/js/pages/admin/finance/payroll-period/index.tsx

@@ -1,7 +1,7 @@
 import { Head, router } from '@inertiajs/react';
 import { useCallback, useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
-import type { PaginationState, SortState } from '@/components/data-table';
+import type { PaginationState } from '@/components/data-table';
 import { DataTable } from '@/components/data-table';
 import { Button } from '@/components/ui/button';
 import {
@@ -47,11 +47,6 @@ export default function PayrollPeriodIndex({ payrollPeriods }: Props) {
     const [closing, setClosing] = useState<PayrollPeriod | null>(null);
     const [reopening, setReopening] = useState<PayrollPeriod | null>(null);
     const [search, setSearch] = useState('');
-    const [sort, setSort] = useState<SortState>({
-        column: 'created_at',
-        direction: 'desc',
-    });
-
     const pagination: PaginationState = {
         current_page: payrollPeriods.current_page,
         last_page: payrollPeriods.last_page,
@@ -94,8 +89,6 @@ export default function PayrollPeriodIndex({ payrollPeriods }: Props) {
                 page,
                 per_page: pagination.per_page,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -108,8 +101,6 @@ export default function PayrollPeriodIndex({ payrollPeriods }: Props) {
                 page: 1,
                 per_page: perPage,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -124,30 +115,13 @@ export default function PayrollPeriodIndex({ payrollPeriods }: Props) {
                     page: 1,
                     per_page: pagination.per_page,
                     search: value,
-                    sort: sort.column,
-                    direction: sort.direction,
                 },
                 { preserveState: true, replace: true },
             );
         },
-        [pagination.per_page, sort],
+        [pagination.per_page],
     );
 
-    function handleSortChange(column: string, direction: 'asc' | 'desc') {
-        setSort({ column, direction });
-        router.get(
-            payrollPeriodsIndex(),
-            {
-                page: 1,
-                per_page: pagination.per_page,
-                search,
-                sort: column,
-                direction,
-            },
-            { preserveState: true, replace: true },
-        );
-    }
-
     const columns = createPayrollPeriodColumns({
         showUrl: (id) => payrollPeriodShow(id).url,
         handleClose: (period) => setClosing(period),
@@ -177,8 +151,6 @@ export default function PayrollPeriodIndex({ payrollPeriods }: Props) {
                     onPageChange={handlePageChange}
                     onPerPageChange={handlePerPageChange}
                     onSearchChange={handleSearchChange}
-                    onSortChange={handleSortChange}
-                    currentSort={sort}
                     searchValue={search}
                 />
 

resources/js/pages/admin/finance/payroll-period/show-columns.tsx

@@ -1,11 +1,5 @@
 import type { ColumnDef } from '@tanstack/react-table';
-import {
+import { CircleDollarSign, Pencil, Trash2, XCircle } from 'lucide-react';
-    ArrowUpDown,
-    CircleDollarSign,
-    Pencil,
-    Trash2,
-    XCircle,
-} from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import {
@@ -114,18 +108,7 @@ export function createPayrollColumns(
         },
         {
             accessorKey: 'base_salary',
-            header: ({ column }) => (
+            header: () => <span>Gaji Pokok</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Gaji Pokok</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span>
                     {formatCurrency(row.getValue('base_salary') as number)}
@@ -134,18 +117,7 @@ export function createPayrollColumns(
         },
         {
             accessorKey: 'bonus_amount',
-            header: ({ column }) => (
+            header: () => <span>Bonus</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Bonus</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => {
                 const value = row.getValue('bonus_amount') as number;
 
@@ -163,18 +135,7 @@ export function createPayrollColumns(
         },
         {
             accessorKey: 'deduction_amount',
-            header: ({ column }) => (
+            header: () => <span>Potongan</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Potongan</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => {
                 const value = row.getValue('deduction_amount') as number;
 
@@ -190,18 +151,7 @@ export function createPayrollColumns(
         },
         {
             accessorKey: 'total_amount',
-            header: ({ column }) => (
+            header: () => <span>Total</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Total</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span className="font-semibold">
                     {formatCurrency(row.getValue('total_amount') as number)}

resources/js/pages/admin/hr/employee/columns.tsx

@@ -1,6 +1,6 @@
 import type { ColumnDef } from '@tanstack/react-table';
 import { router } from '@inertiajs/react';
-import { ArrowUpDown, KeyRound, Pencil, Trash2 } from 'lucide-react';
+import { KeyRound, Pencil, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Switch } from '@/components/ui/switch';
 import {
@@ -78,18 +78,7 @@ export function createEmployeeColumns(
         {
             accessorKey: 'user_profile.full_name',
             id: 'full_name',
-            header: ({ column }) => (
+            header: () => <span>Nama</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Nama</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => {
                 const employee = row.original;
 
@@ -107,18 +96,7 @@ export function createEmployeeColumns(
         },
         {
             accessorKey: 'username',
-            header: ({ column }) => (
+            header: () => <span>Username</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Username</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span className="font-medium">
                     {row.getValue('username') as string}
@@ -140,18 +118,7 @@ export function createEmployeeColumns(
         {
             accessorKey: 'employee.employment_status',
             id: 'employment_status',
-            header: ({ column }) => (
+            header: () => <span>Status</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Status</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => {
                 const employee = row.original;
 

resources/js/pages/admin/hr/employee/index.tsx

@@ -3,7 +3,7 @@ import { Filter, Plus, X } from 'lucide-react';
 import { useCallback, useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
 import { DataTable } from '@/components/data-table';
-import type { PaginationState, SortState } from '@/components/data-table';
+import type { PaginationState } from '@/components/data-table';
 import { Button } from '@/components/ui/button';
 import {
     Popover,
@@ -49,11 +49,6 @@ export default function EmployeeIndex({ employees, filters }: Props) {
         useState<Employee | null>(null);
     const [filterOpen, setFilterOpen] = useState(false);
     const [search, setSearch] = useState('');
-    const [sort, setSort] = useState<SortState>({
-        column: 'created_at',
-        direction: 'desc',
-    });
-
     const pagination: PaginationState = {
         current_page: employees.current_page,
         last_page: employees.last_page,
@@ -79,8 +74,6 @@ export default function EmployeeIndex({ employees, filters }: Props) {
                 page: 1,
                 per_page: pagination.per_page,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -93,8 +86,6 @@ export default function EmployeeIndex({ employees, filters }: Props) {
                 page: 1,
                 per_page: pagination.per_page,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -109,8 +100,6 @@ export default function EmployeeIndex({ employees, filters }: Props) {
                 page,
                 per_page: pagination.per_page,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -124,8 +113,6 @@ export default function EmployeeIndex({ employees, filters }: Props) {
                 page: 1,
                 per_page: perPage,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -141,31 +128,13 @@ export default function EmployeeIndex({ employees, filters }: Props) {
                     page: 1,
                     per_page: pagination.per_page,
                     search: value,
-                    sort: sort.column,
-                    direction: sort.direction,
                 },
                 { preserveState: true, replace: true },
             );
         },
-        [pagination.per_page, sort, filters],
+        [pagination.per_page, filters],
     );
 
-    function handleSortChange(column: string, direction: 'asc' | 'desc') {
-        setSort({ column, direction });
-        router.get(
-            employeeIndex.url(),
-            {
-                ...filters,
-                page: 1,
-                per_page: pagination.per_page,
-                search,
-                sort: column,
-                direction,
-            },
-            { preserveState: true, replace: true },
-        );
-    }
-
     function handleDelete() {
         if (!deleting) {
             return;
@@ -340,8 +309,6 @@ export default function EmployeeIndex({ employees, filters }: Props) {
                     onPageChange={handlePageChange}
                     onPerPageChange={handlePerPageChange}
                     onSearchChange={handleSearchChange}
-                    onSortChange={handleSortChange}
-                    currentSort={sort}
                     searchValue={search}
                     toolbar={filterToolbar}
                 />

resources/js/pages/admin/hr/leave-request/columns.tsx

@@ -7,13 +7,7 @@ import {
     TooltipTrigger,
 } from '@/components/ui/tooltip';
 import type { ColumnDef } from '@tanstack/react-table';
-import {
+import { CheckCircle, Pencil, Trash2, XCircle } from 'lucide-react';
-    ArrowUpDown,
-    CheckCircle,
-    Pencil,
-    Trash2,
-    XCircle,
-} from 'lucide-react';
 
 export type LeaveRequest = {
     id: number;
@@ -110,18 +104,7 @@ export function createLeaveRequestColumns(
         },
         {
             accessorKey: 'start_date',
-            header: ({ column }) => (
+            header: () => <span>Tanggal Mulai</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Tanggal Mulai</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span>
                     {formatShortDate(row.getValue('start_date') as string)}
@@ -130,18 +113,7 @@ export function createLeaveRequestColumns(
         },
         {
             accessorKey: 'end_date',
-            header: ({ column }) => (
+            header: () => <span>Tanggal Selesai</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Tanggal Selesai</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span>
                     {formatShortDate(row.getValue('end_date') as string)}
@@ -150,18 +122,7 @@ export function createLeaveRequestColumns(
         },
         {
             accessorKey: 'total_days',
-            header: ({ column }) => (
+            header: () => <span>Hari</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Hari</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span className="font-medium">
                     {row.getValue('total_days') as number} hari

resources/js/pages/admin/hr/leave-request/index.tsx

@@ -3,7 +3,7 @@ import { Filter, Plus, X } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
 import { DataTable } from '@/components/data-table';
-import type { PaginationState, SortState } from '@/components/data-table';
+import type { PaginationState } from '@/components/data-table';
 import { DatePicker } from '@/components/date-picker';
 import InputError from '@/components/input-error';
 import { Button } from '@/components/ui/button';
@@ -67,11 +67,6 @@ export default function LeaveRequestIndex({ leaveRequests, filters }: Props) {
     );
     const [filterOpen, setFilterOpen] = useState(false);
     const [search, setSearch] = useState('');
-    const [sort, setSort] = useState<SortState>({
-        column: 'created_at',
-        direction: 'desc',
-    });
-
     const pagination: PaginationState = {
         current_page: leaveRequests.current_page,
         last_page: leaveRequests.last_page,
@@ -107,8 +102,6 @@ export default function LeaveRequestIndex({ leaveRequests, filters }: Props) {
                 page: 1,
                 per_page: pagination.per_page,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -121,8 +114,6 @@ export default function LeaveRequestIndex({ leaveRequests, filters }: Props) {
                 page: 1,
                 per_page: pagination.per_page,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -175,8 +166,6 @@ export default function LeaveRequestIndex({ leaveRequests, filters }: Props) {
                 page,
                 per_page: pagination.per_page,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -190,8 +179,6 @@ export default function LeaveRequestIndex({ leaveRequests, filters }: Props) {
                 page: 1,
                 per_page: perPage,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -207,31 +194,13 @@ export default function LeaveRequestIndex({ leaveRequests, filters }: Props) {
                     page: 1,
                     per_page: pagination.per_page,
                     search: value,
-                    sort: sort.column,
-                    direction: sort.direction,
                 },
                 { preserveState: true, replace: true },
             );
         },
-        [pagination.per_page, sort, filters],
+        [pagination.per_page, filters],
     );
 
-    function handleSortChange(column: string, direction: 'asc' | 'desc') {
-        setSort({ column, direction });
-        router.get(
-            leaveRequestIndex(),
-            {
-                ...filters,
-                page: 1,
-                per_page: pagination.per_page,
-                search,
-                sort: column,
-                direction,
-            },
-            { preserveState: true, replace: true },
-        );
-    }
-
     const columns = createLeaveRequestColumns({
         handleEdit: (leaveRequest) => setEditing(leaveRequest),
         handleDeleteClick: (leaveRequest) => setDeleting(leaveRequest),
@@ -454,8 +423,6 @@ export default function LeaveRequestIndex({ leaveRequests, filters }: Props) {
                     onPageChange={handlePageChange}
                     onPerPageChange={handlePerPageChange}
                     onSearchChange={handleSearchChange}
-                    onSortChange={handleSortChange}
-                    currentSort={sort}
                     searchValue={search}
                     toolbar={filterToolbar}
                 />

resources/js/pages/admin/master/category/columns.tsx

@@ -1,5 +1,5 @@
 import type { ColumnDef } from '@tanstack/react-table';
-import { ArrowUpDown, Pencil, Trash2 } from 'lucide-react';
+import { Pencil, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
     Tooltip,
@@ -37,18 +37,7 @@ export function createCategoryColumns(
         },
         {
             accessorKey: 'name',
-            header: ({ column }) => (
+            header: () => <span>Nama</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Nama</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span className="font-medium">
                     {row.getValue('name') as string}

resources/js/pages/admin/master/category/index.tsx

@@ -3,7 +3,7 @@ import { Plus } from 'lucide-react';
 import { useCallback, useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
 import { DataTable } from '@/components/data-table';
-import type { PaginationState, SortState } from '@/components/data-table';
+import type { PaginationState } from '@/components/data-table';
 import InputError from '@/components/input-error';
 import { Button } from '@/components/ui/button';
 import {
@@ -40,10 +40,6 @@ export default function CategoryIndex({ categories, highlight }: Props) {
     const [editing, setEditing] = useState<Category | null>(null);
     const [deleting, setDeleting] = useState<Category | null>(null);
     const [search, setSearch] = useState('');
-    const [sort, setSort] = useState<SortState>({
-        column: 'created_at',
-        direction: 'desc',
-    });
 
     const pagination: PaginationState = {
         current_page: categories.current_page,
@@ -59,8 +55,6 @@ export default function CategoryIndex({ categories, highlight }: Props) {
                 page,
                 per_page: pagination.per_page,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             {
                 preserveState: true,
@@ -76,8 +70,6 @@ export default function CategoryIndex({ categories, highlight }: Props) {
                 page: 1,
                 per_page: perPage,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             {
                 preserveState: true,
@@ -95,8 +87,6 @@ export default function CategoryIndex({ categories, highlight }: Props) {
                     page: 1,
                     per_page: pagination.per_page,
                     search: value,
-                    sort: sort.column,
-                    direction: sort.direction,
                 },
                 {
                     preserveState: true,
@@ -104,27 +94,9 @@ export default function CategoryIndex({ categories, highlight }: Props) {
                 },
             );
         },
-        [pagination.per_page, sort],
+        [pagination.per_page],
     );
 
-    function handleSortChange(column: string, direction: 'asc' | 'desc') {
-        setSort({ column, direction });
-        router.get(
-            categoryIndex.url(),
-            {
-                page: 1,
-                per_page: pagination.per_page,
-                search,
-                sort: column,
-                direction,
-            },
-            {
-                preserveState: true,
-                replace: true,
-            },
-        );
-    }
-
     function handleDelete() {
         if (!deleting) {
             return;
@@ -250,8 +222,6 @@ export default function CategoryIndex({ categories, highlight }: Props) {
                     onPageChange={handlePageChange}
                     onPerPageChange={handlePerPageChange}
                     onSearchChange={handleSearchChange}
-                    onSortChange={handleSortChange}
-                    currentSort={sort}
                     searchValue={search}
                 />
 

resources/js/pages/admin/master/customer/columns.tsx

@@ -1,5 +1,5 @@
 import type { ColumnDef } from '@tanstack/react-table';
-import { ArrowUpDown, Pencil, Trash2 } from 'lucide-react';
+import { Pencil, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
     Tooltip,
@@ -39,18 +39,7 @@ export function createCustomerColumns(
         },
         {
             accessorKey: 'name',
-            header: ({ column }) => (
+            header: () => <span>Nama</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Nama</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span className="font-medium">
                     {row.getValue('name') as string}
@@ -59,36 +48,14 @@ export function createCustomerColumns(
         },
         {
             accessorKey: 'phone_number',
-            header: ({ column }) => (
+            header: () => <span>No. Telepon</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>No. Telepon</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span>{(row.getValue('phone_number') as string) ?? '-'}</span>
             ),
         },
         {
             accessorKey: 'address',
-            header: ({ column }) => (
+            header: () => <span>Alamat</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Alamat</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span className="block max-w-[200px] truncate">
                     {(row.getValue('address') as string) ?? '-'}

resources/js/pages/admin/master/customer/index.tsx

@@ -3,7 +3,7 @@ import { Plus } from 'lucide-react';
 import { useCallback, useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
 import { DataTable } from '@/components/data-table';
-import type { PaginationState, SortState } from '@/components/data-table';
+import type { PaginationState } from '@/components/data-table';
 import InputError from '@/components/input-error';
 import { PhoneNumberInput } from '@/components/phone-number-input';
 import { Button } from '@/components/ui/button';
@@ -40,11 +40,6 @@ export default function CustomerIndex({ customers }: Props) {
     const [editing, setEditing] = useState<Customer | null>(null);
     const [deleting, setDeleting] = useState<Customer | null>(null);
     const [search, setSearch] = useState('');
-    const [sort, setSort] = useState<SortState>({
-        column: 'created_at',
-        direction: 'desc',
-    });
-
     const pagination: PaginationState = {
         current_page: customers.current_page,
         last_page: customers.last_page,
@@ -59,8 +54,6 @@ export default function CustomerIndex({ customers }: Props) {
                 page,
                 per_page: pagination.per_page,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             {
                 preserveState: true,
@@ -76,8 +69,6 @@ export default function CustomerIndex({ customers }: Props) {
                 page: 1,
                 per_page: perPage,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             {
                 preserveState: true,
@@ -95,8 +86,6 @@ export default function CustomerIndex({ customers }: Props) {
                     page: 1,
                     per_page: pagination.per_page,
                     search: value,
-                    sort: sort.column,
-                    direction: sort.direction,
                 },
                 {
                     preserveState: true,
@@ -104,27 +93,9 @@ export default function CustomerIndex({ customers }: Props) {
                 },
             );
         },
-        [pagination.per_page, sort],
+        [pagination.per_page],
     );
 
-    function handleSortChange(column: string, direction: 'asc' | 'desc') {
-        setSort({ column, direction });
-        router.get(
-            customerIndex.url(),
-            {
-                page: 1,
-                per_page: pagination.per_page,
-                search,
-                sort: column,
-                direction,
-            },
-            {
-                preserveState: true,
-                replace: true,
-            },
-        );
-    }
-
     function handleDelete() {
         if (!deleting) {
             return;
@@ -254,8 +225,6 @@ export default function CustomerIndex({ customers }: Props) {
                     onPageChange={handlePageChange}
                     onPerPageChange={handlePerPageChange}
                     onSearchChange={handleSearchChange}
-                    onSortChange={handleSortChange}
-                    currentSort={sort}
                     searchValue={search}
                 />
 

resources/js/pages/admin/master/product/columns.tsx

@@ -1,6 +1,6 @@
 import type { ColumnDef } from '@tanstack/react-table';
 import { router } from '@inertiajs/react';
-import { ArrowUpDown, ChevronRight, Pencil, Trash2 } from 'lucide-react';
+import { ChevronRight, Pencil, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Switch } from '@/components/ui/switch';
 import {
@@ -145,18 +145,7 @@ export function createProductColumns(
         },
         {
             accessorKey: 'name',
-            header: ({ column }) => (
+            header: () => <span>Nama Produk</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Nama Produk</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => {
                 const product = row.original;
 
@@ -317,18 +306,7 @@ export function createProductColumns(
         },
         {
             accessorKey: 'status',
-            header: ({ column }) => (
+            header: () => <span>Status</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Status</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => {
                 const product = row.original;
                 const isToggleable =

resources/js/pages/admin/master/product/index.tsx

@@ -3,7 +3,7 @@ import type { Row } from '@tanstack/react-table';
 import { Filter, Plus, X } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
-import type { PaginationState, SortState } from '@/components/data-table';
+import type { PaginationState } from '@/components/data-table';
 import { DataTable } from '@/components/data-table';
 import { ImagePreviewModal } from '@/components/image-preview-modal';
 import { Button } from '@/components/ui/button';
@@ -189,11 +189,6 @@ export default function ProductIndex({ products, filters }: Props) {
     const [deleting, setDeleting] = useState<Product | null>(null);
     const [filterOpen, setFilterOpen] = useState(false);
     const [search, setSearch] = useState('');
-    const [sort, setSort] = useState<SortState>({
-        column: 'created_at',
-        direction: 'desc',
-    });
-
     const hasActiveFilters = filters.status || filters.name;
 
     const pagination: PaginationState = {
@@ -243,8 +238,6 @@ export default function ProductIndex({ products, filters }: Props) {
                 page,
                 per_page: pagination.per_page,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
                 ...filters,
             },
             { preserveState: true, replace: true },
@@ -258,8 +251,6 @@ export default function ProductIndex({ products, filters }: Props) {
                 page: 1,
                 per_page: perPage,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
                 ...filters,
             },
             { preserveState: true, replace: true },
@@ -275,32 +266,14 @@ export default function ProductIndex({ products, filters }: Props) {
                     page: 1,
                     per_page: pagination.per_page,
                     search: value,
-                    sort: sort.column,
-                    direction: sort.direction,
                     ...filters,
                 },
                 { preserveState: true, replace: true },
             );
         },
-        [pagination.per_page, sort, filters],
+        [pagination.per_page, filters],
     );
 
-    function handleSortChange(column: string, direction: 'asc' | 'desc') {
-        setSort({ column, direction });
-        router.get(
-            productIndex.url(),
-            {
-                page: 1,
-                per_page: pagination.per_page,
-                search,
-                sort: column,
-                direction,
-                ...filters,
-            },
-            { preserveState: true, replace: true },
-        );
-    }
-
     function handleDelete() {
         if (!deleting) {
             return;
@@ -437,8 +410,6 @@ export default function ProductIndex({ products, filters }: Props) {
                     onPageChange={handlePageChange}
                     onPerPageChange={handlePerPageChange}
                     onSearchChange={handleSearchChange}
-                    onSortChange={handleSortChange}
-                    currentSort={sort}
                     searchValue={search}
                     renderSubRow={(row, searchValue) => (
                         <VariantSubRow row={row} searchValue={searchValue} />

resources/js/pages/admin/master/supplier/columns.tsx

@@ -1,5 +1,5 @@
 import type { ColumnDef } from '@tanstack/react-table';
-import { ArrowUpDown, Pencil, Trash2 } from 'lucide-react';
+import { Pencil, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
     Tooltip,
@@ -39,18 +39,7 @@ export function createSupplierColumns(
         },
         {
             accessorKey: 'name',
-            header: ({ column }) => (
+            header: () => <span>Nama</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Nama</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span className="font-medium">
                     {row.getValue('name') as string}
@@ -59,36 +48,14 @@ export function createSupplierColumns(
         },
         {
             accessorKey: 'phone_number',
-            header: ({ column }) => (
+            header: () => <span>No. Telepon</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>No. Telepon</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span>{(row.getValue('phone_number') as string) ?? '-'}</span>
             ),
         },
         {
             accessorKey: 'address',
-            header: ({ column }) => (
+            header: () => <span>Alamat</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Alamat</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span className="block max-w-[200px] truncate">
                     {(row.getValue('address') as string) ?? '-'}

resources/js/pages/admin/master/supplier/index.tsx

@@ -3,7 +3,7 @@ import { Plus } from 'lucide-react';
 import { useCallback, useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
 import { DataTable } from '@/components/data-table';
-import type { PaginationState, SortState } from '@/components/data-table';
+import type { PaginationState } from '@/components/data-table';
 import InputError from '@/components/input-error';
 import { PhoneNumberInput } from '@/components/phone-number-input';
 import { Button } from '@/components/ui/button';
@@ -40,11 +40,6 @@ export default function SupplierIndex({ suppliers }: Props) {
     const [editing, setEditing] = useState<Supplier | null>(null);
     const [deleting, setDeleting] = useState<Supplier | null>(null);
     const [search, setSearch] = useState('');
-    const [sort, setSort] = useState<SortState>({
-        column: 'created_at',
-        direction: 'desc',
-    });
-
     const pagination: PaginationState = {
         current_page: suppliers.current_page,
         last_page: suppliers.last_page,
@@ -59,8 +54,6 @@ export default function SupplierIndex({ suppliers }: Props) {
                 page,
                 per_page: pagination.per_page,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             {
                 preserveState: true,
@@ -76,8 +69,6 @@ export default function SupplierIndex({ suppliers }: Props) {
                 page: 1,
                 per_page: perPage,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             {
                 preserveState: true,
@@ -95,8 +86,6 @@ export default function SupplierIndex({ suppliers }: Props) {
                     page: 1,
                     per_page: pagination.per_page,
                     search: value,
-                    sort: sort.column,
-                    direction: sort.direction,
                 },
                 {
                     preserveState: true,
@@ -104,27 +93,9 @@ export default function SupplierIndex({ suppliers }: Props) {
                 },
             );
         },
-        [pagination.per_page, sort],
+        [pagination.per_page],
     );
 
-    function handleSortChange(column: string, direction: 'asc' | 'desc') {
-        setSort({ column, direction });
-        router.get(
-            supplierIndex.url(),
-            {
-                page: 1,
-                per_page: pagination.per_page,
-                search,
-                sort: column,
-                direction,
-            },
-            {
-                preserveState: true,
-                replace: true,
-            },
-        );
-    }
-
     function handleDelete() {
         if (!deleting) {
             return;
@@ -254,8 +225,6 @@ export default function SupplierIndex({ suppliers }: Props) {
                     onPageChange={handlePageChange}
                     onPerPageChange={handlePerPageChange}
                     onSearchChange={handleSearchChange}
-                    onSortChange={handleSortChange}
-                    currentSort={sort}
                     searchValue={search}
                 />
 

resources/js/pages/admin/roles/columns.tsx

@@ -1,5 +1,5 @@
 import type { ColumnDef } from '@tanstack/react-table';
-import { ArrowUpDown, Pencil, Trash2 } from 'lucide-react';
+import { Pencil, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
     Tooltip,
@@ -38,18 +38,7 @@ export function createRoleColumns(
         },
         {
             accessorKey: 'name',
-            header: ({ column }) => (
+            header: () => <span>Nama Role</span>,
-                <Button
-                    variant="ghost"
-                    className="-ml-3 h-8"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === 'asc')
-                    }
-                >
-                    <span>Nama Role</span>
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            ),
             cell: ({ row }) => (
                 <span className="font-medium">
                     {row.getValue('name') as string}

resources/js/pages/admin/roles/index.tsx

@@ -3,7 +3,7 @@ import { Plus } from 'lucide-react';
 import { useCallback, useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
 import { DataTable } from '@/components/data-table';
-import type { PaginationState, SortState } from '@/components/data-table';
+import type { PaginationState } from '@/components/data-table';
 import { Button } from '@/components/ui/button';
 import {
     index as rolesIndex,
@@ -27,11 +27,6 @@ type Props = {
 export default function RoleIndex({ roles }: Props) {
     const [deleting, setDeleting] = useState<Role | null>(null);
     const [search, setSearch] = useState('');
-    const [sort, setSort] = useState<SortState>({
-        column: 'created_at',
-        direction: 'desc',
-    });
-
     const pagination: PaginationState = {
         current_page: roles.current_page,
         last_page: roles.last_page,
@@ -46,8 +41,6 @@ export default function RoleIndex({ roles }: Props) {
                 page,
                 per_page: pagination.per_page,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -60,8 +53,6 @@ export default function RoleIndex({ roles }: Props) {
                 page: 1,
                 per_page: perPage,
                 search,
-                sort: sort.column,
-                direction: sort.direction,
             },
             { preserveState: true, replace: true },
         );
@@ -76,30 +67,13 @@ export default function RoleIndex({ roles }: Props) {
                     page: 1,
                     per_page: pagination.per_page,
                     search: value,
-                    sort: sort.column,
-                    direction: sort.direction,
                 },
                 { preserveState: true, replace: true },
             );
         },
-        [pagination.per_page, sort],
+        [pagination.per_page],
     );
 
-    function handleSortChange(column: string, direction: 'asc' | 'desc') {
-        setSort({ column, direction });
-        router.get(
-            rolesIndex.url(),
-            {
-                page: 1,
-                per_page: pagination.per_page,
-                search,
-                sort: column,
-                direction,
-            },
-            { preserveState: true, replace: true },
-        );
-    }
-
     function handleDelete() {
         if (!deleting) {
             return;
@@ -146,8 +120,6 @@ export default function RoleIndex({ roles }: Props) {
                     onPageChange={handlePageChange}
                     onPerPageChange={handlePerPageChange}
                     onSearchChange={handleSearchChange}
-                    onSortChange={handleSortChange}
-                    currentSort={sort}
                     searchValue={search}
                 />