Skip to content

examples(react-virtual): Lanes Example #991

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

examples(react-virtual): Lanes Example #991

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a26d4cd
docs(examples): Lanes Example
FatahChan May 3, 2025
6463bce
chore: Add resizable and padding lanes with dynamic lane count calcul…
FatahChan May 3, 2025
81907c1
Rename lane components and adjust resize observer debounce timing
FatahChan May 3, 2025
d792ffc
chore: calc optimization
FatahChan May 5, 2025
ad9177d
refactor: rename LanesGapVirtualizer to LanesVirtualizer and improve …
FatahChan Sep 22, 2025
e318bc9
chore: update rollup dependency to v4.46.2 and remove unused packages
FatahChan Sep 22, 2025
cca5ac0
chore: add title to React lanes example and remove eslint comment
FatahChan Sep 22, 2025
4ef59dc
chore: update package dependencies and add port config to serve script
FatahChan Sep 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions examples/react/lanes/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules
.DS_Store
dist
dist-ssr
*.local
6 changes: 6 additions & 0 deletions examples/react/lanes/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# Example

To run this example:

- `npm install` or `yarn`
- `npm run start` or `yarn start`
12 changes: 12 additions & 0 deletions examples/react/lanes/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Virtual Lanes Example</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
23 changes: 23 additions & 0 deletions examples/react/lanes/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"name": "tanstack-react-virtual-example-lanes",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview --port 3001",
"start": "vite"
},
"dependencies": {
"@tanstack/react-pacer": "^0.2.0",
"@tanstack/react-virtual": "^3.13.12",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@types/react": "^18.3.23",
"@types/react-dom": "^18.3.7",
"@vitejs/plugin-react": "^4.5.2",
"vite": "^5.4.19"
}
}
28 changes: 28 additions & 0 deletions examples/react/lanes/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
html {
font-family: sans-serif;
font-size: 14px;
}

body {
padding: 1rem;
}

.List {
border: 1px solid #e6e4dc;
max-width: 100%;
}

.ListItemEven,
.ListItemOdd {
display: flex;
align-items: center;
justify-content: center;
}

.ListItemEven {
background-color: #e6e4dc;
}

button {
border: 1px solid gray;
}
Loading