How to Build a Fast House‑Selection Dashboard with AntV S2 in React

Background

After more than a year of lottery draws, I finally received a notification that I had won a house from a popular developer. The sales consultant warned that the on‑site selection window would be extremely short, so I needed a quick reference sheet to filter out unsuitable units from over a thousand listings within minutes.

Knowledge Expansion

Multi‑dimensional tables, also known as pivot tables, are two‑way tables that can construct, aggregate, and display large amounts of data. AntV/S2 provides both cross‑tables and ordinary tables to meet these needs.

Cross Table

Ordinary Table

Building the Visualization Demo

Data Preparation

The following dimensions are collected from the developer and the internet: 楼栋, 单元, 房号, 楼层, 房屋类型, 是否临街, 朝向, and 面积.

Data Sample

[
  {
    "name": "21#",
    "unit": "1单元",
    "building": 1,
    "level": 2,
    "property": "公寓",
    "nearStreet": false,
    "toward": "东",
    "area": 111,
    "score": 7
  },
  {
    "name": "21#",
    "unit": "1单元",
    "building": 2,
    "level": 12,
    "property": "住宅",
    "nearStreet": true,
    "toward": "东",
    "area": 123,
    "score": 7
  },
  ...
]

Initialize the Table

Use S2 to quickly build the report.

Code Implementation

import React from "react";
import ReactDOM from "react-dom";
import { SheetComponent } from "@antv/s2-react";
import "@antv/s2-react/dist/style.min.css";

// 1. Options
const s2Options = {
  width: 700,
  height: 580,
};

// 2. Data configuration
const dataCfg = {
  data: data, // houses.json
  describe: 'How to use S2 for house selection',
  fields: {
    rows: ['name', 'unit', 'building', 'level', 'nearStreet', 'toward', 'property'],
    columns: [],
    values: ['area'],
  },
  meta: [
    { field: 'name', name: '楼栋' },
    { field: 'unit', name: '单元号' },
    // ...
  ],
};

ReactDOM.render(
  <SheetComponent dataCfg={dataCfg} options={s2Options} />,
  document.getElementById('container')
);

Result

Filter Housing Units

List selection requirements and use Ant Design Select to implement a filter.

Requirements

House type must be 住宅 (apartment) with sufficient sunlight.

Must be 不临街 (not facing the street) to reduce noise.

Area between 100 and 130 m².

Floor level between 6 and 30, preferring 2/3 of the building height.

View Summary with Pagination

Use S2's pagination to view the count of ideal units in real time.

Code Implementation

const s2Options = {
  width: 700,
  height: 580,
  pagination: {
    pageSize: 50,
    current: 1,
  },
};

ReactDOM.render(
  <SheetComponent dataCfg={dataCfg} options={s2Options} showPagination={true} />,
  document.getElementById('container')
);

Result

Sort Data for Clarity

Enable group sorting on building, unit, house number, and floor.

Code Implementation

const header = {
  advancedSortCfg: { open: true },
};

const dataCfg = {
  ...,
  sortParams: [
    { sortFieldId: 'name', sortMethod: 'ASC' },
    { sortFieldId: 'unit', sortMethod: 'ASC' },
    {
      sortFieldId: 'level',
      sortFunc: (params) => {
        const { data } = params;
        return data.sort((a, b) => {
          const aNum = last(a.split(ID_SEPARATOR));
          const bNum = last(b.split(ID_SEPARATOR));
          return bNum - aNum;
        });
      },
    },
  ],
};

ReactDOM.render(
  <SheetComponent dataCfg={dataCfg} options={s2Options} />,
  document.getElementById('container')
);

Result

Highlight Ideal Units

Use field‑marking to pin the most desirable houses.

Code Implementation

const s2Options = {
  width: 700,
  height: 580,
  pagination: { pageSize: 50, current: 1 },
  conditions: {
    background: [
      {
        field: 'area',
        mapping(value) {
          if (value === 123 || value === 119) {
            return { fill: '#b8e1ff' };
          }
          return { fill: '#fff' };
        },
      },
    ],
  },
};

ReactDOM.render(
  <SheetComponent dataCfg={dataCfg} options={s2Options} header={header} />,
  document.getElementById('container')
);

Result

Selection Priorities

Only 149 units meet the strict criteria. They are recorded as the first priority. Subsequent, looser criteria produce second and third priority groups.

First Priority (149) : 21#2‑1 (26‑30 m²), 22#1‑2 (6‑30 m²), …

Second Priority (237) : 15#1‑3 (24‑29 m²), 15#1‑4 (22‑29 m²), …

Go Select the House

Armed with the filtered list, I went to the site and successfully secured a unit from the second‑priority group.