We built the same data grid in React, Vue & Svelte, here's what we learned

We built the same data grid in React, Vue & Svelte, here's what we learned

At SVAR, we build UI components for React, Svelte, and Vue. Just shared our experience with a data grid – how to make it fast in all three frameworks.

What surprised us: the expensive bits (virtualization, memoization, data flow) are almost entirely framework-independent, and framework overhead is a rounding error next to DOM size.

Curious if you have seen similar patterns in your projects?

svar.dev
u/otashliko — 8 days ago
▲ 3 r/react

SVAR React Calendar – drag-and-drop calendar with a built-in editor

Hey everyone,

We’re building SVAR React Calendar, a React-based, open-source calendar component for scheduling and event management.

It includes a built-in event editor, calendar groups, drag-and-drop interactions, and TypeScript support. It also works with Next.js — there’s a Next.js demo available.

The free version includes:

  • Day, week, and month views
  • Drag-and-drop / drag-to-create events
  • Built-in event editor
  • Calendar groups sidebar
  • Context menu
  • Custom event content, event cards, and tooltips
  • Event filtering
  • iCal import and export
  • Light and dark themes

Live demo: https://svar.dev/demos/react/calendar/

GitHub: https://github.com/svar-widgets/react-calendar/

We’d appreciate feedback from the React community, especially on the API, customization options, and features you’d expect from a calendar component.

u/otashliko — 15 days ago

We've added Calendar & Kanban to SVAR Svelte library [Self-Promotion]

Hey everyone,

We've recently added two new UI components to the SVAR Svelte library, both built with Svelte 5.

Svelte Calendar, an event calendar similar to Google Calendar, but under your control.

Key features:

  • Day, Week, Month views
  • Drag-and-drop event management
  • Calendar groups
  • Built-in edit form
  • Context menu
  • Filtering
  • iCal Import/Export

Live demo: https://svar.dev/demos/calendar/

GitHub: https://github.com/svar-widgets/calendar

Svelte Kanban, a component for building Kanban-board interfaces.

Key features:

  • Full drag-and-drop support
  • Configurable columns
  • Customizable task cards
  • Built-in editor
  • Filtering, sorting & grouping
  • Context menu

Live demo: https://svar.dev/demos/kanban/

GitHub: https://github.com/svar-widgets/kanban

Like other SVAR components, both come with:

  • TypeScript support
  • Light & dark themes
  • MIT-licensed core + PRO edition

We’d love any feedback, bug reports, or feature ideas from the Svelte community.

u/otashliko — 17 days ago
▲ 1.4k r/kindle

This is how a perfect summer day looks like. Just started a new book today.

u/otashliko — 2 months ago
▲ 49 r/vuejs

SVAR Vue components: Gantt, Calendar, DataGrid, etc

Hello everyone,

We’ve been working on SVAR Vue, a set of Vue components aimed at data-heavy and scheduling applications (project management tools, internal dashboards, etc.). Thought it might be useful for Vue devs building these kind of products.

The library includes:

  • Gantt - interactive Gantt chart with dependencies, customizable time scales, built-in edit form, drag-and-drop support
  • Calendar - Google-like event calendar with day/week/month views, calendar grouping, filtering, and drag-and-drop editing
  • DataGrid - rich-featured data grid with sorting, filtering, in-cell editing, and tree data
  • File Manager - file explorer component with list/tiles/split views and file preview panel
  • Filter - library of 4 components, from simple in-line filter to query builder UI and optional AI-powered natural language input
  • Core - base UI components and form controls used across the library

Some technical details:

  • Vue 3 + TypeScript
  • Virtualization for large datasets
  • Light & dark themes
  • CSS-based styling approach (customizable)
  • Designed for data-intensive interfaces

Most components are free to use under MIT. Gantt and Calendar include paid versions with additional features.

Links:

Any feedback or feature suggestions are welcome.

u/otashliko — 2 months ago
▲ 29 r/sveltejs+1 crossposts

SVAR Svelte 2.5/2.6 - AI-powered FilterQuery, virtualized dropdowns & new Avatar component [Self-Promo]

Hey Svelte community, 

We maintain SVAR Svelte, an open-source UI library with a set of advanced components for Svelte 5 apps (datagrid, Gantt chart, file manager). Recently we dropped major updates across the components, including:

Filter v2.5

New FilterQuery component, a YouTrack-style search bar that works in 3 modes:

  • AI-powered natural language search ("show tasks over 30") – AI mode demo
  • structured syntax (Age>30, first_name: Alex)
  • mix of both

LLM-agnostic (OpenAI, Anthropic, Google, etc.), offline-first for structured/mixed modes.

Core v2.5 (UI library)

  • Virtualized dropdowns for Combo/RichSelect/MultiCombo – demo with 10k items
  • Avatar component: pics, initials, groups

DataGrid v2.6

  • FilterQuery integration for filtering
  • Multi-select in-cell editor
  • Simpler custom editors API

Gantt v2.6

  • FilterQuery integration for task filtering

All these are MIT-licensed and available on GitHub: https://github.com/svar-widgets

Demos: https://svar.dev/demos/

As always, any feedback is welcome!

u/otashliko — 4 months ago