Skip to content
Related Articles

Related Articles

ReactJS Evergreen Table Component

Improve Article
Save Article
  • Last Updated : 20 Jun, 2021
Improve Article
Save Article

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

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: https://evergreen.segment.com/components/table


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!