{"id":23633505,"url":"https://github.com/jacehensley/virtual","last_synced_at":"2026-04-16T04:31:49.297Z","repository":{"id":98886627,"uuid":"114498924","full_name":"JaceHensley/virtual","owner":"JaceHensley","description":"A Dart virtualition library","archived":false,"fork":false,"pushed_at":"2017-12-26T06:36:41.000Z","size":104,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-19T02:52:05.752Z","etag":null,"topics":["dart","list","react","react-components","tree","virtual","virtualization","virtualizedlist"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JaceHensley.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-17T00:22:00.000Z","updated_at":"2017-12-19T21:55:33.000Z","dependencies_parsed_at":"2023-07-21T14:37:22.113Z","dependency_job_id":null,"html_url":"https://github.com/JaceHensley/virtual","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/JaceHensley/virtual","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JaceHensley%2Fvirtual","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JaceHensley%2Fvirtual/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JaceHensley%2Fvirtual/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JaceHensley%2Fvirtual/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JaceHensley","download_url":"https://codeload.github.com/JaceHensley/virtual/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JaceHensley%2Fvirtual/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31871477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"online","status_checked_at":"2026-04-16T02:00:06.042Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dart","list","react","react-components","tree","virtual","virtualization","virtualizedlist"],"created_at":"2024-12-28T04:52:46.225Z","updated_at":"2026-04-16T04:31:49.268Z","avatar_url":"https://github.com/JaceHensley.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# virtual\n\u003e A Dart virtualition library.\n\n[![Build Status](https://travis-ci.org/JaceHensley/virtual.svg?branch=master)](https://travis-ci.org/JaceHensley/virtual)\n[![codecov.io](http://codecov.io/github/JaceHensley/virtual/coverage.svg?branch=master)](http://codecov.io/github/JaceHensley/virtual?branch=master)\n![dart](https://img.shields.io/badge/%3C%2F%3E-Dart-blue.svg)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/JaceHensley/virtual/blob/master/LICENSE)\n\n## VirtualList\n\n### Example Usage\n\n```dart\nimport 'dart:html';\n\nimport 'package:react/react_dom.dart' as react_dom;\nimport 'package:over_react/over_react.dart';\n\nimport 'package:virtual/virtual.dart';\n\nvoid main() {\n  setClientConfiguration();\n\n  var content = (VirtualList()\n    ..itemSize = new Size.autoWidth(34)\n    ..scrollDirection = ScrollDirection.vertical\n    ..height = '500px'\n    ..width = 'auto'\n    ..overscanCount = 100\n    ..itemCount = 10000\n    ..itemRenderer = (index, isScrolling) {\n      return Dom.div()(isScrolling ? 'Loading...' : 'Item $index');\n    }\n  )();\n\n  react_dom.render(content, querySelector('#output'));\n}\n```\n\n### Props\n\n| Name | Type | Required | Default Value | Description |\n|:-----|:-----|:-----|:-----|:-----|\n| `itemSizes` | `ItemSizeCollection` | Yes | - | The collection of item sizes. |\n| `itemRenderer` | `ItemRenderer` | Yes | - | Returns a `ReactElement` given it's index and whether the list is currently scrolling. |\n\nSee more props [here](#shared-virtual-collection-props).\n\n### API Methods\n\n| Name | Description |\n|:-----|:-----|\n| `scrollToOffset(int offset)` | Scroll the list to the specified offset. |\n| `recomputeSizes([int startIndex = 0])` | Recompute the calculated sizes from the specificed index. |\n\n## VirtualTree\n\n### Example Usage\n\n```dart\nimport 'dart:html';\n\nimport 'package:react/react_dom.dart' as react_dom;\nimport 'package:over_react/over_react.dart';\n\nimport 'package:virtual/virtual.dart';\n\nimport 'node.dart' as tree;\n\nvoid main() {\n  setClientConfiguration();\n\n  var content = (VirtualTree()\n    ..scrollDirection = ScrollDirection.vertical\n    ..height = '500px'\n    ..width = 'auto'\n    ..overscanCount = 100\n    ..root = makeTree()\n    ..nodeRenderer = (index, isScrolling, node) {\n      return (tree.Node()\n        ..isScrolling = isScrolling\n        ..key = index\n        ..index = index\n        ..node = node\n      )();\n    }\n  )();\n\n  react_dom.render(content, querySelector('#output'));\n}\n```\n\n### Props\n\n| Name | Type | Required | Default Value | Description |\n|:-----|:-----|:-----|:-----|:-----|\n| `root` | `TreeNode` | Yes | - | The backing tree node structure of the virtual tree. |\n| `nodeRenderer` | `NodeRenderer` | Yes | - | Returns a `ReactElement` given it's index, whether the list is currently scrolling, and the backing `TreeNode`. |\n\nSee more props [here](#shared-virtual-collection-props).\n\n### API Methods\n\n| Name | Description |\n|:-----|:-----|\n| `primitiveRef` | [VirtualListComponent](#api-methods-1). |\n| `recomputeSizes([int startIndex = 0])` | Recompute the calculated sizes from the specificed index. |\n\n## Shared Virtual Collection Props\n\n| Name | Type | Required | Description |\n|:-----|:-----|:-----|:-----|\n| `height` | `dynamic` | Yes | - | The overall height of the virtual collection. |\n| `width` | `dynamic` | Yes | - | The overall width of the virtual collection. |\n| `scrollDirection` | `ScrollDirection` | Yes | - | Which direction the virtual scrolls, either vertical or horizontal. |\n| `overscanCount` | `int` | No | 0 | The number of extra items to be rendered outside the visible items. |\n| `onItemsRendered` | `ItemScrolledCalback` | No | - | Optional callback that is called when new items are rendered. |\n| `onListScroll` | `ListScrollCalback` | No | - | Optional callback that is called when the list is scrolled. |\n\n## BaseTreeNodeMixinProps / BaseTreeNodeMixin\n\nBase props/component classes to help create components that render `TreeNode`s.\n\n### Example Usage\n\n```dart\nimport 'package:meta/meta.dart';\n\nimport 'package:over_react/over_react.dart';\nimport 'package:virtual/virtual.dart';\n\n@Factory()\nUiFactory\u003cNodeProps\u003e Node;\n\n@Props()\nclass NodeProps extends UiProps with BaseTreeNodePropsMixin {}\n\n@Component()\nclass NodeComponent extends UiComponent\u003cNodeProps\u003e with BaseTreeNodeMixin\u003cNodeProps\u003e {\n  String get expanderText =\u003e props.node.isCollapsed ? 'Expand' : 'Collapse';\n\n  @override\n  Map getDefaultProps() =\u003e (newProps()\n    ..addProps(BaseTreeNodePropsMixin.defaultProps)\n  );\n\n  @override\n  @mustCallSuper\n  void componentWillMount() {\n    super.componentWillMount();\n\n    bindSub();\n  }\n\n  @override\n  @mustCallSuper\n  void componentWillUnmount() {\n    super.componentWillUnmount();\n\n    unbindSub();\n  }\n\n  @override\n  render() {\n    var style = \u003cString, dynamic\u003e{}\n      ..['paddingLeft'] = props.node.depth * 28\n      ..['height'] = '100%';\n\n    var children = [];\n\n    if (props.isScrolling) {\n      children.add('Loading');\n    } else {\n      children.addAll([\n        props.node.content,\n        _renderToggleButton(),\n        _renderToggleAllButton(),\n      ]);\n    }\n\n    return (Dom.div()\n      ..style = style\n    )(children);\n  }\n\n  ReactElement _renderToggleButton() {\n    if (props.node.isLeaf) return null;\n\n    return (Dom.button()\n      ..onClick = _handleExpansionToggleClick\n      ..key = 'toggle'\n    )(expanderText);\n  }\n\n  ReactElement _renderToggleAllButton() {\n    if (props.node.isLeaf) return null;\n\n    return (Dom.button()\n      ..onClick = _handleExpansionAllToggleClick\n      ..key = 'toggle all'\n    )('$expanderText all');\n  }\n\n  void _handleExpansionAllToggleClick(_) {\n    toggle(all: true);\n  }\n\n  void _handleExpansionToggleClick(_) {\n    toggle();\n  }\n}\n```\n\n### Props\n\n| Name | Type | Required | Default Value | Description |\n|:-----|:-----|:-----|:-----|:-----|\n| `node` | `TreeNode` | Yes | - | The backing `TreeNode` of this component. |\n| `index` | `int` | Yes | - | The index of this component. |\n| `isScrolling` | `bool` | No | `false` | Whether the component is being scrolled. |\n\n### API Methods\n\n| Name | Description |\n|:-----|:-----|\n| `expand({bool all = false})` | Expand the backing `TreeNode`, optionally expand all child nodes. |\n| `collapse({bool all = false})` | Collapse the backing `TreeNode`, optionally collapse all child nodes. |\n| `toggle({bool all = false})` | Toggle the expanded state of the backing `TreeNode`, optionally toggle all child nodes. |\n\n## Acknowledgments\n\nThis library's `VirtualList` is a Dart port of [react-tiny-virtual-list](https://github.com/clauderic/react-tiny-virtual-list#acknowledgments)'s `VirtualList`, with some added features. And the `VirtualTree` renders the said `VirtualList`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacehensley%2Fvirtual","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjacehensley%2Fvirtual","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacehensley%2Fvirtual/lists"}