TanStackIntermediate

Sorting — Server-side

sortBy/sortOrder state, table header click ও query param — বাংলায়।

7টি অংশবাংলা ভাষায়

বড় dataset-এ sorting server-side (API-তে) করাই ভালো — সব ডেটা client-এ আনা লাগে না। তাই sortBy ও sortOrder state-এ রাখব।

Dashboard-এ sorting statetsx

tsx

const [sortBy, setSortBy] = useState<SortableField>("createdAt");
const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");

// params-এ যুক্ত
const params: ProductQueryParams = {
  page,
  pageSize,
  search: search || undefined,
  sortBy,
  sortOrder,
};

// কলামে ক্লিকে toggle
const toggleSort = (field: SortableField) => {
  if (sortBy === field) {
    setSortOrder((o) => (o === "asc" ? "desc" : "asc"));
  } else {
    setSortBy(field);
    setSortOrder("asc");
  }
  setPage(1);
};

Header-এ sort indicator

Sortable headertsx

tsx

// শুধুমাত্র সার্ভার-সেমিট্যান্ট কলামে ক্লিকযোগ্য header
<button onClick={() => toggleSort("price")} className="flex gap-1">
  Price
  {sortBy === "price" && (
    <ArrowUpDown className="size-3.5" />
  )}
</button>

Client-side vs Server-side sorting

বিষয়	Client-side	Server-side
ডেটা	পুরো list client-এ	শুধু current page
Performance	ছোট list-এ ভালো	লাখ-লাখ row-এ ভালো
Set up	TanStack Table নিজেই করে	আমরা sort state manage করি
এই project	— নয়	✓ (server-side)

সর্বদা index?

সার্ভার-সাইড sorting নির্ভর করে API-র ধারণ ক্ষমতার উপর — ডাটাবেজে sort column-এ index থাকা ভালো। DB-level detail Express/PostgreSQL docs-এ বিস্তারিত।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।