React-Table Fixed Column
-
Verwenden Sie den
react-table-stickyfürreact-tableVersion > 7 -
Verwenden Sie die
react-table-hoc-fixed-columnsfürreact-tableVersion < 7
Dieser Artikel wird uns beibringen, eine feste Spalte für die Komponente react-table zu erstellen. Manchmal ist es erforderlich, dass wir eine Sticky-Spalte an der linken oder rechten Position erstellen und andere Spalten scrollbar machen.
Dieser Artikel veranschaulicht zwei verschiedene Methoden zum Erstellen einer Sticky-Spalte.
Verwenden Sie den react-table-sticky für react-table Version > 7
Wenn Sie die react-table-Bibliothek Version > 7 verwenden, sollten Sie die react-table-sticky-Bibliothek verwenden, um die Sticky-Spalten zu erstellen. Um die Abhängigkeit react-table-sticky zu installieren, führen Sie den folgenden Befehl in Ihrem Projektverzeichnis aus.
npm i react-table-sticky
Um die Sticky-Spalte zu erstellen, müssen wir beim Erstellen der Tabelle useSticky verwenden und beim Erstellen der Spaltendaten den Schlüssel sticky übergeben, wie unten dargestellt.
// 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
},
},
]
Im Beispiel unten haben wir die Daten für die verschiedenen Städte erstellt und Spalten und Daten als Stütze der Komponente Tabelle übergeben. Außerdem wurde das Schlüssel-Wert-Paar sticky: left zur Spaltengruppe City Info hinzugefügt.
In der Komponente Tabelle haben wir die Daten erstellt und angezeigt, indem wir die Daten durchlaufen haben.
Beispielcode:
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;
Ausgang:
In der obigen Ausgabe können Benutzer sehen, dass, wenn die Größe des Browsers abnimmt und Tabellenspalten horizontal scrollbar werden, die Spalte Name auf der linken Seite fixiert bleibt und andere Spalten scrollbar werden.
Verwenden Sie die react-table-hoc-fixed-columns für react-table Version < 7
Wenn Entwickler die react-table-Version < 7 verwenden, können sie auch die react-table-hoc-fixed-columns-Bibliothek verwenden. Es ist einfacher zu verwenden als die react-sticky-table-Bibliothek.
Benutzer müssen den folgenden Befehl im Terminal ausführen, um die Abhängigkeit react-table-hoc-fixed-columns von ihrem aktuellen React-Projekt zu installieren.
npm i react-table-hoc-fixed-columns
Danach müssen wir eine Tabelle mit den withFixedColumns erstellen, die aus den react-table-hoc-fixed-columns importiert werden. Außerdem müssen Benutzer das Schlüssel-Wert-Paar fixed: position zur Spaltengruppe hinzufügen.
const ReactFixedColumnsTable = withFixedColumns(ReactTable);
const columns = [
{
Header: "Name Info",
fixed: "Right",
columns: [
{
Header: "First Name",
accessor: "firstName",
width: 150,
},
],
{
//Other groups of columns
},
},
]
Wir haben im folgenden Beispiel normale Daten einiger Personen erstellt und daraus eine Tabelle mit der react-table erstellt. Außerdem haben wir das Schlüssel-Wert-Paar fixed: "left" an das Array der ersten Gruppe von Spalten übergeben, um die ersten beiden Spalten auf der linken Seite zu fixieren.
Beispielcode:
// 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;
Ausgang:
Es gibt also keine Standardmethode, um Spalten fest oder klebrig zu machen, während die Bibliothek react-table verwendet wird. Benutzer müssen immer andere Bibliotheken von Drittanbietern verwenden.
Benutzer können jede React-Bibliothek gemäß der Version der von ihnen verwendeten React-Tabelle verwenden, wie oben beschrieben.
Wenn Benutzer keine Bibliothek eines Drittanbieters verwenden möchten, um Tabellenspalten klebrig zu machen, können sie das CSS anpassen und dasselbe erreichen.
