Blueprint UI Toolkit

The @blueprintjs/datetime2 package provides Date & Time components for the Blueprint React UI toolkit. It serves two primary purposes:

1. Re-exports: It provides re-exports of components from @blueprintjs/datetime.
2. Legacy Support: It contains legacy APIs that are re-exported aliases for components from @blueprintjs/datetime v5.x. These "V2" names are maintained for backwards compatibility with @blueprintjs/datetime2 v0.x.

Note that components previously referred to as "V3" in this package were promoted to the standard "V1" components in @blueprintjs/datetime v6.x.

The @blueprintjs/table package provides components for building highly interactive, high-scale spreadsheet-like UIs.

Key Features:

• Virtualized viewport rendering for high performance.
• Data-agnostic architecture (you manage the data binding).
• Customizable cell and header rendering.
• Selectable rows, columns, and cells.
• Resizable rows and columns.
• Editable headers and cells.
• Integrated header and context menus.

Note: If you need a simpler, standard HTML-styled table, use the HTMLTable component from @blueprintjs/core instead.

Blueprint provides a collection of over 500 vector UI icons. These icons are available in two sizes (16px and 20px) and can be used in two formats: SVG or icon fonts.

To use icons in a React application, refer to the Icon component documentation in the @blueprintjs/core package.

The @blueprintjs/select package provides a suite of React components designed for item selection and typeahead interactions:

• Select: Used for selecting a single item from a list.
• Suggest: Used for selecting an item from a list via a text input (autocomplete/typeahead).
• MultiSelect: Used for selecting multiple items from a list.
• Omnibar: A macOS Spotlight-style typeahead component for complex, multi-faceted searches.
• QueryList: A higher-order component (HOC) that manages the interaction between a query string and a list of items.

The @blueprintjs/table package provides a set of React components designed to construct highly configurable and performant tables or spreadsheets.

Key features include:

• Fixed elements: Fixed column headers and row index columns.
• Resizing: Resizable columns and rows, including double-click auto-sizing via resize handles.
• Performance: Viewport-only rendering (lazy rendering) to support large datasets at scale.
• Selection: Robust selection capabilities for columns, rows, or multiple cell regions.
• Interactivity: Right-click to copy cell region contents and support for inline editable column headers and cells.

The @blueprintjs/colors package contains the color variables for the Blueprint color palette. It currently supports two distinct color palettes:

1. Modern 4.x colors: The current standard for Blueprint.
2. Legacy 3.x colors: Provided for backward compatibility with older Blueprint versions.

The @blueprintjs/datetime package provides several React components for date and time interaction:

• DatePicker: For selecting a single date (day, month, or year).
• DateRangePicker: For selecting a range of dates.
• DateInput: A form-friendly component that combines a text input with a DatePicker inside a PopoverNext.
• DateRangeInput: A form-friendly component that combines two text inputs with a DateRangePicker inside a PopoverNext.
• TimePicker: For selecting specific time units (hour, minute, second, and millisecond).

Blueprint is a React-based UI toolkit designed for building complex, data-dense web interfaces for desktop applications running in modern browsers. It is not a mobile-first toolkit.

Core Libraries

Blueprint is distributed via several NPM packages:

• @blueprintjs/colors: Design system color variables.
• @blueprintjs/core: Core styles and components.
• @blueprintjs/datetime: Components for interacting with dates and times.
• @blueprintjs/icons: APIs for displaying icons (supports both SVG and icon font implementations).
• @blueprintjs/select: Components for selecting items from a list.
• @blueprintjs/table: A scalable and interactive spreadsheet-like table component.

The @blueprintjs/select package provides several React components for different selection patterns:

• Select: For selecting a single item from a list.
• Suggest: For selecting an item from a list via a text input.
• MultiSelect: For selecting multiple items from a list.
• Omnibar: A macOS spotlight-style typeahead component.
• QueryList: A higher-order component that manages the interaction between a query string and a list of items.

Blueprint provides support for the following modern web browsers:

• Chrome
• Firefox
• Safari
• Microsoft Edge

Note: Internet Explorer (IE) is no longer supported as of Blueprint v5.0.