Blueprint Datagrid

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.

Documentation and examples can be found on the project's Github Page!

Status

Blueprint Datagrid is currently in active development, which means that the API ist not considered stable. Progress is being tracked in this project. You can find the current version on NPM.

Why

Blueprint has two table components, the basic HTMLTable, that provides Blueprint styling to native HTML tables, and the Table component, which allows to build highly interactive spreadsheet-like apps. Blueprint Datagrid aims to hit the middle ground, wrapping the HTMLTable and adding common functionality like paging, sorting and filtering.

Features

Currently, Blueprint Datagrid supports the following features:

• Text, number, boolean and date/time columns with appropriate formatting
• Paging
• Sorting
• Filtering with different filtering modes based on column type
• Row-level actions
• Custom formatting/rendering of cells

More details and examples can be found in the documentation!

Getting Started

Blueprint Datagrid can be installed using npm (or the package manager of your choice):

npm install @alex-c/blueprint-datagrid

In your react project, import and use the Datagrid component as well as other needed components:

import { Column, ColumnType, Datagrid, Pager, Toolbar, ToolbarPosition } from "@alex-c/blueprint-datagrid";

//...

<Datagrid dataSource={varieties}>
  <Column field="name" label="Name" filterable />
  <Column field="shuUpperBound" label="Heat (SHU)" type={ColumnType.NUMBER} sortable />
  <Column field="rare" label="Rare" type={ColumnType.BOOLEAN} />
  <Toolbar position={ToolbarPosition.BOTTOM}>
    <Pager elementsPerPage={5} align={Alignment.RIGHT} />
  </Toolbar>
</Datagrid>;

You can find more information on how to use Blueprint Datagrid in the documentation.