Components for displaying and interacting with data including tables, trees, tags, progress indicators, and non-ideal states. These components provide consistent data presentation with interactive capabilities.
Hierarchical data display with expand/collapse and selection support.
/**
* Tree view component for hierarchical data with expand/collapse and selection
* @param props - Tree configuration, data, and event handlers
*/
function Tree<T = {}>(props: TreeProps<T>): JSX.Element;
/**
* Individual tree node component for custom rendering
* @param props - Tree node content and interaction configuration
*/
function TreeNode(props: TreeNodeProps): JSX.Element;
interface TreeProps<T = {}> extends Props {
contents: Array<TreeNodeInfo<T>>;
onNodeClick?: TreeEventHandler<T>;
onNodeCollapse?: TreeEventHandler<T>;
onNodeContextMenu?: TreeEventHandler<T>;
onNodeDoubleClick?: TreeEventHandler<T>;
onNodeExpand?: TreeEventHandler<T>;
onNodeMouseEnter?: TreeEventHandler<T>;
onNodeMouseLeave?: TreeEventHandler<T>;
}
interface TreeNodeInfo<T = {}> {
childNodes?: Array<TreeNodeInfo<T>>;
className?: string;
disabled?: boolean;
hasCaret?: boolean;
icon?: IconName | MaybeElement;
id: string | number;
isExpanded?: boolean;
isSelected?: boolean;
label: string | JSX.Element;
nodeData?: T;
secondaryLabel?: string | MaybeElement;
}
type TreeEventHandler<T = {}> = (
node: TreeNodeInfo<T>,
nodePath: number[],
e: React.MouseEvent<HTMLElement>
) => void;Usage Examples:
import { Tree, TreeNodeInfo } from "@blueprintjs/core";
const treeData: TreeNodeInfo[] = [
{
id: 1,
label: "Root Folder",
icon: "folder-close",
isExpanded: true,
childNodes: [
{
id: 2,
label: "Documents",
icon: "folder-close",
childNodes: [
{ id: 3, label: "document1.txt", icon: "document" },
{ id: 4, label: "document2.txt", icon: "document" }
]
},
{ id: 5, label: "README.md", icon: "document" }
]
}
];
<Tree
contents={treeData}
onNodeClick={(node) => console.log("Clicked:", node.label)}
onNodeExpand={(node) => console.log("Expanded:", node.label)}
/>Enhanced HTML table with consistent styling.
/**
* Enhanced HTML table with Blueprint styling and interaction support
* @param props - Table configuration and content
*/
function HTMLTable(props: HTMLTableProps): JSX.Element;
interface HTMLTableProps extends React.TableHTMLAttributes<HTMLTableElement>, Props {
bordered?: boolean;
compact?: boolean;
interactive?: boolean;
small?: boolean;
striped?: boolean;
}Progress indicators for operations and loading states.
/**
* Horizontal progress bar with customizable styling and animation
* @param props - Progress value, styling, and animation options
*/
function ProgressBar(props: ProgressBarProps): JSX.Element;
/**
* Circular loading spinner with size and styling options
* @param props - Spinner size, styling, and animation configuration
*/
function Spinner(props: SpinnerProps): JSX.Element;
interface ProgressBarProps extends IntentProps, Props {
animate?: boolean;
stripes?: boolean;
value?: number;
}
interface SpinnerProps extends IntentProps, Props {
size?: number | SpinnerSize;
tagName?: keyof JSX.IntrinsicElements;
value?: number;
}
enum SpinnerSize {
SMALL = 20,
STANDARD = 50,
LARGE = 100
}Label and input components for categorization and selection.
/**
* Simple tag/chip component for labels and categories
* @param props - Tag content, styling, and interaction options
*/
function Tag(props: TagProps): JSX.Element;
/**
* Compound tag with separate sections for complex labeling
* @param props - Compound tag content and section configuration
*/
function CompoundTag(props: CompoundTagProps): JSX.Element;
/**
* Input component for adding and managing multiple tags
* @param props - Tag input configuration, values, and event handlers
*/
function TagInput(props: TagInputProps): JSX.Element;
interface TagProps extends IntentProps, Props {
active?: boolean;
fill?: boolean;
icon?: IconName | MaybeElement;
interactive?: boolean;
large?: boolean;
minimal?: boolean;
multiline?: boolean;
onRemove?: (event: React.MouseEvent<HTMLButtonElement>, tagProps: TagProps) => void;
removable?: boolean;
rightIcon?: IconName | MaybeElement;
round?: boolean;
htmlTitle?: string;
children?: React.ReactNode;
}
interface CompoundTagProps extends Props {
disabled?: boolean;
fill?: boolean;
icon?: IconName | MaybeElement;
interactive?: boolean;
large?: boolean;
leftContent: React.ReactNode;
minimal?: boolean;
onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
removable?: boolean;
rightContent: React.ReactNode;
round?: boolean;
}
interface TagInputProps extends IntentProps, Props {
addOnBlur?: boolean;
addOnPaste?: boolean;
disabled?: boolean;
fill?: boolean;
inputProps?: React.HTMLProps<HTMLInputElement>;
inputRef?: React.Ref<HTMLInputElement>;
inputValue?: string;
large?: boolean;
leftIcon?: IconName;
onAdd?: (values: string[], method: TagInputAddMethod) => boolean | void;
onChange?: (values: React.ReactNode[]) => boolean | void;
onInputChange?: React.FormEventHandler<HTMLInputElement>;
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
onRemove?: (value: React.ReactNode, index: number) => void;
placeholder?: string;
rightElement?: React.ReactNode;
separator?: string | RegExp | false;
tagProps?: Partial<TagProps> | ((value: React.ReactNode, index: number) => Partial<TagProps>);
values: readonly React.ReactNode[];
}
enum TagInputAddMethod {
BLUR = "blur",
PASTE = "paste",
TYPE = "type"
}Usage Examples:
import { Tag, CompoundTag, TagInput, Intent, TagInputAddMethod } from "@blueprintjs/core";
// Basic tags
<Tag intent={Intent.PRIMARY}>Primary Tag</Tag>
<Tag removable onRemove={() => console.log("removed")}>
Removable Tag
</Tag>
// Compound tag
<CompoundTag
leftContent="Category"
rightContent="Value"
onRemove={() => console.log("compound tag removed")}
removable
/>
// Tag input
<TagInput
values={tags}
onChange={(values) => setTags(values)}
placeholder="Add tags..."
tagProps={{ intent: Intent.PRIMARY }}
/>Empty states and error conditions with messaging and actions.
/**
* Component for displaying empty states, errors, and non-ideal conditions
* @param props - Non-ideal state content, icon, and action configuration
*/
function NonIdealState(props: NonIdealStateProps): JSX.Element;
interface NonIdealStateProps extends Props {
action?: React.ReactElement<ButtonProps>;
children?: React.ReactNode;
description?: React.ReactNode;
icon?: IconName | MaybeElement;
iconSize?: NonIdealStateIconSize;
layout?: "horizontal" | "vertical";
title?: React.ReactNode;
}
enum NonIdealStateIconSize {
STANDARD = 48,
SMALL = 32,
EXTRA_SMALL = 20
}Text display with truncation and overflow handling.
/**
* Text component with ellipsis truncation and title tooltip
* @param props - Text content and display configuration
*/
function Text(props: TextProps): JSX.Element;
interface TextProps extends Props {
ellipsize?: boolean;
tagName?: keyof JSX.IntrinsicElements;
title?: string;
children?: React.ReactNode;
}Component for displaying entity information with icons and metadata.
/**
* Component for displaying entity titles with icons, subtitles, and tags
* @param props - Entity information and display configuration
*/
function EntityTitle(props: EntityTitleProps): JSX.Element;
interface EntityTitleProps extends Props {
ellipsize?: boolean;
heading?: React.ReactNode;
icon?: IconName | MaybeElement;
loading?: boolean;
subtitle?: React.ReactNode;
tags?: React.ReactNode;
title?: React.ReactNode;
}List component with overflow handling and customizable overflow behavior.
/**
* List component that handles overflow with customizable overflow rendering
* @param props - List items, overflow behavior, and rendering configuration
*/
function OverflowList<T>(props: OverflowListProps<T>): JSX.Element;
interface OverflowListProps<T> extends Props {
alwaysRenderOverflow?: boolean;
collapseFrom?: Boundary;
items: T[];
itemRenderer: (item: T, index: number) => React.ReactNode;
minVisibleItems?: number;
observeParents?: boolean;
onOverflow?: (overflowItems: T[]) => void;
overflowRenderer: (overflowItems: T[]) => React.ReactNode;
style?: React.CSSProperties;
tagName?: keyof JSX.IntrinsicElements;
visibleItemRenderer?: (item: T, index: number) => React.ReactNode;
}Component for detecting element size changes.
/**
* Component that detects size changes of its container element
* @param props - Resize detection configuration and callbacks
*/
function ResizeSensor(props: ResizeSensorProps): JSX.Element;
interface ResizeSensorProps extends Props {
observeParents?: boolean;
onResize: (entries: ResizeEntry[]) => void;
targetRef?: React.RefObject<HTMLElement>;
children?: React.ReactNode;
}
interface ResizeEntry {
contentRect: DOMRectReadOnly;
target: Element;
}Usage Examples:
import {
HTMLTable,
ProgressBar,
Spinner,
NonIdealState,
Text,
EntityTitle,
OverflowList,
ResizeSensor,
Button,
Intent
} from "@blueprintjs/core";
// HTML Table
<HTMLTable striped bordered>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john@example.com</td>
<td>Admin</td>
</tr>
</tbody>
</HTMLTable>
// Progress indicators
<ProgressBar value={0.7} intent={Intent.SUCCESS} animate />
<Spinner size={Spinner.SIZE_SMALL} intent={Intent.PRIMARY} />
// Non-ideal state
<NonIdealState
icon="search"
title="No results found"
description="Try adjusting your search criteria"
action={<Button text="Clear filters" onClick={clearFilters} />}
/>
// Text with ellipsis
<Text ellipsize>
This is a very long text that will be truncated with ellipsis
</Text>
// Entity title
<EntityTitle
icon="person"
title="John Doe"
subtitle="Software Engineer"
tags={<Tag>Active</Tag>}
/>
// Overflow list
<OverflowList
items={items}
itemRenderer={(item, index) => <Button key={index} text={item.name} />}
overflowRenderer={(items) => (
<Button text={`+${items.length} more`} />
)}
/>
// Resize sensor
<ResizeSensor onResize={(entries) => console.log("Size changed:", entries)}>
<div>Resizable content</div>
</ResizeSensor>