Advanced components for presenting and organizing data including tables, lists, tags, and structured displays with sorting, filtering, and interactive capabilities.
Comprehensive data table component with sorting, filtering, selection, expansion, and batch actions.
/**
* Advanced data table with render props pattern
*/
interface DataTableProps<RowType = any, ColTypes = any> {
/** Table rows data */
rows: DataTableRow<ColTypes>[];
/** Table headers configuration */
headers: DataTableHeader[];
/** Render prop function for table UI */
render?: (props: DataTableRenderProps<RowType, ColTypes>) => React.ReactNode;
/** Enable sorting functionality */
sortable?: boolean;
/** Use zebra striping */
useZebraStyles?: boolean;
/** Table size variant */
size?: "xs" | "sm" | "md" | "lg" | "xl";
/** Enable selection */
radio?: boolean;
/** Localization object */
locale?: string;
/** Use static width */
useStaticWidth?: boolean;
/** Selection change handler */
onSelectionChange?: (selectedRows: DataTableRow<ColTypes>[]) => void;
}
/**
* Data table row structure
*/
interface DataTableRow<T = any> {
/** Unique row identifier */
id: string;
/** Row cell data */
cells: DataTableCell<T>[];
/** Disabled state */
disabled?: boolean;
/** Row is selected */
isSelected?: boolean;
/** Row is expanded */
isExpanded?: boolean;
}
/**
* Data table cell structure
*/
interface DataTableCell<T = any> {
/** Cell unique identifier */
id: string;
/** Cell value */
value: T;
/** Cell display info */
info?: {
header: string;
};
}
/**
* Data table header configuration
*/
interface DataTableHeader {
/** Unique header identifier */
key: string;
/** Header display text */
header: string;
/** Enable sorting for this column */
isSortable?: boolean;
}
/**
* Render props provided to DataTable render function
*/
interface DataTableRenderProps<RowType, ColTypes> {
/** Processed rows data */
rows: DataTableRow<ColTypes>[];
/** Headers configuration */
headers: DataTableHeader[];
/** Get header element props */
getHeaderProps: (options: { header: DataTableHeader; isSortable?: boolean }) => any;
/** Get row element props */
getRowProps: (options: { row: DataTableRow<ColTypes> }) => any;
/** Get table element props */
getTableProps: () => any;
/** Get selection props for checkboxes */
getSelectionProps: () => any;
/** Get batch action props */
getBatchActionProps: () => any;
/** Get toolbar props */
getToolbarProps: () => any;
/** Currently selected rows */
selectedRows: DataTableRow<ColTypes>[];
/** Table container props */
getTableContainerProps: () => any;
}Table Sub-components:
/**
* Table element wrapper
*/
interface TableProps extends React.ComponentPropsWithoutRef<"table"> {
/** Enable zebra striping */
useZebraStyles?: boolean;
/** Table size */
size?: "xs" | "sm" | "md" | "lg" | "xl";
/** Use static width */
useStaticWidth?: boolean;
/** Enable sticky header */
stickyHeader?: boolean;
}
/**
* Table row component
*/
interface TableRowProps extends React.ComponentPropsWithoutRef<"tr"> {
/** Row is header row */
header?: boolean;
/** Row is selected */
isSelected?: boolean;
/** Row is expanded */
isExpanded?: boolean;
}
/**
* Table cell component
*/
interface TableCellProps extends React.ComponentPropsWithoutRef<"td"> {
/** Cell is in header */
header?: boolean;
}
/**
* Table toolbar container
*/
interface TableToolbarProps {
/** Toolbar children */
children: React.ReactNode;
/** Size variant */
size?: "sm" | "md" | "lg";
/** ARIA label */
"aria-label"?: string;
}
/**
* Table batch actions container
*/
interface TableBatchActionsProps {
/** Batch action buttons */
children: React.ReactNode;
/** Selected items count */
totalSelected: number;
/** Selection change handler */
onCancel: () => void;
/** Should show batch actions */
shouldShowBatchActions?: boolean;
}Usage Examples:
import {
DataTable,
Table,
TableHead,
TableRow,
TableHeader,
TableBody,
TableCell,
TableContainer,
TableToolbar,
TableToolbarContent,
TableToolbarSearch,
TableBatchActions,
TableBatchAction,
Button
} from "@carbon/react";
const headers = [
{ key: "name", header: "Name", isSortable: true },
{ key: "status", header: "Status" },
{ key: "date", header: "Date", isSortable: true }
];
const rows = [
{
id: "1",
cells: [
{ id: "name", value: "John Doe" },
{ id: "status", value: "Active" },
{ id: "date", value: "2024-01-15" }
]
}
];
// Basic DataTable with render props
<DataTable
rows={rows}
headers={headers}
render={({
rows,
headers,
getHeaderProps,
getRowProps,
getTableProps,
getBatchActionProps,
selectedRows
}) => (
<TableContainer>
<TableToolbar>
<TableBatchActions {...getBatchActionProps()}>
<TableBatchAction onClick={() => console.log('delete')}>
Delete
</TableBatchAction>
</TableBatchActions>
<TableToolbarContent>
<TableToolbarSearch placeholder="Search..." />
<Button>Add item</Button>
</TableToolbarContent>
</TableToolbar>
<Table {...getTableProps()}>
<TableHead>
<TableRow>
{headers.map((header) => (
<TableHeader {...getHeaderProps({ header })}>
{header.header}
</TableHeader>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow {...getRowProps({ row })}>
{row.cells.map((cell) => (
<TableCell key={cell.id}>{cell.value}</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)}
/>Label and categorization components with different variants and interactive capabilities.
/**
* Basic tag component
*/
interface TagProps extends React.ComponentPropsWithoutRef<"span"> {
/** Tag content */
children: React.ReactNode;
/** Tag type/color */
type?:
| "red"
| "magenta"
| "purple"
| "blue"
| "cyan"
| "teal"
| "green"
| "gray"
| "cool-gray"
| "warm-gray"
| "high-contrast";
/** Tag size */
size?: "sm" | "md";
/** Disabled state */
disabled?: boolean;
/** Filter variant */
filter?: boolean;
/** Skeleton loading state */
skeleton?: boolean;
}
/**
* Interactive selectable tag
*/
interface SelectableTagProps extends Omit<TagProps, "onClick"> {
/** Selection change handler */
onSelectionChange?: (selected: boolean) => void;
/** Selected state */
selected?: boolean;
/** Selection text for screen readers */
selectionText?: string;
}
/**
* Dismissible tag with close button
*/
interface DismissibleTagProps extends Omit<TagProps, "onClick"> {
/** Dismiss handler */
onClose?: () => void;
/** Close button text for screen readers */
closeButtonText?: string;
}
/**
* Operational tag for actions
*/
interface OperationalTagProps extends Omit<TagProps, "onClick"> {
/** Click handler */
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
/** Disabled state */
disabled?: boolean;
}Usage Examples:
import { Tag, SelectableTag, DismissibleTag, OperationalTag } from "@carbon/react";
// Basic tags
<Tag type="blue">Status: Active</Tag>
<Tag type="green" size="sm">Approved</Tag>
// Selectable tags
<SelectableTag
type="purple"
selected={selectedTags.includes("frontend")}
onSelectionChange={(selected) => handleTagSelection("frontend", selected)}
>
Frontend
</SelectableTag>
// Dismissible tags
<DismissibleTag
type="red"
onClose={() => removeTag("error")}
closeButtonText="Remove error tag"
>
Error: Connection failed
</DismissibleTag>
// Operational tags
<OperationalTag
type="gray"
onClick={() => filterByCategory("electronics")}
>
Electronics
</OperationalTag>Structured list displays for organizing related information with consistent spacing and styling.
/**
* Structured list container
*/
interface StructuredListWrapperProps {
/** List children */
children: React.ReactNode;
/** Condensed spacing */
isCondensed?: boolean;
/** Flush variant (no borders) */
isFlush?: boolean;
/** Selection enabled */
selection?: boolean;
/** Border variant */
border?: boolean;
}
/**
* Structured list row
*/
interface StructuredListRowProps extends React.ComponentPropsWithoutRef<"div"> {
/** Row children (cells) */
children: React.ReactNode;
/** Row is in header */
head?: boolean;
/** Row label for accessibility */
label?: string;
/** Tab index for keyboard navigation */
tabIndex?: number;
}
/**
* Structured list cell
*/
interface StructuredListCellProps extends React.ComponentPropsWithoutRef<"div"> {
/** Cell content */
children: React.ReactNode;
/** Cell is in header */
head?: boolean;
/** Disable text wrapping */
noWrap?: boolean;
}
/**
* Ordered list component
*/
interface OrderedListProps extends React.ComponentPropsWithoutRef<"ol"> {
/** List items */
children: React.ReactNode;
/** Nested list */
nested?: boolean;
/** Native list styling */
native?: boolean;
}
/**
* Unordered list component
*/
interface UnorderedListProps extends React.ComponentPropsWithoutRef<"ul"> {
/** List items */
children: React.ReactNode;
/** Nested list */
nested?: boolean;
/** Native list styling */
native?: boolean;
}
/**
* List item component
*/
interface ListItemProps extends React.ComponentPropsWithoutRef<"li"> {
/** Item content */
children: React.ReactNode;
}Usage Examples:
import {
StructuredListWrapper,
StructuredListHead,
StructuredListBody,
StructuredListRow,
StructuredListCell,
OrderedList,
UnorderedList,
ListItem
} from "@carbon/react";
// Structured list
<StructuredListWrapper>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>Name</StructuredListCell>
<StructuredListCell head>Status</StructuredListCell>
<StructuredListCell head>Date</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow>
<StructuredListCell>Project Alpha</StructuredListCell>
<StructuredListCell>Active</StructuredListCell>
<StructuredListCell>2024-01-15</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredListWrapper>
// Ordered list
<OrderedList>
<ListItem>First step: Analyze requirements</ListItem>
<ListItem>Second step: Design solution</ListItem>
<ListItem>Third step: Implement and test</ListItem>
</OrderedList>
// Unordered list
<UnorderedList>
<ListItem>React components</ListItem>
<ListItem>TypeScript support</ListItem>
<ListItem>Accessibility features</ListItem>
</UnorderedList>Hierarchical data display with expandable nodes and interactive selection.
/**
* Tree view container component
*/
interface TreeViewProps {
/** Tree children (TreeNode components) */
children: React.ReactNode;
/** Multiselect mode */
multiselect?: boolean;
/** Tree label for accessibility */
label: string;
/** Hide label visually */
hideLabel?: boolean;
/** Selected node IDs */
selected?: string[];
/** Expanded node IDs */
expanded?: string[];
/** Selection change handler */
onSelect?: (
event: React.MouseEvent | React.KeyboardEvent,
data: { nodeId: string; isSelected: boolean }
) => void;
/** Expand/collapse handler */
onToggle?: (
event: React.MouseEvent | React.KeyboardEvent,
data: { nodeId: string; isExpanded: boolean }
) => void;
/** Size variant */
size?: "xs" | "sm";
}
/**
* Tree node component
*/
interface TreeNodeProps {
/** Node unique identifier */
nodeId: string;
/** Node label */
label: string;
/** Child nodes */
children?: React.ReactNode;
/** Disabled state */
disabled?: boolean;
/** Initially expanded */
isExpanded?: boolean;
/** Node icon */
renderIcon?: React.ComponentType<any>;
/** Active state */
active?: boolean;
}Usage Examples:
import { TreeView, TreeNode } from "@carbon/react";
import { Folder, Document } from "@carbon/react/icons";
<TreeView
label="File system"
multiselect
selected={selectedNodes}
onSelect={(event, { nodeId, isSelected }) => {
if (isSelected) {
setSelectedNodes([...selectedNodes, nodeId]);
} else {
setSelectedNodes(selectedNodes.filter(id => id !== nodeId));
}
}}
>
<TreeNode nodeId="root" label="Project" renderIcon={Folder}>
<TreeNode nodeId="src" label="src" renderIcon={Folder}>
<TreeNode nodeId="components" label="components" renderIcon={Folder}>
<TreeNode nodeId="button.tsx" label="Button.tsx" renderIcon={Document} />
<TreeNode nodeId="input.tsx" label="Input.tsx" renderIcon={Document} />
</TreeNode>
</TreeNode>
<TreeNode nodeId="docs" label="docs" renderIcon={Folder}>
<TreeNode nodeId="readme.md" label="README.md" renderIcon={Document} />
</TreeNode>
</TreeNode>
</TreeView>Components for displaying code snippets with syntax highlighting and copy functionality.
/**
* Code snippet display component
*/
interface CodeSnippetProps {
/** Code content */
children: string;
/** Snippet type */
type?: "single" | "multi";
/** Copy button text */
copyButtonDescription?: string;
/** Copy feedback text */
copyLabel?: string;
/** Feedback text */
feedback?: string;
/** Feedback timeout */
feedbackTimeout?: number;
/** Hide copy button */
hideCopyButton?: boolean;
/** Light theme */
light?: boolean;
/** Show more button text */
showMoreText?: string;
/** Show less button text */
showLessText?: string;
/** Wrap long lines */
wrapText?: boolean;
/** Max collapsed height */
maxCollapsedNumberOfRows?: number;
/** Max expanded height */
maxExpandedNumberOfRows?: number;
/** Minimum number of rows */
minCollapsedNumberOfRows?: number;
/** Minimum expanded rows */
minExpandedNumberOfRows?: number;
}
/**
* Inline code snippet
*/
interface CopyProps {
/** Content to copy */
children: string;
/** Copy button text */
copyButtonDescription?: string;
/** Copy feedback */
feedback?: string;
/** Feedback timeout */
feedbackTimeout?: number;
}Usage Examples:
import { CodeSnippet, Copy } from "@carbon/react";
// Multi-line code snippet
<CodeSnippet type="multi" copyButtonDescription="Copy code">
{`import { Button, TextInput } from "@carbon/react";
function MyComponent() {
return (
<div>
<TextInput labelText="Name" />
<Button>Submit</Button>
</div>
);
}`}
</CodeSnippet>
// Single line code snippet
<CodeSnippet type="single">
npm install @carbon/react
</CodeSnippet>
// Inline copy
<p>
Run <Copy>npm install @carbon/react</Copy> to install the package.
</p>/**
* Progress bar component
*/
interface ProgressBarProps {
/** Current progress value */
value?: number;
/** Maximum value */
max?: number;
/** Progress label */
label?: string;
/** Helper text */
helperText?: string;
/** Hide label */
hideLabel?: boolean;
/** Progress bar type */
type?: "default" | "inline" | "indented";
/** Size variant */
size?: "sm" | "md" | "lg";
/** Status */
status?: "active" | "finished" | "error";
}
/**
* Progress indicator (stepper)
*/
interface ProgressIndicatorProps {
/** Current step index */
currentIndex?: number;
/** Step change handler */
onChange?: (newIndex: number) => void;
/** Vertical layout */
vertical?: boolean;
/** Space equally */
spaceEqually?: boolean;
/** Progress steps */
children: React.ReactNode;
}