Home

What is v3grid?

It is a datagrid/table implementation written in JavaScript. Why is it special? Keep reading!

What is 'v3' in the name?

VirtualGrid seemed a bit too simple, I had to come up with a good name. It is Virtual in 3 different ways: horizontally, vertically and the data too, hence the name.

Why?

Why did I write my own grid implementation when there are a lot of them and most are open source? Because I couldn't find a single one that could do all I wanted (see next paragraph). For example, most JS grids have a lot of features, but not many can do smooth scrolling on mobile.

Examples

See here

Design Goals

These are the properties I had in mind when I started working on v3grid:

• Virtual in both horizontal (columns) and vertical (rows) directions
• Virtual Data - Should handle infinite amount of data
• Mobile device support (iOS, Android) - Smooth scrolling, Touch handling
• Modular - each module/class is kept small, you can pick what features you want
• Framework Independent - currently it works with Ext.js, but you can write your own adapter
• I won't say 'lightweight', because each and every JS lib out there claims it's lightweight

Features

Sorry for the repetition here.

• Virtual columns, rows - it only shows the cells that are visible (almost)
• Virtual Data - you give it a getData(row, col) function and it renders your data
• Custom ItemRenderers
• Custom Styles for Columns
• Column Resize/Reorder
• Column Size can be fixed (pixels) or flexed (stretched)
• Locked Columns
• Multi-Column Sorting (need SortDataProvider, SortHeaderRenderer) - try Ctrl-Click on a Column Header
• Hierarchical Data (Tree), with Sorting
• Editing: Not supported - I planned this to be a read-only grid, but I don't think it would be difficult to implement.

The Structure

How does it work?

Dependencies