revgrid

Introduction

Welcome to the Revgrid website

Revgrid is a canvas based virtual grid focusing on realtime data display and performance. Data is injected into the grid using server interfaces.

Its main features are:

• Speed
• Virtual (supporting display of very large data sets)
• Event driven (low CPU usage)
• Multiple selections (rectangle, row and column)
• Focus
• Smooth horizontal scrolling
• Multiple subgrids (header, main, footer)
• Fixed rows and columns
• Plug in cell painters
• Plug in cell editors
• Plug in UI controllers

To use Revgrid, you first need to create a set of servers (implementations of the schema and server interfaces) in order to display data with Revgrid. The test programs in the source code demonstrate how to create these servers. In addition, the Revgrid source code contains 4 pre-built server sets:

1. Record: Allows applications to work with records and fields and converts these to rows and columns. Sorting and filtering of rows is fully handled by the server set. In addition, the server set allows recent changes in records and field values to be highlighted in the grid.
2. Data Row Array: A data set consisting of an array of JSON objects is injected into Revgrid with a setData() function.
3. Single Heading: A one row data set where the value of each cell is obtained from a heading field.
4. Multi Heading: A data set where the value of each cell is obtained from an array in the heading field.

Install Library

Revgrid is shipped via NPM. Use the following commands to install it into an application package:
npm i revgrid

Install Source

The source can be installed by cloning the repository (or a fork) at: https://github.com/revgrid/revgrid

To build the distribution locally, open a shell at the directory/folder in which Revgrid was cloned and run the following commands:

1. npm install or npm ci (recommended) to install required dependencies
2. npm run dist to generate the distribution (dist subfolder). This script will:
   • delete the existing lib and dist folders
   • compile the TypeScript code
   • generate the rolled up TypeScript definition files (index.d.ts and revgrid-untrimmed.d.ts)
   • generate source maps

After the distribution has been initially built, it can be rebuilt using npm run api. This project uses TypeScript project references and the dist npm script forces a complete build while the api script only recompiles the referenced projects which have changed (so it can be a lot faster).

Note that the lib subfolder only holds the TypeScript declaration files generated by the compiler. Generally this subfolder can be ignored. It is used during the build process to generate the rolled up TypeScript definition files.

Test applications

Revgrid has 3 test applications which can be easily built to see it in action:

• testapp: Test application for the grid.
• recordtestapp: Test application for the Record server set.
• dratestapp: Test application which displays static JSON data from a Data Row Array server set and uses a Multi Heading server set to get headings from the property names within the JSON data.

Follow the steps below to build and run these applications:

1. Install the source as described above.
2. Run the respective NPM script (testapp:serve or dratestapp:serve or recordtestapp:serve) to build the test application and start the server.
3. Start the application by opening the following link in your browser: http://localhost:3001/

Corresponding NPM scripts also exist in the package file to build the test applications but not run them.

Building single-file bundles

UMD and ESM single file bundles can be generated for easier consumption without toolchain in-place. To do this, run npm run bundles, afterwards find the bundled files under dist/bundles/. Bundles are not built by default and are not included in the NPM package. It is recommended to consume the library through NPM and webpack.

Public API Interfaces are subject to change

Many aspects of the code base still need to be cleaned up. As part of this, it is possible that API interfaces and behaviour will change. Also, some features and convenience functions may be removed if they are deemed to not be inline with Revgrid’s objectives.

We will endeavour to document these API changes however this will probably only consist of dot points. You may need to examine the Revgrid source code to fully understand the implications of these API changes.

Should you use Revgrid?

Revgrid is open source and used in at least one production application. However please consider the following before using it:

• There is little documentation describing covering how it works and how it should be used.
• There are significant parts of it which have not yet been tested.
• The support for it is voluntary and cannot be relied upon.
• It is specifically targeted at high performance and real time display of data (especially related to financial trading). Features not relevant to this domain will not be incorporated.
• The public API interfaces are subject to change.

If you do intend to use it, it is recommended you have the skills to develop an understanding of the library based on the code base and existing available documentation. Also that you have sufficient development skills to be able to fix issues in the library yourself. (Pull Requests fixing issues will obviously be appreciated.)

There are many excellent alternative JavaScript grid libraries (both paid and free) to consider if the above does not align with your grid library needs and expectations.

Release information

Version	Date	Details
0.4.5	12 Dec 2023	Fix Single/MultiHeadingDataRowArrayServerSet field index initialisation Change license to MIT NON-AI
0.4.4	28 Sep 2023	Update typescript-eslint to 6
0.4.3	19 Sep 2023	Fix packaging issue
0.4.2	19 Sep 2023	Fix animation scheduling issue Remove RowMetadata from DataRowArrayDataServer Fix grid setting verticalGridLinesVisible Add grid setting visibleVerticalGridLinesDrawnInFixedAndPreMainOnly Set default for many standard grid settings to undefined
0.4.1	12 Sep 2023	Add recordMoved, recordReplaced & recordsReplaced to RevRecordStore.RecordsEventers Improve RevRecordDataServer consistency checks Fix move active column
0.4.0	25 Aug 2023	Fix Paint AutoWidening Add StandardTextPainter (contains behavior previously in StandardTextCellPainter) Remove StandardTextCellPainter Add StandardCheckboxPainter (contains behavior previously in StandardCheckboxCellPainter) Remove Text settings (move behavior into Standard settings) Rename RevRecordMainDataServer to RevRecordDataServer Split out “Multi Heading” and “Single Heading” server sets from “Data Row Array” server set Delete RevRecordHeaderDataServer (use Single Heading server instead) Rename simpletestapp to dratestapp (short for datarowarraytestapp) Refactor checkbox to allow better re-use Fix Checkbox editor readonly Fix column width autosize not narrowing Initialise StandardElementCellEditor to be hidden Remove focus control from StandardElementCellEditor
0.3.0	18 Aug 2023	Update packages Fix recommended-requiring-type-checking linting errors Fix & improve animation scheduling Add immediate Animation Add selection methods to class Revgrid Change default for setting multipleSelectionAreas to true Remove EnableContinuousRepaint setting Rename mouseMultiCellRectangleSelection* settings to mouseAddToggleExtendSelectionArea* Add switchNewRectangleSelectionToRowOrColumn setting Rename selectOnly… to clearSelect… Rename selectToggle… to toggleSelect… Hide FocusSelectBehavior and expose its public methods through Revgrid Hide FocusScrollBehavior and expose its public methods through Revgrid Rename CanvasManager to Canvas Add return type to Revgrid.getSelectedRectangles() Prevent selection extending from changing focus Fix column moving when not scrollable Fix right click select Fix Selection adjustForDeleted LastArea Fix ContiguousIndexRangeList.adjustForDeleted() Put includeAll param in Selection.getRowIndices() Add Selection.getRowIndicesIncludeAll() Implement Selection.isSelectedCellTheOnlySelectedCell() Replace Selection.CellSelectedType with SelectionAreaTypeId Include All in SelectionAreaTypeId Fix initialise of Standard Element Cell Editor when opened by key Change CellEditor readonly setter to defer to method setReadOnly() to allow overriding
0.2.2	03 Aug 2023	Rename CellEditor methods and events Implement Focus invalidate editor Fix Renderer invalidate view Fix bug in Point.adjustForRangeDeleted Remove ScrollbarClassPrefix setting Rework Mouse selection grid settings Add InsertRecords text box to recordtestapp Add support for Focus and Selection in recordtestapp
0.2.1	25 Jul 2023	Rework revgridId so works with ShadowDom Add options: firstGeneratedIdFromBaseIsAlsoNumbered and canvasOverflowOverride Set canvas display style to block Rework Host, Canvas and Scroller CSS Refactor ScrollDimensionComputedEvent handlers Rename ModelUpdateId to ServerNotificationId Make Revgrid.renderer public
0.2.0	19 Jul 2023	Expose SchemaServer in Revgrid Make Scrollers public in Revgrid Fix scroller inside overlap Change UiController LinedHoverCell to be initialised to null Move start and stop into Revgrid.active Fix Scroller resize logic Change Canvas and Scroller CSS class and id Fix focus row/column only Make ScrollDimension start, size and viewportSize never undefined Fix painting animation Restore LastRectangleFirstCellStash Fix calculateLastSelectionBounds() Fix reindex Add revgridId and internalParent to classes Prevent invalidation if canvas does not have bounds ViewLayout tracks Scroller Change settings default for scrollHorizontallySmoothly and visibleColumnWidthAdjust Fix vertical click scroll Fix rows loaded adjusting scroll anchor Add scrollerThickness grid setting Fix VerticalScrollAnchor finishAnchorLimitIndex
0.1.17	09 Jul 2023	Separate text settings from standard settings Change AllowEvents to Active Move horizontalAlign from Text to Standard settings Export ViewLayout to public Improve Refactor AutoSizeColumnWidth Implement settings.merge Implement rowStripeBackgroundColor Add Focus row changed event Implement single and multi heading DataRowArray server sets Make some Revgrid constructor parameters public Rename container element to host element Rename UiBehavior to UiController
0.1.16	21 Jun 2023	Remove column settings from field and implement merge settings.
0.1.15	20 Jun 2023	SchemaField is now independent of SchemaServer and includes column Settings. Refactor settings.
0.1.14	19 Jun 2023	Fix dev dependency issue
0.1.13	19 Jun 2023	A major rewrite of this library. Substantial changes to API.

This site is open source. Improve this page.