#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/data-table-design/sorting-implementation

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░███████████████████████████████████████████████████████████████████████████████████████████████████████████

#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/data-table-design/sorting-implementation

Repovive

Sorting Implementation - Data Table Design | Frontend System Design Interview Prep | Repovive

Repovive.

Frontend System Design Interview Prep17 sections · 206 units12h total

Open in Course

Sorting Implementation

Column sorting

Sorting should be intuitive and fast.

Click behavior:

$1.$ First click: Sort ascending

$2.$ Second click: Sort descending

$3.$ Third click: Remove sort (optional)

Implementation:

const sortedData = useMemo(() => {
  if (!sorting) return data;
  return [...data].sort((a, b) => {
    const aVal = a[sorting.column];
    const bVal = b[sorting.column];
    const cmp = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
    return sorting.direction === 'asc' ? cmp : -cmp;
  });
}, [data, sorting]);

Multi-column sort: Support Shift+click for secondary sort.