Componente de tabla de React Suite

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. Filas de datos de los componentes de la tabla. Podemos crear tablas usando este componente. Podemos usar el siguiente enfoque en ReactJS para usar el componente de tabla de React Suite.

Accesorios de mesa:

• affixHeader: se utiliza para colocar el encabezado de la tabla en la ubicación especificada de la página.
• affixHorizontalScrollbar: se utiliza para colocar la barra de desplazamiento horizontal de la tabla en una posición específica de la página.
• autoHeight: Se utiliza para la altura automática.
• bodyRef: se utiliza para denotar una referencia adjunta al elemento del cuerpo de la tabla.
• bordered: Se utiliza para mostrar el borde.
• cellBordered: Se utiliza para mostrar el borde de la celda.
• datos: Se utiliza para denotar los datos de la tabla.
• defaultExpandAllRows: Se utiliza para expandir todos los Nodes por defecto.
• defaultExpandedRowKeys: se utiliza para especificar la fila expandida predeterminada por clave de fila.
• defaultSortType: se utiliza para indicar el tipo de clasificación.
• expandedRowKeys: se utiliza para especificar la fila expandida predeterminada por clave de fila.
• headerHeight: se utiliza para indicar la altura del encabezado de la tabla.
• altura: Se utiliza para indicar la altura de la Mesa.
• hover: se utiliza para indicar que la fila de la tabla tiene un efecto de mouseover.
• isTree: Se utiliza para mostrar como una tabla de Árbol.
• loading: Se utiliza para mostrar la carga.
• minHeight: Se utiliza para indicar la altura mínima.
• onDataUpdated: es una función de devolución de llamada que se activa después de la actualización de datos de la tabla.
• onExpandChange: es una función de devolución de llamada que se activa en el Node expandido mientras se expande.
• onRowClick: es una función de devolución de llamada que se activa después de la fila y regresa a rowDate.
• onScroll: es una función de devolución de llamada que se activa para el desplazamiento de la barra de desplazamiento.
• onSortColumn: función de devolución de llamada para la secuencia de clasificación para devolver el valor sortColumn, sortType.
• renderEmpty: se utiliza para personalizar datos en contenido de visualización vacío.
• renderLoading: Se utiliza para personalizar el contenido de visualización en la carga de datos.
• renderRowExpanded: se utiliza para personalizar lo que puede hacer para expandir una zona.
• renderTreeToggle: es una función de devolución de llamada que se activa en el Node expandido mientras se alterna.
• rowClassName: se utiliza para agregar un nombre de clase adicional opcional a la fila.
• rowExpandedHeight: se utiliza para establecer la altura de un área expandible.
• rowHeight: se utiliza para indicar la altura de la fila.
• rowKey: se utiliza para denotar la clave de fila.
• shouldUpdateScroll: Se utiliza para indicar si actualizar la barra de desplazamiento después de la actualización de datos o no.
• showHeader: se utiliza para mostrar el encabezado.
• sortColumn: Se utiliza para el nombre de la columna Ordenar.
• sortType: Se utiliza para indicar el tipo de clasificación (Controlado).
• virtualizado: se utiliza para representar eficazmente datos tabulares de gran tamaño.
• ancho: Se utiliza para indicar el ancho de la tabla.
• wordWrap: Se utiliza para hacer que la celda se ajuste automáticamente.

Apoyos de la tabla.Columna

• align: Se utiliza para la alineación.
• colSpan: celdas de columna para fusionar cuando el valor de la clave de datos para la columna fusionada es nulo o indefinido.
• fijo: Se utiliza para la columna fija.
• flexGrow: establecer el ancho de la columna se ajusta automáticamente cuando se establece flexGrow no puede establecer la propiedad de tamaño y ancho
• minWidth: se usa para establecer un ancho mínimo por min-width cuando usa flexGrow.
• onResize: es una función de devolución de llamada que se activa después del cambio de ancho de columna.
• redimensionable: se utiliza para el ancho de columna de cambio de tamaño personalizable.
• sortable: se utiliza para indicar si es sortable o no.
• treeCol: Se utiliza para denotar una columna de un árbol.
• verticalAlign: Se utiliza para la alineación vertical.
• ancho: se utiliza para indicar el ancho de la columna.

Apoyos de Table.ColumnGroup:

• align: Se utiliza para la alineación.
• fijo: Se utiliza para el grupo de columnas fijas.
• verticalAlign: Se utiliza para la alineación vertical.
• header: Se utiliza para el encabezado del grupo.

Accesorios de mesa.Celda:

• dataKey: se utiliza para indicar la clave de enlace de datos.
• rowData: se utiliza para indicar los datos de la fila.
• rowIndex: se utiliza para indicar el número de fila.

Tabla.Accesorios de paginación:

• activePage: Se utiliza para configurar el número de página actual.
• disabled: Se utiliza para deshabilitar el componente.
• displayLength: configure cuántas líneas de entradas por página mostrar, correspondientes a lengthMenu
• first: Se utiliza para mostrar el botón de primera página.
• last: Se utiliza para mostrar el botón de última página.
• lengthMenu: se utiliza para indicar la configuración del número de fila de visualización de paginación.
• maxButtons: Se utiliza para configurar el número máximo de botones de visualización.
• siguiente: Se utiliza para mostrar el botón Página siguiente.
• onChangeLength: es una función de devolución de llamada que se activa cuando cambia el valor de lengthMenu.
• onChangePage: es una función de devolución de llamada que se activa cuando cambia la página.
• prev: Se utiliza para mostrar el botón Página anterior.
• renderLengthMenu: Se utiliza para el menú personalizado.
• renderTotal: Se utiliza para el total personalizado.
• reverse: Se utiliza para invertir la posición inicial y final.
• showInfo: Se utiliza para mostrar información de paginación.
• showLengthMenu: Se utiliza para mostrar el menú desplegable.
• total: Se utiliza para indicar el número total de entradas de datos.

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 rsuite

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 'rsuite/dist/styles/rsuite-default.css';
import { Table } from 'rsuite';
const { Column, HeaderCell, Cell } = Table;
  
export default function App() {
  
    // Sample table data
    const sampleData = [
        { firstName: 'Gourav', lastName: 'Hammad', city: 'Mhow' },
        { firstName: 'Rithik', lastName: 'Verma', city: 'Indore' },
        { firstName: 'Kartik', lastName: 'Malik', city: 'Raipur' },
        { firstName: 'Nikhil', lastName: 'Kapoor', city: 'Rau' },
        { firstName: 'Ayush', lastName: 'Singh', city: 'Dewas' }
    ]
  
    return (
        <div style={{
            display: 'block', width: 700, paddingLeft: 30
        }}>
            <h4>React Suite Table Component</h4>
            <Table
                height={500}
                data={sampleData}
            >
                <Column width={200}>
                    <HeaderCell>First Name</HeaderCell>
                    <Cell dataKey="firstName" />
                </Column>
                <Column width={200}>
                    <HeaderCell>Last Name</HeaderCell>
                    <Cell dataKey="lastName" />
                </Column>
                <Column width={200}>
                    <HeaderCell>City</HeaderCell>
                    <Cell dataKey="city" />
                </Column>
            </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://rsuitejs.com/components/table/