Basic introduction

S2 is the data table visualization engine launched by AntV team, which aims to provide high performance, easy to expand, beautiful and easy to use multidimensional tables. Not only has the rich analysis table form, but also built-in rich interaction ability, to help users better look at the number and make decisions.

Ordinary Table is a component used to display a large amount of structured data. Antd Table has good built-in interaction and implementation when complex behaviors such as sorting, searching, paging and custom operation of data are needed.

Functional analysis

Both can be used to display column data, and both have very good interaction and performance. Before technical selection, it is necessary to have a comprehensive understanding of the functions and characteristics of the two forms. The following is the sorting of the functions and characteristics of the two forms.

Antd Table

Used to introduce

Need dataSource and columns. Rendering the table requires data and column configuration.

<Table dataSource={dataSource} columns={columns} />
Copy the code

Cell contents

Antd Table cells can be rendered customarily by printing the React DOM in the render function. The user can render any form in the cell, such as links, tags, images, checkboxes, etc.

Can choose

Antd Table has built-in rowSelection, which can be realized by adding rowSelection

<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
Copy the code

The ranks of merging

In the columns configuration, the onCell callback is used to set the colSpan value, 0 for no rendering and 2 for rendering 2 columns.

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    render: (text, row, index) => <a>{text}</a>,
    onCell: (_, index) => ({
      colSpan: index < 4 ? 1 : 5,
    }),
  }
 ]
Copy the code

Tree form

Add children to dataSource.

const data = [
  {
    key: 1,
    name: 'John Brown sr.',
    age: 60,
    address: 'New York No. 1 Lake Park',
    children: [
      {
        key: 11,
        name: 'John Brown',
        age: 42,
        address: 'New York No. 2 Lake Park',
      }
    ]
  }
]
Copy the code

Frozen line head

This is done by setting scroll coordinates, such as:

<Table columns={columns} dataSource={data} scroll={{ x: 100, y: 240 }}
Copy the code

That is, the y-scroll axis starts at 240 and the x-scroll axis starts at 100.

In addition, Antd Table can also achieve sorting, filtering, expansion, Table header grouping, editing cells, custom Table header and Table tail and other functions, more refer to the official website documentation.

AntV S2

Used to introduce

Similarly, preparation data (dataCfg) and configuration (Option) render the initial PivotTable.

Const s2 = new PivotSheet(DOM, dataConfig, options) <SheetComponent dataCfg={dataConfig} options={options} /> /Copy the code

form

S2 provides two forms of “detail” and “Perspective”, and the detail form is similar to Antd Table:

Two base classes can be exported from the @ANTV/S2 package for use: PivotSheet and TableSheet.

For react applications, export components from @antv/ s2-React and use the sheetType parameter to differentiate between rendered tables.

interaction

S2 provides the ability to hover, click, select all, adjust layout, merge cells, link jump, hide columns and so on. It also provides an open interface for developers to customize.

Analysis ability

S2 provides conditional formatting, drill-down, sorting, export, row switching and other functions

The theme

Practical services often need to customize business themes. S2 has three built-in themes: default, colorful blue, and simple gray. Users can also customize the palette for quick customization of theme packs.

performance

S2 chooses Canvas as the rendering subject to ensure rich interaction and cross-platform compatibility, providing high-performance rendering in big data scenarios. On-demand rendering, virtual scrolling and other methods can ensure second-level rendering and scrolling without delay even with millions of levels of data.

AntV S2 also allows for custom layouts, themes, rendering, and more, with a rich extension mechanism that allows you to change almost anything you see. See the official documentation for more information.

Both comparisons

AntV S2 and Antd Table are compared from many aspects, hoping to provide some standards of technology selection to you.

Canvas and HTML dom

S2 is a Canvas Table rendered by @ANTV/G, and Antd Table is a Table realized by HTML DOM. The difference between the two can correspond to the difference between Canvas and HTML DOM.

The most obvious difference is that they handle events differently. HTML DOM can accurately monitor any DOM event, while Canvas can only monitor the event of the outermost canvas, which needs to be realized through event delegate to determine the current click target.

Another difference is performance. When the data volume is large (such as 10W + level), THE HTML DOM rendering speed decreases as complexity increases. Canvas because there is only one DOM repeated rendering is low, time consuming in internal calculation and canvas drawing. Therefore, canvas performance is better in big data scenarios.

Antd Table 10W

AntV S2 10W performance:

There are also some other differences between the two. For example, Canvas relies on resolution, can be saved to PNG, and is suitable for image-intensive scenes.

Interaction ability

Antd Table supports row selection, filtering, sorting, etc., which can meet basic requirements.

AntV S2 supports hover cross positioning, single selection, multiple selection, circle selection, brush selection, drag and drop to adjust the height and width of the row, providing drilling, sorting, export and other functions.

In contrast, Antd Table provides basic interaction functions, while AntV S2 provides advanced interaction functions that can be customized for registered user interactions.

How to do the technology selection

Antd Table is suitable for ordinary detailed tables, if you are a background management system, if your design draft and Antd Table official website examples are not much different, directly use Antd Table.

In what cases can S2 be chosen?

  • When you need perspective mode, choose S2.
  • Select S2 when you need a lot of interaction, such as hover cross, circle selection, row selection, etc.
  • When you need analytical capabilities such as conditional formatting, drill-down filtering, advanced sorting, etc., choose S2.
  • When you need a professional data analysis form, you can choose S2.
  • If you don’t know if you need S2, then you don’t need S2.

conclusion

The selection of table technology has been shared. In short, once you understand the features of both, choose the technology that will help you better meet your business needs and achieve your development goals faster. If you have any doubts about AntV S2’s features and whether it can be implemented, you can click on the “User exchange group” and all developers will answer your questions online.

Finally, if you have gained something after reading this article, welcome to give encouragement to our warehouse star 🌟🌟🌟🌟, thank You.

Reference links:

  • S2 website
  • S2 1.0: This table is “not easy”
  • Use AntV S2 to create big data table components
  • How to quickly draw a high performance, interactive and beautiful multidimensional analysis cross table