https://github.com/marbemac/zedux-grid-example

https://github.com/marbemac/zedux-grid-example

Last synced: about 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/marbemac/zedux-grid-example
• Owner: marbemac
• Created: 2024-12-02T21:21:41.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-13T18:43:16.000Z (over 1 year ago)
• Last Synced: 2025-02-05T00:44:22.270Z (over 1 year ago)
• Language: TypeScript
• Size: 981 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Zedux Data Grid Example

A more advanced Zedux example.

- Virtualized table (grid) that loads rendered rows + columns on demand

- Tracks the stale time of each cell independently, and re-fetches the data for a cell on render if it is stale (the "v1, v2, etc" in the UI shows how many times a cell has been fetched)

- Re-uses the fetched data when rendering outside the table (for example, on a "details" panel)

Running it:

1. `yarn`

2. `yarn dev`

3. Open http://localhost:3000

  Example GIF

![2024-12-02 18 49 14](https://github.com/user-attachments/assets/394179f4-7dcc-441c-b39b-dcbb4a6b5894)

## Organization

- The mock API is in [app/utils/api.ts](app/utils/api.ts)

- The [app/atoms](app/atoms) folder contains the atoms for objects (an object has many records) and records.

- The [app/routes/objects.$objectId.tsx](app/routes/objects.$objectId.tsx) file uses the data table component to render the records for a particular object.

- The [app/routes/objects.$objectId.$recordId.tsx](app/routes/objects.$objectId.$recordId.tsx) file renders the details panel when clicking on a specific record in the data table.

- The [app/components/DataTable](app/components/DataTable) folder contains the atoms and react components for the data table itself.