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.
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