Skip to content
Related Articles

Related Articles

Improve Article

ReactJS Evergreen Table Component

  • Last Updated : 20 Jun, 2021
Geek Week

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

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :