Columna fija React-Table
-
Utilice
react-table-stickyparareact-tableVersión > 7 -
Utilice las
columnas fijas-react-table-hocparareact-tableVersión < 7
Este artículo nos enseñará a crear una columna fija para el componente react-table. A veces, requiere que creemos una columna pegajosa en la posición izquierda o derecha y hagamos desplazables otras columnas.
Este artículo ilustra dos métodos diferentes para crear una columna fija.
Utilice react-table-sticky para react-table Versión > 7
Si usa la biblioteca react-table versión> 7, debe usar la biblioteca react-table-sticky para crear las columnas adhesivas. Para instalar la dependencia react-table-sticky, ejecute el siguiente comando en el directorio de su proyecto.
npm i react-table-sticky
Para hacer la columna adhesiva, necesitamos usar useSticky al crear la tabla y pasar la tecla adhesiva al crear los datos de las columnas, como se ilustra a continuación.
// creating a table
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
useTable({columns, data,},useBlockLayout,
// use useSticky here
useSticky
);
// column data
const columns = [
{
Header: "City Info",
sticky: "left",
columns: [
{
Header: "Name",
accessor: "Name",
width: 150,
},
],
{
//Other groups of columns
},
},
]
En el siguiente ejemplo, hemos creado los datos para las diferentes ciudades y hemos pasado columnas y datos como apoyo del componente Tabla. Además, se agregó el par clave-valor adhesivo: izquierda al grupo de columnas Información de la ciudad.
En el componente tabla, creamos y mostramos los datos iterando a través de los datos.
Código de ejemplo:
import React from "react";
import styled from "styled-components";
import { useTable, useBlockLayout } from "react-table";
import { useSticky } from "react-table-sticky";
// style for the table
const Styles = styled.div`
padding: 1rem;
.table {
border: 2px dotted #ddd;
.th,
.td {
border-bottom: 1px dotted #ddd;
padding: 5px;
background-color: #fff;
border-right: 1px dotted #ddd;
}
&.sticky {
overflow: scroll;
}
}
`;
function Table({ columns, data }) {
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
useTable(
{
columns,
data,
},
useBlockLayout,
// use useSticky here
useSticky
);
return (
<Styles>
{/* setup table header */}
<div {...getTableProps()} className="table sticky">
<div className="header">
{headerGroups.map((hdrGroup) => (
<div {...hdrGroup.getHeaderGroupProps()} className="tr">
{hdrGroup.headers.map((clmn) => (
<div {...clmn.getHeaderProps()} className="th">
{clmn.render("Header")}
</div>
))}
</div>
))}
</div>
{/* setup table body */}
<div {...getTableBodyProps()}>
{rows.map((singleRow) => {
prepareRow(singleRow);
return (
<div {...singleRow.getRowProps()} className="tr">
{singleRow.cells.map((singleCell) => {
return (
<div {...singleCell.getCellProps()} className="td">
{singleCell.render("Cell")}
</div>
);
})}
</div>
);
})}
</div>
</div>
</Styles>
);
}
function App() {
// data of the different cities to show in the table
const data = [
{
Name: "Rajkot",
population: 3000000,
isClean: "Yes",
totalCars: 40000,
Bikes: 60000,
},
{
Name: "Gondal",
population: 3400000,
isClean: "Yes",
totalCars: 45000,
Bikes: 40000,
},
{
Name: "Surat",
population: 45000000,
isClean: "Yes",
totalCars: 23000,
Bikes: 32000,
},
{
Name: "Vadodara",
population: 560000,
isClean: "No",
totalCars: 870000,
Bikes: 100000,
},
{
Name: "Jetpur",
population: 20000,
isClean: "Yes",
totalCars: 10000,
Bikes: 30000,
},
{
Name: "Valsad",
population: 700000,
isClean: "No",
totalCars: 8000,
Bikes: 45000,
},
];
// table columns
const columns = [
{
Header: "City Info",
sticky: "left",
columns: [
{
Header: "Name",
accessor: "Name",
width: 150,
},
],
},
{
Header: "Details",
columns: [
{
Header: "Population",
accessor: "population",
width: 200,
},
{
Header: "Is Clean?",
accessor: "isClean",
width: 200,
},
{
Header: "Total Cars",
accessor: "totalCars",
width: 200,
},
{
Header: "Total Bikes",
accessor: "Bikes",
width: 200,
},
],
},
];
return <Table columns={columns} data={data} />;
}
export default App;
Producción:
En el resultado anterior, los usuarios pueden ver que cuando el tamaño del navegador disminuye y las columnas de la tabla se pueden desplazar horizontalmente, la columna Nombre permanece fija a la izquierda y otras columnas se vuelven desplazables.
Utilice las columnas fijas-react-table-hoc para react-table Versión < 7
Si los desarrolladores usan la versión < 7 de react-table, también pueden usar la biblioteca react-table-hoc-fixed-columns. Tiene un uso más fácil que la biblioteca react-sticky-table.
Los usuarios deben ejecutar el siguiente comando en la terminal para instalar la dependencia react-table-hoc-fixed-columns en su proyecto React actual.
npm i react-table-hoc-fixed-columns
Después de eso, necesitamos crear una tabla con las withFixedColumns importadas de react-table-hoc-fixed-columns. Además, los usuarios deben agregar el par clave-valor fijo: posición al grupo de columnas.
const ReactFixedColumnsTable = withFixedColumns(ReactTable);
const columns = [
{
Header: "Name Info",
fixed: "Right",
columns: [
{
Header: "First Name",
accessor: "firstName",
width: 150,
},
],
{
//Other groups of columns
},
},
]
Hemos creado datos normales de algunas personas en el siguiente ejemplo y los usamos para crear una tabla con la tabla de reacciones. Además, pasamos el par clave-valor fixed: "left" a la matriz del primer grupo de columnas para corregir las dos primeras columnas a la izquierda.
Código de ejemplo:
// import required libraries
import React from "react";
import { render } from "react-dom";
import ReactTable from "react-table";
import "react-table/react-table.css";
// Import React Table HOC Fixed columns
import withFixedColumns from "react-table-hoc-fixed-columns";
import "react-table-hoc-fixed-columns/lib/styles.css";
const ReactFixedColumnsTable = withFixedColumns(ReactTable);
function App() {
// Creating the data for the table
const tableData = [
{
firstName: "Shubham",
lastName: "Vora",
Age: 21,
Above18: "Yes",
Gender: "Male",
City: "Rajkot",
},
{
firstName: "Akshay",
lastName: "Kumar",
Age: 32,
Above18: "Yes",
Gender: "Male",
City: "Ahmedabad",
},
{
firstName: "Jems",
lastName: "trum",
Age: 13,
Above18: "No",
Gender: "Male",
City: "Delft",
},
{
firstName: "Nora",
lastName: "Fatehi",
Age: 45,
Above18: "Yes",
Gender: "Female",
City: "Mumbai",
},
{
firstName: "Malaika",
lastName: "Arora",
Age: 47,
Above18: "Yes",
Gender: "female",
City: "Delhi",
},
];
const tableColumns = [
{
Header: "Name Info",
// adding fixed property in the object
fixed: "left",
columns: [
{
Header: "First Name",
accessor: "firstName",
width: 150,
},
{
Header: "Last Name",
accessor: "lastName",
width: 150,
},
],
},
{
Header: "Details",
columns: [
{
Header: "Age",
accessor: "Age",
width: 200,
},
{
Header: "Above 18?",
accessor: "Above18",
width: 200,
},
{
Header: "Gender",
accessor: "Gender",
width: 200,
},
{
Header: "City",
accessor: "City",
width: 200,
},
],
},
];
return (
<div>
{/* calling the table component */}
<ReactFixedColumnsTable
data={tableData}
columns={tableColumns}
Defa
className="-striped"
/>
<br />
</div>
);
}
export default App;
Producción:
Por lo tanto, no hay una forma predeterminada de hacer que las columnas sean fijas o pegajosas mientras se usa la biblioteca react-table. Los usuarios siempre necesitan usar otras bibliotecas de terceros.
Los usuarios pueden usar cualquier biblioteca de React de acuerdo con la versión de la tabla de reacciones que estén usando, como se discutió anteriormente.
Si los usuarios no quieren usar una biblioteca de terceros para hacer que las columnas de las tablas sean pegajosas, pueden personalizar el CSS y lograr lo mismo.
