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. 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:

• Paging
• Sorting for text, number and boolean columns
• Filtering for text, number and boolean columns
• 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 } from "@alex-c/blueprint-datagrid";

//...

<Datagrid dataSource={varieties}>
  <Column field="name" label="Name" filter />
  <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.