The six best react table components are recommended for detailed personal testing

Time:2022-6-8

This article is the first Kara cloud technology blog: “detailed personal test recommendations for the six best react table components”

In daily development, especially in the background system used internally, we often need to use tables to display data, and provide some operations to operate the data in the tables. It is good to use the native HTML table directly for simple tables, but it is not easy to implement a table with rich functions in react.

Selecting a table library can greatly simplify our development. In this article, we will take a detailed look at the best table libraries in react and how to select them to meet your needs.

How to select react table component library

React has many table libraries, but the quality of most of them is not good. There is already a table tag in native HTML, so why can’t you use it directly in react?

The answer is that, in general, the functions that need to be implemented in the table are far more than the native functions<table>As a result, tables have been redesigned in various UI libraries and open source frameworks. Even in these form libraries, you may not seetableThe shadow of this label.

So, how to select an easy-to-use react table library?

First, the most important thing is to specify what functions your users need. For example, if users need to load more than 10000 rows of data at a time, they almost always need virtualized tables, or at least virtualized tables. For example, if your users need to sort by column or exchange column order, the corresponding table components must also support these functions.

Common table functions include

  • Row selection
  • Click to trigger operation (such as loading data)
  • Export data
  • Filter by column
  • search
  • Bind and display data (such as the result data of HTTP query)
  • Adjust styles, such as column colors
  • Rename column
  • Adjust column order
  • Paging, navigation

wait

Unfortunately, it is not easy to find a component library that supports all functions. We suggest that if you are not sure, you can quickly find several libraries in this article and try to select one with the most complete coverage.

Of course, if you are developing an internal system, but the internal system itself is only to help the company’s business rather than the company’s business itself, you can also directly try to use karayun. The built-in tables with extremely rich functions, together with other rich components, can enable you to quickly build a useful background system. For the common functions mentioned above, the built-in tables of Kara cloud are all natively supported.

In the following sections, we will introduce several good react table frameworks.

AntD Table

Antd is an open-source front-end framework of ant financial, which contains a table component. The table component itself is developed on the basis of RC table, andrc-tableMost of the maintainers of antd are also several maintainers of antd, such asafc163AndyimingheEtc.

The code quality of antd itself is very high, and the benefits of using it are very obvious, including

  1. Rich functionality

The antd table has rich functions, including sorting by column, row filtering, compact display, fixed header, etc. In the documents of antd, there are dozens of configurable items alone. It is conceivable that they have rich functions.

  1. Clear documentation

The documentation of the antd table is also very clear. Except for some detailed options, most other options have clear instructions to help rapid development.

  1. Strong (Chinese) community

Antd has been one of the most popular projects on GitHub. At the same time, it is not only popular, but also widely used. Such a community will accelerate the development of the component itself, because if there is a problem, you can always get some support and help from the community.

Of course, the disadvantages of using antd table are also obvious. Because of its complexity, it needs a very solid front-end foundation to add functions to it.

At the same time, antd itself uses less to adjust the style, so if you want to use css/scss to adjust the style of the table, it will be more painful. However, it should be pointed out that this is not the problem of antd itself. Using the front-end framework to adapt to specific requirements will encounter similar situations.

Another problem is that if other components of your project are not using antd, adding an antd table will import the entire UI library, significantly increasing the size of the bundle by one order of magnitude. Of course, there are some methods that can be bypassed, but after all, it takes time and energy to adjust. If other components in your project do not need to use components in ant, you can consider using RC table directly, which is also the basic component of antd.

To sum up, the table component of antd is a good choice. If you need to use table alone, you can also use RC table directly

React Table

React table is a special existence. It can be said to be an F-22 fighter among all the table components. It contains a large number of functions and can almost customize infinitely complex table requirements. A large number of front-end projects of GitHub, Amazon, Microsoft and Uber are using react table in large quantities.

Its author is also a legend. He not only created react table, but also such popular super open source projects as react query and react charts.

The design concept of react table is different from that of all other component librariesDoes not contain any stylesInstead, it consists of a lot of react hooks. These hooks provide some functions commonly needed in tables, such as row and column merging, column width adjustment, selecting rows and columns, and so on.

Because its design idea is only responsible for logic, you must have a strong front-end ability (mainly CSS) and a deep grasp of hook in order to use it skillfully. However, having said that, because react table only focuses on logic, it can achieve the logic of so many table operations incisively and vividly. Compared with other component libraries, react table has more functions than any other component library. Therefore, for large or complex projects, react table is very attractive to developers.

At present, the official version of react table is version 7, and version 8 is under alpha test.

If the requirements of your project are complex and you have a good understanding of hook, we suggest that you abandon other libraries and use react table directly. Of course, karayun’s table library is developed based on react table, so if you are too lazy to write your own style, you can also use karayun directly.

Table components of karayun

In the Kara cloud, we have built-in table components. Drag a table from the component list to create a table and start detailed table settings. For example, in the following figure, we directly display the image in a column whose original data is the image URL.

At the same time, in the setting bar on the left, you can also directly hide columns, exchange column order, adjust column background color, and adjust table style. Among the table functions mentioned above, the following can be realized directly through simple configuration

  • Row selection
  • Click to trigger operation (such as loading data)
  • Export data
  • Filter by column
  • search
  • Bind and display data (such as the result data of HTTP query)
  • Adjust styles, such as column colors
  • Rename column
  • Adjust column order
  • Paging, navigation

Even some advanced functions that require back-end cooperation, such as page turning on the server, etc. Please refer to the karayun form for the documentation of karayun form. If you are interested in karayun, you are welcome to try it here for free.

RC-Table

RC table is a table component. It is worth noting that it is the basis of the antd table component described above. Therefore, its function is a subset of the antd table, but it also completely implements some common operations in the table.

Note that if you need some complex operations, such as row filtering, you need to add your own logic. RC table is more like a Swiss Army knife. It does not have all inclusive functions, but it handles the relationship among rows, columns and headers as a table component.

RC table is very suitable for situations where you only need one table component, but do not need the entire ant component.

Material UI Table

The name of material UI is not enough. Ant is the most popular framework in China, but the most popular framework abroad is material UI.

The table function in the material UI is moderately rich, which can meet some common needs, such as

  • sort
  • Select single or multiple rows
  • Page turning
  • Virtualized tables

However, for functions such as column width setting, customization, and renaming columns, you need to develop them yourself.

Generally speaking, the table in the material UI is a regular existence. If you don’t particularly like flattening or are using Mui, we suggest using the table in karayun or antd directly.

Ali-react-table

Ali react table is a table component designed specifically for high-performance scenarios. Its original design intention is to embed virtualization, which can maximize the performance of tables when a large amount of data is loaded.

If your usage scenario is that a large amount of data (more than 10000 lines) will be loaded at a time without page flipping, and the user will not get stuck when using, you can considerali-react-table。 But in addition, the library is not very rich in functions, so such “nuclear level” performance may not be a hard requirement for most developers.

Another thing to consider is that the project has been updated for more than one year. Therefore, if it is necessary to maintain community activity, it may be necessary to consider the other databases above.

React Virtualized

Strictly speaking, react virtualized is not a table library. On the contrary, it is a special library used to virtualize and display data in tables when there is a large amount of data.

Of course, in the context of virtualization, the most common are large lists and tables. Therefore, react virtualized also includes a layer of table components. Similar to Ali react table, if your main concern is not performance, I suggest you skip react virtualized and use one of the first three components in this article.

summary

This article introduces the table components in several UI libraries, such as react table, antd table, karayun table, material UI table, Ali react table and react virtualized, and introduces their advantages and disadvantages respectively, hoping to help you select table components. If you find it useful, please forward and share this article, or link back this article in your blog.

If you are interested in karayun, please try it or continue to follow our technology blog