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
repository instead.
Note: This component requires 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"
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:
import { PropertyGrid, PropertyGridRow } from "@typescene/treegrid";
export default (
<PropertyGrid
rows={[
PropertyGridRow.with({
label: "First row",
// ...
}),
// ... etc.
]}
/>
);
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
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:
- 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.
- 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.