https://github.com/chdh/virtual-grid-layout

A virtual grid layout controller for HTML/DOM
https://github.com/chdh/virtual-grid-layout

grid table virtual-grid

Last synced: about 1 year ago
JSON representation

A virtual grid layout controller for HTML/DOM

• Host: GitHub
• URL: https://github.com/chdh/virtual-grid-layout
• Owner: chdh
• License: mit
• Created: 2019-07-03T22:26:23.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-08-21T19:13:19.000Z (almost 7 years ago)
• Last Synced: 2024-09-19T09:42:15.236Z (over 1 year ago)
• Topics: grid, table, virtual-grid
• Language: TypeScript
• Size: 37.1 KB
• Stars: 6
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# virtual-grid-layout - A Virtual grid layout controller

This module provides a virtual grid layout controller for HTML/DOM.

Features:

* Support for very large grids with rows and columns of varying height and width.

* As measuring the individual row heights may be time-consuming, only the sizes of the visible cells need to be determined.

  The scroll position is based on row/column indexes instead of absolute pixel coordinates.

* Each layout controller instance manages only a single contiguous grid.

  Additional parallel synchronized grids may be used for e.g. header cells or row prefixes.

* Scrollbars are not included, because browser-generated scrollbars are not suitable to navigate large virtual grids.

  Instead the higher application layers should use scrollbar widgets.

* Sub-grids can be implemented through macro cells.

* The layout controller is style-agnostic. Styling must be done in the higher application layers.

* The Layout Controller's purpose is limited to controlling the virtual layout by rendering the visible grid cells.

  User interaction must also be done in the higher application layers.

* There are two additional modules that assist with user interaction:

  `GridScroll` for scrolling and `GridResize` for resizing row heights and column widths.

**Online demo**: [www.source-code.biz/snippets/typescript/virtualGridLayout](http://www.source-code.biz/snippets/typescript/virtualGridLayout)


**NPM package**: [virtual-grid-layout](https://www.npmjs.com/package/virtual-grid-layout)