ReactJS Evergreen Table Component

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.

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