Rendering Large Datasets Efficiently

Ask us anything How do I?
1

Hi All

I’m building a full teacher timetable view in WeWeb and running into major performance issues. Thought I’d share what I’ve tried — maybe someone has a smarter approach?

The goal is to display a full weekly schedule with teachers as rows and weekdays as columns then within these weekdays more columns showing the school periods this creates a grid. Each cell shows the subject/class being taught in that time slot. When you press on a square you can add a possible schedule then publish it later. The logic all works and the backend is great but the front end renders so slow especially in the first instance.

image
image1170×518 34.6 KB

Attempt 1: Fully Nested Repeaters (Totally Dynamic)

  • Teachers are loaded dynamically (e.g. 70–150 total)
  • Inside each teacher: repeat over the school’s active days (e.g. Mon–Fri or Mon–Sat — this is dynamic)
  • Inside each day: repeat over the school’s defined periods (also dynamic — could be 10, 16, or more)
  • So it’s teacher → day → period — all driven by Supabase data

What went wrong:

  • Editor completely slows down or crashes
  • Clicking the squares is laggy
  • I feel like this approach is just generally very resource intense
  • Even with 12 teachers it gets laggy — with real data, it’s totally unmanageable

Attempt 2: Simulated Grid with Static Cells

  • Teachers are still dynamic
  • But days and periods are set up manually as fixed containers (e.g. 7 days × 17 periods)
  • Each cell gets a hard-coded HTML id like p3_d2, and we use those to slot in the right data
  • Just hide the days/periods not in use (e.g. Sat/Sun or periods 13–17)

Better but still rough:

  • Slightly faster, since I am not repeating everything,
  • The interface is a lot less laggy once loaded
  • The editor is painful to work in (soooo many elements) all be it does not crash as often.
  • And we’re hitting the same wall when scaling to full staff sizes I have not tried with 100 teachers but assume it will die

Has anyone built something like this before in WeWeb?
Is there a better pattern for rendering large grids like this without blowing up performance?
Appreciate any ideas :slight_smile:

2

There is not much to do in WeWeb since it doesn’t offer virtual scrolling and as you already found out is way worse at rendering repeating lists than code for example.

I’d suggest using a pattern where you display only what’s on screen by listening to the scroll event and rendering only those few visible slots - like virtual scrolling does.

Next best option for stuff like this is a custom component leveraging canvas, but I see it tough too as the AI is quite not great.

1 Like