https://github.com/typescene/typescene-treegrid
Typescene TreeGrid and PropertyGrid components
https://github.com/typescene/typescene-treegrid
Last synced: 4 months ago
JSON representation
Typescene TreeGrid and PropertyGrid components
- Host: GitHub
- URL: https://github.com/typescene/typescene-treegrid
- Owner: typescene
- License: mit
- Created: 2019-01-16T04:37:08.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-08-12T20:57:16.000Z (almost 5 years ago)
- Last Synced: 2025-10-12T01:38:39.903Z (8 months ago)
- Language: TypeScript
- Size: 286 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TreeGridView & PropertyGridView
This package contains the `TreeGridView` and `PropertyGridView` components. These can be used to display hierarchical lists and grid controls in a Typescene application.
NOTE: if you're looking for an introduction to how components should be written using Typescene, this isn't the right place. For various reasons (see Notes below), the implementation of a collapsible tree-grid is very complex. For a better example, take a look at the [`typescene/sample-project-todo`](https://github.com/typescene/sample-project-todo) repository instead.
## Installation & Usage
**Note:** This component requires [Typescene](https://github.com/typescene/typescene).
To add one of these components to your application, add the NPM package first:
`npm i -D @typescene/treegrid`
Then import the `TreeGridView` and/or `PropertyGridView` classes (or `TreeGrid` and/or `PropertyGrid` for JSX views) using an import statement such as:
`import { PropertyGrid, PropertyGridRow } from "@typescene/treegrid"`
### JSX
Note that _rows_ within grids are NOT represented by UI components, hence these cannot be preset using JSX syntax.
The correct way to include a property grid component in JSX is as follows:
```tsx
import { PropertyGrid, PropertyGridRow } from "@typescene/treegrid";
export default (
);
```
## Demo
The `demo/` folder contains a working example.
Clone the source repository, and run the following commands:
- `npm install`
- `npm run build`
- `cd demo`
- `npm install`
- `npm start`
## Notes
The code in this repository is relatively complex, and probably not a good first project to look at (the source code, that is) if you're new to Typescene. There are two primary reasons for this:
1. Because of the way the Document Object Model (DOM) works, and specifically the limitations of the Flexible Box Model (aka flexbox, which is what Typescene uses to render its UI components), the grid is rendered as a set of _columns_ rather than simply as rows. This means that all cells within a column are guaranteed to be of the same width, however it also means that the implementation for updating cells within one row is _much_ more complicated than otherwise.
2. For efficiency, the implementation takes care of updating only the necessary cells when showing/hiding or updating particular rows. This is done using a linked list of visible cells, which adds lots of complexity.