feat: implement server-side sorting

src/components/pages/expense/ExpensesTable.tsx

@@ -1,18 +1,13 @@
 'use client';
 
-import {
-  ChangeEventHandler,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
 import useSWR from 'swr';
 import {
   CellContext,
   ColumnDef,
   Row,
   SortingState,
+  Updater,
 } from '@tanstack/react-table';
 import toast from 'react-hot-toast';
 
@@ -47,7 +42,8 @@ import { BaseApiResponse } from '@/types/api/api-general';
 
 type ExpenseTableFilters = {
   search: string;
-  nameSort: string;
+  sort_by: string;
+  order_by: string;
   transactionDate: string;
   realizationDate: string;
   locationId: string;
@@ -242,7 +238,8 @@ const ExpensesTable = () => {
       page: 1,
       pageSize: 10,
       search: '',
-      nameSort: '',
+      sort_by: '',
+      order_by: '',
       transactionDate: '',
       realizationDate: '',
       locationId: '',
@@ -261,7 +258,8 @@ const ExpensesTable = () => {
     paramMap: {
       page: 'page',
       pageSize: 'limit',
-      nameSort: 'sort_name',
+      sort_by: 'sort_by',
+      order_by: 'sort_order',
       transactionDate: 'transaction_date',
       realizationDate: 'realization_date',
       locationId: 'location_id',
@@ -319,7 +317,26 @@ const ExpensesTable = () => {
   const [exportProgressStartDate, setExportProgressStartDate] = useState('');
   const [exportProgressEndDate, setExportProgressEndDate] = useState('');
 
-  const [sorting, setSorting] = useState<SortingState>([]);
+  const sorting: SortingState = tableFilterState.sort_by
+    ? [
+        {
+          id: tableFilterState.sort_by,
+          desc: tableFilterState.order_by === 'desc',
+        },
+      ]
+    : [];
+
+  const handleSortingChange = (updater: Updater<SortingState>) => {
+    const next = typeof updater === 'function' ? updater(sorting) : updater;
+    if (next.length > 0) {
+      updateFilter('sort_by', next[0].id, true);
+      updateFilter('order_by', next[0].desc ? 'desc' : 'asc', true);
+    } else {
+      updateFilter('sort_by', '', true);
+      updateFilter('order_by', '', true);
+    }
+  };
+
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
   const selectedRowIds = Object.keys(rowSelection).map((item) =>
     parseInt(item)
@@ -437,10 +454,12 @@ const ExpensesTable = () => {
       cell: (props) => props.row.original.location?.name ?? '-',
     },
     {
+      accessorKey: 'created_user',
       accessorFn: (row) => row.created_user.name ?? '-',
       header: 'Nama Pengaju',
     },
     {
+      accessorKey: 'supplier',
       accessorFn: (row) => row.supplier.name ?? '-',
       header: 'Uraian',
     },
@@ -454,17 +473,20 @@ const ExpensesTable = () => {
     },
     {
       header: 'Status Pencairan',
+      enableSorting: false,
       cell: (props) => (
         <RealizationStatusBadge approval={props.row.original.latest_approval} />
       ),
     },
     {
       header: 'Status BOP',
+      enableSorting: false,
       cell: (props) => (
         <ExpenseStatusBadge approval={props.row.original.latest_approval} />
       ),
     },
     {
+      accessorKey: 'is_paid',
       header: 'Status Lunas',
       cell: (props) => {
         return (
@@ -478,6 +500,14 @@ const ExpensesTable = () => {
         );
       },
     },
+    {
+      accessorKey: 'created_at',
+      header: 'Tanggal Dibuat',
+      cell: (props) =>
+        props.row.original.created_at
+          ? formatDate(props.row.original.created_at, 'DD MMM YYYY')
+          : '-',
+    },
     {
       header: 'Aksi',
       cell: (props) => {
@@ -882,17 +912,6 @@ const ExpensesTable = () => {
     }
   }, [getTableFilterQueryString]);
 
-  // track sorting
-  useEffect(() => {
-    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
-
-    if (!isNameSorted) {
-      updateFilter('nameSort', '', false);
-    } else {
-      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
-    }
-  }, [sorting, updateFilter]);
-
   return (
     <>
       <div className='w-full'>
@@ -1051,7 +1070,8 @@ const ExpensesTable = () => {
                 'page',
                 'pageSize',
                 'search',
-                'nameSort',
+                'sort_by',
+                'order_by',
                 'userId',
                 'locationName',
                 'vendorName',
@@ -1152,7 +1172,8 @@ const ExpensesTable = () => {
               onPageSizeChange={setPageSize}
               isLoading={isLoading}
               sorting={sorting}
-              setSorting={setSorting}
+              setSorting={handleSortingChange}
+              manualSorting
               rowSelection={rowSelection}
               setRowSelection={setRowSelection}
               enableRowSelection={tableEnableRowSelectionHandler}