Documentation
Welcome to the Blueprint Datagrid documentation! Blueprint Datagrid is an enhanced table component for Blueprint 5. It adds features like paging, sorting and filtering to basic Blueprint tables. Blueprint Datagrid is built with Blueprint components and styling and stays faithful to the look-and-feel of the library in both dark and light mode. It supports and is written in Typescript.
Example
The following example shows most of the current features, like paging, sorting, filtering, row-level actions and custom cell formatting:
| Name | Species | Heat Lower Bound (SHU) | Heat Upper Bound (SHU) | Rare | Actions |
|---|---|---|---|---|---|
| Jalapeno | Capsicum annuum | 4000 | 8500 | ||
| Inca Peach Drop | Capsicum baccatum | 55000 | 100000 | ||
| Habanero Red Savina | Capsicum chinense | 100000 | 350000 | ||
| Yaki Blue | Capsicum chinense | 150000 | 600000 | ||
| Fish Pepper | Capsicum annuum | 5000 | 30000 |
Dependencies
Blueprint Datagrid depends on the following Blueprint 5 packages:
The exact versions of these packages can be found in the project's package.json.Installation
Install Blueprint Datagrid with npm (or the package manager of your choice):
npm install @alex-c/blueprint-datagridUsage
A Blueprint Datagrid is created with the Datagrid component and by passing it an array of objects as dataSource, which contains the data to use as the contents of the table. The Datagrid is mainy configured by passing additional components to it's slot, like Columns or the Toolbar component, which can hold additional controls like the Pager:
<Datagrid dataSource={varieties}>
<Column field="name" label="Name" />
<Column field="shuUpperBound" label="Heat (SHU)" type={ColumnType.NUMBER} />
<Column field="rare" label="Rare" type={ColumnType.BOOLEAN} />
<Toolbar position={ToolbarPosition.BOTTOM}>
<Pager elementsPerPage={5} align={Alignment.RIGHT} />
</Toolbar>
</Datagrid>