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

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

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

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

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

Repovive

Data Model - Data Table Design | Frontend System Design Interview Prep | Repovive

Repovive.

Frontend System Design Interview Prep17 sections · 206 units12h total

Open in Course

Data Model

Managing table state

Table state includes data and UI configuration.

State structure:

{
  data: [...],  // Raw data
  columns: [
    { id: 'name', header: 'Name', sortable: true },
    { id: 'email', header: 'Email', filterable: true }
  ],
  sorting: { column: 'name', direction: 'asc' },
  filters: { status: 'active' },
  pagination: { page: 0, pageSize: 25 },
  selection: new Set(['row1', 'row3'])
}

Derived data: Compute filtered, sorted, paginated rows from raw data. Don't store derived state.