Componente de tabla Evergreen de ReactJS

React Evergreen es una biblioteca front-end popular con un conjunto de componentes React para crear productos hermosos, ya que esta biblioteca es flexible, tiene valores predeterminados sensibles y es fácil de usar. Table Component permite al usuario mostrar toda la información en formato de tabla. Podemos usar el siguiente enfoque en ReactJS para usar el componente de tabla Evergreen.

Accesorios EditableCell:

• isSelectable: Se utiliza para indicar si este elemento es seleccionable o no.
• disabled: la celda no se puede editar cuando se establece en verdadero.
• marcador de posición: se utiliza para indicar el valor del marcador de posición de la tabla.
• tamaño: se utiliza para indicar el tamaño utilizado para TextTableCell y Textarea.
• children: Los niños que se usan para denotar el valor de la celda.
• onChange: Es una función que se llama cuando cambia el valor.
• autoFocus: la celda se inicializará en el estado de edición cuando se establezca en verdadero.

Accesorios EditableCellField:

• valor: se utiliza para indicar el valor predeterminado del área de texto.
• zIndex: se utiliza para indicar el índice z colocado en el elemento.
• getTargetRef: es una función para obtener la referencia de destino del padre.
• minWidth: se utiliza para indicar el ancho mínimo del área de texto.
• minHeight: se utiliza para indicar la altura mínima del área de texto.
• onChangeComplete: Es una función que se llama cuando el área de texto está borrosa.
• onCancel: es una función que se llama cuando se presiona Escape o se desmonta el componente.
• tamaño: se utiliza para indicar el tamaño del texto del área de texto.

Accesorios de tamaño de barra de desplazamiento:

• handleScrollbarSize: Es una función que devuelve el tamaño de la barra de desplazamiento creando un div fijo oculto.

SearchTableHeaderCell Props

• valor: Se utiliza para indicar el valor de la entrada.
• onChange: Es una función que se llama cuando cambia la entrada.
• autoFocus: se utiliza para establecer si los componentes deben enfocarse automáticamente en el renderizado del componente o no.
• ortografía: Se utiliza para establecer si aplicar o no la revisión ortográfica al contenido.
• marcador de posición: se utiliza para indicar el texto que se mostrará en la entrada si la entrada está vacía.
• icono: Se utiliza para indicar el icono Evergreen o personalizado antes de la etiqueta.

Accesorios SelectMenuCell:

• isSelectable: Se utiliza para indicar si este elemento es seleccionable o no.
• disabled: la celda no se puede editar cuando se establece en verdadero.
• marcador de posición: se utiliza para indicar el valor del marcador de posición de la tabla.
• tamaño: se utiliza para indicar el tamaño utilizado para TextTableCell y Textarea.
• selectMenuProps: se utiliza para indicar los accesorios del menú de selección.

Accesorios de mesa: no necesita accesorios.

TableBody Props: No necesita ningún accesorio.

Accesorios de TableCell:

• isSelectable: Se utiliza para indicar si este elemento es seleccionable o no.
• apariencia: Se utiliza para la apariencia de la fila de la tabla.
• rightView: se utiliza para crear un Node opcional que se colocará en el lado derecho de la celda de la tabla.
• arrowKeysOverrides: se utiliza para permitir que las teclas de flecha de avance anulen las celdas seleccionables.
• className: Se utiliza para pasar el nombre de la clase a la celda de la tabla.

Accesorios de mesa:

• altura: Se utiliza para indicar la altura del cabezal de la mesa.
• accountForScrollbar: si usa TableHead junto con TableBody, estos accesorios deben establecerse en verdadero siempre.

TableHeaderCell Props: no necesita ningún accesorio.

Accesorios de TableRow:

• altura: Se utiliza para indicar la altura de la fila.
• onSelect: es una función que se activa al hacer clic y presionar la tecla Intro/espacio.
• onDeseleccionar: es una función que se activa al hacer clic y presionar la tecla Intro/espacio.
• isSelectable: se utiliza para hacer seleccionable TableRow.
• isSelected: Se utiliza para seleccionar el TableRow.
• isHighlighted: se utiliza para configurar manualmente TableRow para que se resalte.
• intent: Se utiliza para indicar la intención de la alerta.
• apariencia: Se utiliza para la apariencia de la fila de la tabla.
• className: se utiliza para indicar el nombre de la clase que se pasa a la fila de la tabla.

Apoyos del cuerpo virtual de la mesa:

• children: se utiliza para indicar el elemento child, que es una array de un solo Node.
• defaultHeight: se utiliza para indicar la altura predeterminada de cada fila.
• allowAutoHeight: se utiliza para permitir la altura automática si esta propiedad se establece en verdadero.
• overscanCount: se utiliza para indicar la propiedad overscanCount pasada a react-tiny-virtual-list.
• estimadaItemSize: Esta propiedad se utiliza como valor estimado del elemento en react-tiny-virtual-list cuando las propiedades allowAutoHeight y useAverageAutoHeightEstimation se establecen en false.
• useAverageAutoHeightEstimation: la altura estimada se calculará en función de la altura promedio de las filas de altura automática cuando allowAutoHeight y esta propiedad se establezcan en verdadero.
• scrollToIndex: se usa para indicar la propiedad scrollToIndex pasada a react-tiny-virtual-list.
• scrollOffset: se usa para indicar la propiedad scrollOffset pasada a react-tiny-virtual-list.
• scrollToAlignment: se usa para indicar la propiedad scrollToAlignment pasada a react-tiny-virtual-list.
• onScroll: es una devolución de llamada para onScroll que se pasa a react-tiny-virtual-list.

Accesorios TextTableCell:

• isNumber: Se utiliza para agregar una fontFamily de valor mono .
• textProps: Se utiliza para pasar los accesorios adicionales al componente Texto.

Accesorios TextTableHeaderCell:

• textProps: Se utiliza para pasar los accesorios adicionales al componente Texto.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install evergreen-ui

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

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

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

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