ReactJS Evergreen Table Component

Last Updated : 20 Jun, 2021

React Evergreen is a popular front-end library with a set of React components for building beautiful products as this library is flexible, sensible defaults, and User friendly. Table Component allows the user to show all information from a table format. We can use the following approach in ReactJS to use the Evergreen Table Component.

EditableCell Props:

isSelectable: It is used to denote whether this element is selectable or not.
disabled: The cell can’t be edited when this is set to true.
placeholder: It is used to denote the placeholder value for the table.
size: It is used to denote the size used for the TextTableCell and Textarea.
children: The children it used to denote the value of the cell.
onChange: It is a function called when value changes.
autoFocus: The cell will initialize in the editing state when this is set to true.

EditableCellField Props:

value: It is used to denote the defaultValue of the textarea.
zIndex: It is used to denote the z-index placed on the element.
getTargetRef: It is a function to get the target ref of the parent.
minWidth: It is used to denote the minimum width of the textarea.
minHeight: It is used to denote the minimum height of the textarea.
onChangeComplete: It is a function that is called when the textarea is blurred.
onCancel: It is a function that is called when Escape is hit or componentWillUnmount.
size: It is used to denote the text size of the textarea.

ScrollbarSize Props:

handleScrollbarSize: It is a function that returns the size of the scrollbar by creating a hidden fixed div.

SearchTableHeaderCell Props

value: It is used to denote the value of the input.
onChange: It is a function that is called when the input changes.
autoFocus: It is used to set whether components should be automatically focused on component render or not.
spellCheck: It is used to set whether to apply spell checking to the content or not.
placeholder: It is used to denote the text to display in the input if the input is empty.
icon: It is used to denote the Evergreen or custom icon before the label.

SelectMenuCell Props:

isSelectable: It is used to denote whether this element is selectable or not.
disabled: The cell can’t be edited when this is set to true.
placeholder: It is used to denote the placeholder value for the table.
size: It is used to denote the size used for the TextTableCell and Textarea.
selectMenuProps: It is used to denote the select menu props.

Table Props: It does not take any props.

TableBody Props: It does not take any props.

TableCell Props:

isSelectable: It is used to denote whether this element is selectable or not.
appearance: It is used for the appearance of the table row.
rightView: It is used to make an optional node to be placed on the right side of the table cell.
arrowKeysOverrides: It is used to allow the advance arrow keys to overrides for selectable cells.
className: It is used to pass the class name to the table cell.

TableHead Props:

height: It is used to denote the height of the table head.
accountForScrollbar: If using TableHead together with a TableBody, these props should be set to true always.

TableHeaderCell Props: It does not take any props.

TableRow Props:

height: It is used to denote the height of the row.
onSelect: It is a function that is triggered on click and enter/space keypress.
onDeselect: It is a function that is triggered on click and enter/space keypress.
isSelectable: It is used to make the TableRow selectable.
isSelected: It is used to make the TableRow selected.
isHighlighted: It is used to manually set the TableRow to be highlighted.
intent: It is used to denote the intent of the alert.
appearance: It is used for the appearance of the table row.
className: It is used to denote the class name passed to the table row.

TableVirtualBody Props:

children: It is used to denote the children element which is an array of a single node.
defaultHeight: It is used to denote the default height of each row.
allowAutoHeight: It is used to allow the auto height if this prop is set to true.
overscanCount: It is used to denote the overscanCount property passed to react-tiny-virtual-list.
estimatedItemSize: This prop is used as estimatedItemSize in react-tiny-virtual-list when the allowAutoHeight anduseAverageAutoHeightEstimation props are set to false.
useAverageAutoHeightEstimation: The estimated height will be computed based on the average height of auto height rows when the allowAutoHeight and this prop are set to true.
scrollToIndex: It is used to denote the scrollToIndex property passed to react-tiny-virtual-list.
scrollOffset: It is used to denote the scrollOffset property passed to react-tiny-virtual-list.
scrollToAlignment: It is used to denote the scrollToAlignment property passed to react-tiny-virtual-list.
onScroll: It is a callback for the onScroll which is passed to react-tiny-virtual-list.

TextTableCell Props:

isNumber: It is used to add a fontFamily of mono value.
textProps: It is used to pass the additional props to the Text component.

TextTableHeaderCell Props:

textProps: It is used to pass the additional props to the Text component.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:
```
npx create-react-app foldername
```
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
```
cd foldername
```
Step 3: After creating the ReactJS application, Install the required module using the following command:
```
npm install evergreen-ui
```

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

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 ( 
    <div style={{ 
      display: 'block', width: 700, paddingLeft: 30 
    }}> 
      <h4>ReactJS Evergreen Table Component</h4> 
      <Table> 
        <Table.Head> 
          <Table.TextHeaderCell>Name</Table.TextHeaderCell> 
          <Table.TextHeaderCell>Age</Table.TextHeaderCell> 
        </Table.Head> 
        <Table.Body height={300}> 
          {sampleData.map((data) => ( 
            <Table.Row key={data.id}> 
              <Table.TextCell>{data.name}</Table.TextCell> 
              <Table.TextCell>{data.age}</Table.TextCell> 
            </Table.Row> 
          ))} 
        </Table.Body> 
      </Table> 
    </div> 
  ); 
}