How We Built a High‑Performance React Big Data Table with AntV S2

Guide

In Ant Group’s big‑data development platform, a JavaScript spreadsheet similar to a simple Excel workbook is required to display and manipulate tens of thousands of SQL query results, with features such as filtering, sorting, searching, copying, selection, aggregation, and manual data entry.

Business Scenario

Dataphin, an internal big‑data platform, uses data tables extensively, especially for displaying computation task results in the research module.

Why AntV S2?

Canvas‑based rendering offers higher performance than DOM for complex, interactive tables because it bypasses the costly DOM layout and style calculations. A market analysis of existing Excel‑like components (SpreadJS, LuckySheet, Handsontable, etc.) showed limitations in cost, extensibility, or performance, leading us to adopt the open‑source AntV S2 engine.

Table Features Demonstration

Key functionalities include row/column freezing, searching, filtering, sorting, selection, and copying, as illustrated by the following screenshots.

Implementation Details

1. Cell Editing

Cell editing is implemented using a DOM overlay on top of the Canvas. A mask component calculates the correct position and size based on the spreadsheet container and scroll offset, then renders a textarea for user input.

const EditableMask = () => {
  const { left, top, width, height } = useMemo(() => {
    const rect = (spreadsheet?.container.cfg.container as HTMLElement).getBoundingClientRect();
    return {
      left: window.scrollX + rect.left,
      top: window.scrollY + rect.top,
      width: rect.width,
      height: rect.height,
    };
  }, [spreadsheet?.container.cfg.container]);
  return (
    <div className="editable-mask" style={{
      zIndex: 500,
      position: 'absolute',
      left,
      top,
      width,
      height,
    }}/>
  );
};

The double‑click event DATA_CELL_DOUBLE_CLICK provides the cell’s coordinates and value, which are used to position the textarea. After editing, the onBlur or Enter event updates spreadsheet.originData and fires a custom event.

2. Brush Selection

Brush selection tracks StartBrushPoint , EndBrushPoint , and BrushRange . When the mouse moves outside the canvas, automatic scrolling is triggered, and the end point is clamped to the canvas edge. Direction detection (leading/trailing on X/Y) determines the scroll offset.

3. Virtual Scrolling

Only cells within the visible viewport are rendered. The visible range [xMin, xMax, yMin, yMax] is computed from row/column info and scroll offset. A diff algorithm determines which cells to add or remove, and Canvas API updates the scene accordingly.

export const diffPanelIndexes = (sourceIndexes, targetIndexes) => {
  const allAdd = [];
  const allRemove = [];
  Object.keys(targetIndexes).forEach(key => {
    const { add, remove } = diffIndexes(sourceIndexes?.[key] || [], targetIndexes[key]);
    allAdd.push(...add);
    allRemove.push(...remove);
  });
  return { add: allAdd, remove: allRemove };
};

4. Frozen Rows & Columns

Four groups— frozenRowGroup, frozenColGroup, frozenTrailingRowGroup, frozenTrailingColGroup —store cells that remain fixed during scrolling. During translation, each group receives a single‑axis offset, while the main panel scrolls freely.

5. Custom Column Header

By extending TableDataCell and overriding drawActionIcon, custom icons (e.g., Excel‑style triangle) are drawn. Column headers are also grouped similarly to rows for frozen behavior.

import { TableDataCell } from '@antv/s2';
class S2Cell extends TableDataCell {
  private drawActionIcon() {
    // custom Canvas drawing logic
  }
}
export default S2Cell;

6. Filtering & Sorting

Filtering uses DataCfg.filterParams with a FilterParam interface. Two filter modes are provided: numeric filtering with a checkbox list and expression filtering that supports unary and binary operators combined by AND/OR.

export interface FilterParam {
  filterKey: string;
  filteredValues?: unknown[];
}

Sorting is configured via DataCfg.sortParams and is mutually exclusive across columns.

7. Searching

Search traverses the dataset to locate matching cells, then uses facet.scrollWithAnimation to bring the target cell into view.

8. Copy to Clipboard

Copying assembles cell values with tab ( \t) and newline ( \r\n) delimiters. For large datasets, the modern navigator.clipboard API is preferred, falling back to document.execCommand('copy') when necessary.

export const copyToClipboard = (str, sync = false) => {
  if (!navigator.clipboard || sync) {
    return copyToClipboardByExecCommand(str);
  }
  return copyToClipboardByClipboard(str);
};

Results

Switching ten tabs now takes ~80 ms (6× faster than the previous SpreadJS solution). Rendering 50 k rows completes in about 1 s, an eight‑fold improvement. The component also offers full UI customisation, open‑source extensibility, and a lightweight data model.

Conclusion

By leveraging AntV S2, we built a performant, extensible React data‑grid that replaces costly commercial solutions. Future work includes adding advanced cell editing, complex sorting, multi‑level headers, and aggregation features to the s2‑react package.

References

GitHub: https://github.com/antvis/s2

Official site: https://s2.antv.vision/

npm: @antv/s2

npm: @antv/s2-react