Componente de tabla de diseño de Ant de la interfaz de usuario de ReactJS

. ReactJS UI Ant Design Table Component se utiliza para mostrar filas de datos. Se utiliza para mostrar datos en forma de formato de tabla. Podemos usar el siguiente enfoque en ReactJS para usar el componente de tabla de diseño Ant.

Accesorios de mesa:

• bordered: Se utiliza para indicar si mostrar todos los bordes de la tabla o no.
• Columnas: Se utiliza para denotar las columnas de la tabla.  
• componentes: se utiliza para anular elementos de tabla predeterminados,  
• dataSource: se utiliza para indicar la array de registro de datos que se mostrará.
• expandible: Sirve para configurar contenido expandible.  
• pie de página: se utiliza para indicar el renderizador de pie de página de la tabla.  
• getPopupContainer: es el contenedor de representación de menús desplegables en la tabla.  
• loading: Se utiliza para indicar el estado de carga de la tabla. 
• configuración regional: es el texto i18n que incluye filtro, clasificación, texto vacío, etc.
• paginación: Se utiliza para la configuración de la paginación.  
• rowClassName: se utiliza para indicar el nombre de clase de la fila.
• rowKey: se utiliza para indicar la clave única de la fila.
• rowSelection: se utiliza para indicar la configuración de selección de fila.  
• scroll: Se utiliza para indicar si la tabla puede ser scrollable o no.
• showHeader: Se utiliza para indicar si mostrar o no el encabezado de la tabla.
• showSorterTooltip: se utiliza para que el encabezado muestre la siguiente información sobre herramientas de dirección del clasificador.  
• tamaño: Se utiliza para indicar el tamaño de la tabla.
• sortDirections: se utiliza para indicar las direcciones de clasificación.
• pegajoso: se utiliza para establecer un encabezado fijo y una barra de desplazamiento.  
• resumen: se utiliza para indicar el contenido del resumen.  
• tableLayout: se utiliza para indicar el atributo de diseño de tabla del elemento de tabla.  
• title: se utiliza para indicar el renderizador del título de la tabla.  
• onChange: es una función de devolución de llamada que se ejecuta cuando se cambia la paginación, los filtros o el clasificador. 
• onHeaderRow: se utiliza para configurar accesorios por fila de encabezado.  
• onRow: se utiliza para establecer accesorios por fila. 

Apoyos de columna:

• align: se utiliza para especificar de qué manera se alinea esa columna.
• className: se utiliza para indicar el className de esta columna.  
• colSpan: se utiliza para indicar el lapso del título de esta columna.  
• dataIndex: Se utiliza para mostrar el campo del registro de datos.
• defaultFilteredValue: se utiliza para indicar los valores filtrados predeterminados.
• defaultSortOrder: se utiliza para indicar el orden predeterminado de los valores ordenados.  
• editable: Se utiliza para indicar si una columna se puede editar.  
• puntos suspensivos: se utiliza para indicar el contenido de la celda de puntos suspensivos.
• filterDropdown: se utiliza para personalizar la superposición de filtros.  
• filterDropdownVisible: Se utiliza para indicar si filterDropdown está visible o no.
• filtered: Se utiliza para indicar si el dataSource está filtrado o no.
• filteredValue: se utiliza para indicar el valor filtrado controlado, se resaltará el icono de filtro.
• filterIcon: Se utiliza para el icono de filtro personalizado.
• filterMultiple: Se utiliza para indicar si se pueden seleccionar múltiples filtros o no.
• filtros: se utiliza para indicar la configuración del menú de filtro.  
• fijo: Se utiliza para establecer columnas a ser fijas.
• clave: se utiliza para indicar la clave única de esta columna.
• render: Es el renderizador de la celda de la tabla.  
• receptivo: se utiliza para indicar la lista de puntos de interrupción en los que mostrar esta columna.  
• shouldCellUpdate: se utiliza para indicar la lógica de representación de la celda de control.
• showSorterTooltip: se usa para anular showSorterTooltip en la tabla si el encabezado muestra la siguiente información sobre herramientas de dirección del clasificador. 
• sortDirections: se utiliza para ordenar direcciones en una tabla y los valores pueden ser ascendentes o descendentes .
• clasificador: es una función de clasificación para la clasificación local.
• sortOrder: se utiliza para indicar el orden de los valores ordenados.
• title: Se utiliza para indicar el título de esta columna.  
• ancho: Se utiliza para el ancho de esta columna.  
• onCell: se utiliza para configurar accesorios por celda.  
• onFilter: es una función de devolución de llamada que determina si la fila se muestra cuando se filtra.  
• onFilterDropdownVisibleChange: función de devolución de llamada que se activa cuando se cambia filterDropdownVisible
• onHeaderCell: se usa para configurar accesorios por celda de encabezado. 

Apoyos del grupo de columnas:

• título: se utiliza para indicar el título del grupo de columnas.

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 antd

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 "antd/dist/antd.css";
import { Table } from 'antd';
  
export default function App() {
  
    // Sample Data for the table
    const dataSource = [
        { key: '1', username: 'Gourav', age: 10 },
        { key: '2', username: 'Kartik', age: 20 },
        { key: '3', username: 'Madhu', age: 30 },
        { key: '4', username: 'Karu', age: 40 },
        { key: '5', username: 'Dinesh', age: 50 },
    ];
  
    // Sample Columns data
    const columns = [
        {
            title: 'Username',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
        },
    ];
  
    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Ant-Design Table Component</h4>
            <Table dataSource={dataSource} columns={columns} />
        </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://ant.design/components/table/