ReactJS 常青表格组件

React Evergreen 是一个流行的前端库，其中包含一组用于构建漂亮产品的 React 组件，因为该库灵活、合理的默认设置和用户友好。表格组件允许用户显示表格格式的所有信息。我们可以在 ReactJS 中使用以下方法来使用 Evergreen 表格组件。

EditableCell 道具：

isSelectable：用于表示该元素是否可选。
disabled：设置为 true 时无法编辑单元格。
placeholder：用于表示表格的占位符值。
size：用于表示TextTableCell和Textarea的大小。
children：用于表示单元格值的子代。
onChange：当值改变时调用的函数。
autoFocus：设置为 true 时，单元格将初始化为编辑状态。

EditableCellField 道具：

value：用于表示textarea的defaultValue。
zIndex：用于表示放置在元素上的 z-index。
getTargetRef：获取父对象的目标引用的函数。
minWidth：用于表示文本区域的最小宽度。
minHeight：用于表示文本区域的最小高度。
onChangeComplete：是textarea模糊时调用的函数。
onCancel：是Escape命中或componentWillUnmount时调用的函数。
size：用于表示textarea的文本大小。

ScrollbarSize 道具：

handleScrollbarSize：是一个通过创建隐藏的固定div来返回滚动条大小的函数。

SearchTableHeaderCell 道具

value：用于表示输入的值。
onChange：当输入改变时调用的函数。
autoFocus：用于设置组件是否自动聚焦在组件渲染上。
spellCheck：用于设置是否对内容进行拼写检查。
占位符：用于表示输入为空时要在输入中显示的文本。
图标：用于表示标签前的常绿或自定义图标。

SelectMenuCell 道具：

isSelectable：用于表示该元素是否可选。
disabled：设置为 true 时无法编辑单元格。
placeholder：用于表示表格的占位符值。
size：用于表示TextTableCell和Textarea的大小。
selectMenuProps：用于表示选择菜单的道具。

餐桌道具：不需要任何道具。

TableBody Props：不带任何道具。

TableCell 道具：

isSelectable：用于表示该元素是否可选。
外观：用于表格行的外观。
rightView：用于使可选节点放置在表格单元格的右侧。
arrowKeysOverrides：它用于允许高级箭头键覆盖可选单元格。
className：用于将类名传递给表格单元格。

桌头道具：

height：用于表示表头的高度。
accountForScrollbar：如果将 TableHead 与 TableBody 一起使用，则这些属性应始终设置为 true。

TableHeaderCell Props：不带任何道具。

TableRow 道具：

height：用于表示行的高度。
onSelect：这是一个在单击和输入/空格键时触发的函数。
onDeselect：这是一个在单击和输入/空格键时触发的函数。
isSelectable：用于使 TableRow 可选择。
isSelected：用于使 TableRow 被选中。
isHighlighted：用于手动设置要突出显示的 TableRow。
意图：用于表示警报的意图。
外观：用于表格行的外观。
className：用于表示传递给表行的类名。

TableVirtualBody 道具：

children：用于表示子元素，它是单个节点的数组。
defaultHeight：用于表示每行的默认高度。
allowAutoHeight：如果此属性设置为 true，则用于允许自动高度。
overscanCount：用于表示传递给 react-tiny-virtual-list 的 overscanCount 属性。
estimatedItemSize：当 allowAutoHeight 和 useAverageAutoHeightEstimation 属性设置为 false 时，此属性用作 react-tiny-virtual-list 中的estimatedItemSize。
useAverageAutoHeightEstimation：当 allowAutoHeight 和这个 prop 设置为 true 时，将根据自动高度行的平均高度计算估计高度。
scrollToIndex：用于表示传递给 react-tiny-virtual-list 的 scrollToIndex 属性。
scrollOffset：用于表示传递给 react-tiny-virtual-list 的 scrollOffset 属性。
scrollToAlignment：用于表示传递给 react-tiny-virtual-list 的 scrollToAlignment 属性。
onScroll：它是传递给 react-tiny-virtual-list 的 onScroll 的回调。

TextTableCell 道具：

isNumber：用于添加单声道值的 fontFamily。
textProps：用于将额外的 props 传递给 Text 组件。

TextTableHeaderCell 道具：

textProps：用于将额外的 props 传递给 Text 组件。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```
第 3 步：创建 ReactJS 应用程序后，安装必需的模块使用以下命令：
```
npm install evergreen-ui
```

项目结构：它将如下所示。

项目结构

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from 'react'
import { Table } from 'evergreen-ui'
  
export default function App() {
  
  const sampleData = [
    { id: 1, name: 'Karan', age: 80 },
    { id: 3, name: 'Rajesh', age: 10 },
    { id: 4, name: 'Yogesh', age: 20 },
    { id: 5, name: 'Abhijith', age: 30 }
  ]
  
  return (
    
      ReactJS Evergreen Table Component
      
        
          Name
          Age
        
        
          {sampleData.map((data) => (
            
              {data.name}
              {data.age}
            
          ))}
        
      
    
  );
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

参考： https://evergreen.segment.com/components/table