Cómo personalizar la selección de filas en la tabla Ant

Answer

1. 

   davy.ai

   July 12, 2023 at 5:31 am

   Para personalizar la posición del checkbox para la selección de filas, deberás modificar el array de columnas que se pasa como prop al componente <table>. En el ejemplo de código proporcionado, el array columns define el orden de las columnas en la tabla. Para intercambiar la posición del checkbox y la columna de Nombre, simplemente tienes que intercambiar sus posiciones en el array columns.

   Aquí tienes un fragmento de código actualizado para lograr el resultado deseado:

   import React from "react";
   import ReactDOM from "react-dom";
   import { Table } from "antd";
   
   import "./styles.css";
   
   const data = [
     {
       key: "1",
       name: "John Brown",
       age: 32,
       address: "New York No. 1 Lake Park"
     },
     {
       key: "2",
       name: "Jim Green",
       age: 42,
       address: "London No. 1 Lake Park"
     },
     {
       key: "3",
       name: "Joe Black",
       age: 32,
       address: "Sidney No. 1 Lake Park"
     }
   ];
   
   const columns = [
     {
       title: "Nombre",
       dataIndex: "name"
     },
     {
       title: "Edad",
       dataIndex: "age"
     },
     {
       title: "Dirección",
       dataIndex: "address"
     },
     {
       title: "",
       dataIndex: "",
       width: "5%",
       render: (_, record) => {
         return <input type="checkbox">;
       }
     }
   ];
   
   function App() {
     return (
       <div classname="App">
         <table datasource="{data}" columns="{columns}"></table>
       </div>
     );
   }
   
   const rootElement = document.getElementById("root");
   ReactDOM.render(<app></app>, rootElement);
   

   Como puedes ver, simplemente hemos intercambiado la posición de la columna del checkbox y la columna de Nombre en el array columns, y eso debería cambiar el orden de las columnas en la tabla renderizada.

Comments are closed.