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.

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>
  );
}