react和react2_React物料表简介-CSDN博客

react和react2

material-table is a relatively new addition to the suite of libraries providing data table functionality in React. The particular claims to fame for material-table is that it is quick to get running and built on Material-UI. In this intro to material-table, I’ll implement a few material-table examples and discuss the pros and cons.

material-table是在React中提供数据表功能的库套件中相对较新的功能。在Material-Table上成名的特殊说法是它可以快速运行并基于Material-UI构建。在本材料表简介中，我将实现一些材料表示例，并讨论其优缺点。

First, some stats:

首先，一些统计信息：

The first material-table version was released in 2018.
第一个材料表版本于2018年发布。
As of writing this, material-table runs about 100k weekly downloads (one-quarter of react-table).
撰写本文时，材料表每周运行约10万次下载(React表的四分之一)。
292KB unpacked size (one-third of react-table) but it does require Material-UI, which is pretty hefty.
解压缩后的大小为292KB(占表的三分之一)，但它确实需要Material-UI，这非常庞大。

So we’ve got a table that is relatively popular (read: good community support) and, if you’re already using MUI in your app, material-table doesn’t add too much additional weight. From here, let’s dive into actual code. I will investigate the following:

因此，我们有了一个相对受欢迎的表格(阅读：良好的社区支持)，并且，如果您已经在应用程序中使用了MUI，则材质表不会增加太多额外的重量。从这里开始，让我们深入研究实际代码。我将调查以下内容：

How quickly can I spin up the most basic table?
我多快可以启动最基本的桌子？
How quickly can we add a few out-of-the-box features? I will add an action and override a component. These are the first two features listed in the docs. I will also add styling because that will be almost universally desired.
我们多快可以添加一些现成的功能？我将添加一个动作并覆盖一个组件。这些是文档中列出的前两个功能。我还将添加样式，因为这几乎是普遍希望的。
How quickly can I find a solution to some kind of customization I want to do? I decided I simply wanted to remove the title but not the search box.
我要多快才能找到想要进行某种定制的解决方案？我决定只想删除标题，而不要删除搜索框。

Here’s the final code sandbox. We’ll build it together in the steps below.

这是最终的代码沙箱。我们将在以下步骤中一起构建它。

material-table example

物料表示例

If you prefer live coding with commentary, I embedded a video at the end in the Resources section. I also include a gist with the final code there.

如果您喜欢带有注释的实时编码，我将在最后的“资源”部分中嵌入一个视频。我还将在最后的代码中包含要点。

基本材料表 (A Basic material-table)

I’d peg spinning up the most basic material-table example in CodeSandbox or with create-react-app at less than two minutes. It was as simple as:

我想用不到两分钟的时间来整理CodeSandbox或create-react-app中最基本的材料表示例。这很简单：

Use the code sandbox React template (or create-react-app).
使用代码沙箱React模板(或create-react-app)。
Include @material-ui/core, @material-ui/icons, and material-table as dependencies.
包括@ material-ui / core，@ material-ui / icons和material-table作为依赖项。
Use code like the following from the material-table Getting Started docs:
使用材料表“入门”文档中的以下代码：

The docs were easy to follow and the only dependency is @material-ui/core (m-ui icons are recommended). I’d label this a beginner-friendly library.

该文档易于遵循，唯一的依赖项是@ material-ui / core(建议使用m-ui图标)。我将其标记为适合初学者使用的库。

两种现成的功能+样式 (Two Out-of-the-Box Features + Styling)

Being relatively unfamiliar with material-table before jumping into this article, I of course chose a very unscientific approach to deciding how to explore the library: I picked the first two key features listed and implemented them.

在进入本文之前，相对不熟悉材料表，我当然选择了一种非常不科学的方法来决定如何探索图书馆：我选择了列出的前两个关键功能并将其实现。

The first feature I will explore is Actions.

我将探讨的第一个功能是Actions 。

The Simple Action Example from the docs was as short as the following (I added TypeScript to mine):

文档中的“简单操作示例”如下所示(我向我添加了TypeScript)：

actions={[
    {
      icon: () => <SaveIcon />,
      tooltip: "Save User",
      onClick: (event, rowData) => (
         alert("You saved " + (rowData as unknown as Column).name)
      )
    }
]}

This results in an alert popping up. So far, so good. But….

这将导致弹出警报。到目前为止，一切都很好。但…。

I tried the Duplicate Action Example in the docs and was unsuccessful in getting it to run. The sample code still uses Class syntax (most material-table examples are functional components), and I believe it is not compatible with functional components. I kept getting a “_this.props.data is not a function” error even after two hours of attempted workarounds.

我在文档中尝试了“重复操作示例”，但未成功运行。该示例代码仍然使用Class语法(大多数材料表示例都是功能组件)，我相信它与功能组件不兼容。即使尝试了两个小时的解决方法后，我仍然收到“ _this.props.data不是函数”错误。

There were several other action examples that didn’t use Class syntax, and I expect they would work fine. Also, I explored the editable feature in this post. It encapsulates three actions and worked great.

还有其他一些不使用Class语法的操作示例，我希望它们可以正常工作。另外，我在本文中探讨了可编辑功能。它封装了三个动作，效果很好。

The second feature I will explore is Component Overriding. The docs were excellent here.

我将探讨的第二个功能是Component Overriding 。这些文档在这里很棒。

I tried the Action override (the second example) and that worked perfectly:

我尝试了Action覆盖(第二个示例)，并且效果很好：

components={{    
   Action: props => (       
      <Button
         onClick={event => props.action.onClick(event, props.data)}                
         color="primary" 
         variant="text"
         style={{ textTransform: "none" }}
         size="small"       
      >
         Save
      </Button>
   )
}}

Remember that this button is a MUI button; that is where the configs on it come from.

请记住，此按钮是MUI按钮；那就是配置的来源。

I also attempted a Row override. It took me a bit to figure out, but you are required to use MTableBodyRow somewhere in the Row override. MTableBodyRow is imported from material-table. This implies that these overrides are more about adding additional functionality than fundamentally changing the table behavior.

我还尝试了行替代。我花了一点时间才知道，但是您需要在Row重写中的某处使用MTableBodyRow 。 MTableBodyRow是从材料表导入的。这意味着这些替代项更多地是要添加其他功能，而不是从根本上改变表的行为。

Finally, I took a look at Styling.

最后，我看了一看样式。

Styling was a breeze. It was reminiscent of Material-UI styling where specific names are provided in the API to make styling easy. I ran into no issues.

造型轻而易举。这让人想起Material-UI样式，在API中提供了特定名称以简化样式。我没有遇到任何问题。

This is a way to provide default styling to the header.

这是为标头提供默认样式的方法。

options={{    
   headerStyle: {
       backgroundColor: '#01579b',
       color: '#FFF'
   }
}}

One cool feature was that the individual columns could receive a style to override the default provided:

一个很酷的功能是，各个列可以接收一种样式来覆盖提供的默认样式：

columns={[
   {
      title: "Name",
      field: "name",
      headerStyle: {
          backgroundColor: "green"       
      }
   },
...

定制和支持 (Customization and Support)

I decided to remove the title as a quick test of customization. A quick Google search returned an issue opened in February. I was impressed to see the library creator with a same-day response to the issue. Furthermore, another user responded with an alternative suggestion. While my request was pretty simple, I was still surprised at how easy it was to find a solution. Essentially no digging was required.

我决定删除标题，以快速进行自定义测试。快速的Google搜索返回了2月份打开的问题。看到库创建者当天就此问题做出的回应给我留下了深刻的印象。此外，另一位用户提出了另一条建议。尽管我的请求非常简单，但我仍然对找到解决方案如此容易感到惊讶。基本上不需要挖掘。

外卖 (Takeaways)

High fives:

击掌：

Consider material-table if you are already using Material UI.
如果您已经在使用Material UI，请考虑Material-Table。
The docs are easy to follow and a simple example can be spun up in less than five minutes.
这些文档易于遵循，并且可以在不到五分钟的时间内完成一个简单的示例。
Customization is relatively easy if you consider the fact that someone else has probably done the thing you are trying to do.
如果考虑到其他人可能已经完成了您尝试做的事情，那么自定义相对容易。
There’s impressive support from the library creator and community.
图书馆创建者和社区提供了令人印象深刻的支持。

Drawbacks:

缺点：

At least one doc example didn’t work as-is, and it seems the docs need to be fully updated for React hooks syntax.
至少有一个文档示例无法按原样工作，而且看来文档需要针对React钩子语法进行全面更新。
The docs also don’t include TypeScript examples. Sometimes it was tedious getting TypeScript working.
该文档也没有包含TypeScript示例。有时让TypeScript运行很乏味。

If you want an example of the customization options with material-table, take a look at this post where I override the first column component and give it autoFocus functionality. material-table is well thought out and designed for this kind of flexibility.

如果您想要一个带有物料表的自定义选项的示例，请看一下这篇文章，在该文章中我将覆盖第一列组件并为其提供autoFocus功能。物料台经过了深思熟虑，并为实现这种灵活性而设计。

All things considered, material-table is a great library. I hope this introduction to material-table for React will give you another great data table to choose from when designing a great UI.

考虑到所有事物，材料表是一个不错的图书馆。我希望对React的Material-Table的介绍将为您提供一个很棒的数据表，供您在设计出色的UI时选择。