diff --git a/CLAUDE.md b/CLAUDE.md index d0a2f23c..06bbd33d 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -161,6 +161,45 @@ const handleFilterLocationChange = useCallback( - `SupplierTable`, `KandangsTable`, `LocationsTable`, `CustomersTable` in `src/components/pages/master-data/` - Use same pattern for data tables in other modules (inventory, finance, purchase, etc.) +## Server-side sorting pattern + +Data tables use TanStack Table's `SortingState` wired to `useTableFilter` so that sorting triggers a server re-fetch rather than client-side reordering. + +**Four-part wiring:** + +1. **Local sort state** — `const [sorting, setSorting] = useState([]);` + +2. **`useTableFilter` config** — Add `sort_by` and `order_by` to `initial` and `paramMap`. The `paramMap` key is the internal name; the value is the query param name sent to the server (they can differ, e.g. `order_by` → `sort_order`): + + ```ts + initial: { sort_by: '', order_by: '' } + paramMap: { sort_by: 'sort_by', order_by: 'sort_order' } + ``` + +3. **`useEffect` sync** — Watches `sorting` and pushes changes into `useTableFilter`: + + ```ts + useEffect(() => { + if (sorting.length > 0) { + updateFilter('sort_by', sorting[0].id, true); + updateFilter('order_by', sorting[0].desc ? 'desc' : 'asc', true); + } else { + updateFilter('sort_by', ''); + updateFilter('order_by', ''); + } + }, [sorting]); + ``` + +4. **SWR key** — SWR uses `getTableFilterToQueryString()` as its key, so any filter change (including sort) automatically re-fetches with the new query params. TanStack Table's built-in client sorting is effectively disabled; the server does the sorting. + +**Pass `sorting` / `setSorting` to ``:** + +```tsx +
+``` + +**Reference implementation:** `MarketingTable` in [src/components/pages/marketing/MarketingTable.tsx](src/components/pages/marketing/MarketingTable.tsx). + ## Server-side file export pattern All file exports (Excel, PDF, or any format) must use **server-side generation** — the server returns a binary blob and the browser triggers a download. Never generate files client-side with `xlsx`, `@react-pdf/renderer`, `jspdf`, or similar libraries.