Comment puis-je implémenter le défilement infini sur une table en utilisant react-virualised?
Tarun Singh
J'ai eu du mal avec les documents virtualisés de réaction.Ils ont des exemples de tableaux complets. Tout ce que je veux, c'est un simple défilement infini pour ma table. S'il vous plaît, si quelqu'un peut vous aider. Je veux juste rendre mon contenu lorsqu'il est visible à l'écran.
REMARQUE: je ne tire les données d'aucune API. J'ai des données statiques (un tableau d'objets) enregistrées dans mon dossier local.
Veuillez voir une capture d'écran de mon application ci-dessous.
Ci-dessous mon code.
const renderRows = items.map((data, index) => {
return (
<tr
className="table__row"
key={data.id}
onClick={() => onRowClick(data.id)}
>
<td style={{ marginRight: '2px' }}>
<img
onClick={(e) => {
toggleStarSelect(e, data.id);
}}
src={Star}
className="star"
alt="star"
style={{ padding: '2px' }}
/>
{data['#']}
</td>
<td>
<ImageLoadHandler
isloaded={isloaded}
handleImage={handleImage}
data={data}
/>
<span style={{ padding: '10px' }}>{data.Name}</span>
<span
style={{
backgroundColor: 'lightgray',
opacity: '0.5',
fontSize: '13px',
}}
>
{data.Symbol}
</span>
</td>
<td>{data.Price}</td>
<td>{data['1h']}</td>
<td className={data['24h'] > 0 ? 'green' : 'red'}>
{data['24h'] > 0 ? (
<img className="arrowicon" src={SortUpGreen} alt="sort-up-green" />
) : (
<img className="arrowicon" src={SortDownRed} alt="sort-down-red" />
)}
{data['24h']}%
</td>
<td>{data['7d']}</td>
<td>{data['Mkt Cap']}</td>
<td>{data['24h Vol']}</td>
<td style={{ padding: '0', paddingRight: '8px' }}>
<Suspense fallback={<div className="loading">loading...</div>}>
<Graph data={data} idx={index} />
</Suspense>
</td>
</tr>
);
});
return (
<div className="app">
<header>
<Header />
</header>
<table className="app__table">
<thead className="app__tablehead">
<tr>
<th
onClick={() => requestSort('#')}
className={getClassNamesFor('#')} //returns ascending or descending
>
#
</th>
<th
onClick={() => requestSort('Name')}
className={getClassNamesFor('Name')}
>
Coin
</th>
<th
onClick={() => requestSort('Price')}
className={getClassNamesFor('Price')}
>
Price
</th>
<th
onClick={() => requestSort('1h')}
className={getClassNamesFor('1h')}
>
1h
</th>
<th
onClick={() => requestSort('24h')}
className={getClassNamesFor('24h')}
>
24h
</th>
<th
onClick={() => requestSort('7d')}
className={getClassNamesFor('7d')}
>
7d
</th>
<th
onClick={() => requestSort('Mkt Cap')}
className={getClassNamesFor('Mkt Cap')}
>
Mkt Cap
</th>
<th
onClick={() => requestSort('24h Vol')}
className={getClassNamesFor('24h Vol')}
>
24h Vol
</th>
<th className="nohover">Last 7 days</th>
</tr>
</thead>
<tbody>{renderRows}</tbody>
</table>
</div>
);
Kostas
Un exemple fonctionnel de défilement infini sur un élément de table. Aussi un travail un repl .
import React, {useState, useEffect} from 'react';
import './App.css';
function App() {
let items = [];
for (let i = 0; i < 100; i++) {
items.push({
key: 'foo' + i,
value: 'bar' + i,
});
}
let dataTable = React.createRef();
const [list, setList] = useState({
itemsDisplayed: 20,
data: items.slice(0, 20),
});
let onScroll = () => {
let tableEl = dataTable.current;
if (tableEl.scrollTop === (tableEl.scrollHeight - tableEl.offsetHeight)) {
if (list.itemsDisplayed + 10 <= items.length) {
setList({
itemsDisplayed: list.itemsDisplayed + 10,
data: items.slice(0, list.itemsDisplayed + 10),
});
}
}
};
return (
<div className="App">
<table id="data-table" ref={dataTable} onScroll={onScroll}>
<tbody>
{list.data.map((item) => {
return (
<tr key={item.key}>
{item.value}
</tr>
);
})}
</tbody>
</table>
</div>
);
}
export default App;
A mentionner également, le problème du défilement du tir une seule fois résolu par cette question . Le but est d'utiliser l'événement onScroll intégré de React.
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
modifier le
Articles connexes
TOP liste
- 1
Microsoft.WebApplication.targets
- 2
Spring @RequestParam DateTime format comme ISO 8601 Date Heure facultative
- 3
comment supprimer "compte de connexion google" à des fins de développement - actions sur google
- 4
Comment ajouter une entrée à une table de base de données pour une combinaison de deux tables
- 5
Passer la taille d'un tableau 2D à une fonction ?
- 6
Exporter la table de l'arborescence vers CSV avec mise en forme
- 7
Impossible d'accéder à la vue personnalisée pendant le test de l'interface utilisateur dans XCode
- 8
Créer un système Buzzer à l'aide de python
- 9
Comment changer le navigateur par défaut en Microsoft Edge pour Jupyter Notebook sous Windows 10 ?
- 10
impossible d'obtenir l'image d'arrière-plan en plein écran dans reactjs
- 11
Algorithme: diviser de manière optimale une chaîne en 3 sous-chaînes
- 12
CSS: before ne fonctionne pas sur certains éléments,: after fonctionne très bien
- 13
Conversion double en BigDecimal en Java
- 14
Comment obtenir l'intégration contextuelle d'une phrase dans une phrase à l'aide de BERT ?
- 15
Comment choisir le nombre de fragments et de répliques Elasticsearch
- 16
Comment vérifier si un utilisateur spécifique a un rôle? Discord js
- 17
Comment créer un bot à compte à rebours dans Discord en utilisant Python
- 18
Existe-t-il un moyen de voir si mon bot est hors ligne ?
- 19
comment afficher un bouton au-dessus d'un autre élément ?
- 20
Comment activer le message Pylint "too-many-locals" dans VS Code?
- 21
Je continue à obtenir l'objet 'WSGIRequest' n'a pas d'attribut 'Get' sur django
laisse moi dire quelques mots