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时选择。

资源资源 (Resources)

If you prefer to watch me code it with commentary, watch here:

如果您希望观看带有注释的代码，请在此处观看：

Here is the final code:

这是最终代码：

Thanks for reading!

谢谢阅读！

翻译自: https://medium.com/better-programming/intro-to-material-table-for-react-74db0fbd2d32

react和react2