CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-patternfly--react-table

React table components for PatternFly design system with sorting, selection, expansion, and editing capabilities

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

index.mddocs/

PatternFly React Table

PatternFly React Table is a comprehensive React component library that provides composable table components following the PatternFly design system. It offers both basic table rendering capabilities and advanced features like sorting, selection, expansion, editing, drag-and-drop, and favorites.

Package Information

  • Package Name: @patternfly/react-table
  • Package Type: npm
  • Language: TypeScript/React
  • Installation: npm install @patternfly/react-table

Core Imports

import {
  Table,
  Thead,
  Tbody,
  Tr,
  Th,
  Td,
  Caption
} from "@patternfly/react-table";

CommonJS:

const {
  Table,
  Thead,
  Tbody,
  Tr,
  Th,
  Td,
  Caption
} = require("@patternfly/react-table");

Basic Usage

import { Table, Thead, Tbody, Tr, Th, Td } from "@patternfly/react-table";

function BasicTable() {
  return (
    <Table aria-label="Simple table">
      <Thead>
        <Tr>
          <Th>Name</Th>
          <Th>Role</Th>
          <Th>Department</Th>
        </Tr>
      </Thead>
      <Tbody>
        <Tr>
          <Td dataLabel="Name">John Doe</Td>
          <Td dataLabel="Role">Developer</Td>
          <Td dataLabel="Department">Engineering</Td>
        </Tr>
        <Tr>
          <Td dataLabel="Name">Jane Smith</Td>
          <Td dataLabel="Role">Designer</Td>
          <Td dataLabel="Department">UX</Td>
        </Tr>
      </Tbody>
    </Table>
  );
}

Architecture

PatternFly React Table is built around several key components:

  • Core Components: Basic table structure components (Table, Thead, Tbody, Tr, Th, Td, Caption)
  • Specialized Components: Pre-built components for common table features (ActionsColumn, SortColumn, SelectColumn)
  • Interactive Features: Built-in support for sorting, selection, expansion, editing, and drag-and-drop
  • Layout System: Responsive design with sticky headers/columns and scrolling containers
  • Accessibility: Full keyboard navigation, screen reader support, and ARIA compliance
  • Theming: Integration with PatternFly design tokens and CSS variables

Capabilities

Core Table Structure

Basic table building blocks for creating structured data displays with full accessibility support.

// Main table container
function Table(props: TableProps): React.ForwardRefExoticComponent;

// Table structure components
function Thead(props: TheadProps): React.ForwardRefExoticComponent;
function Tbody(props: TbodyProps): React.ForwardRefExoticComponent;
function Tr(props: TrProps): React.ForwardRefExoticComponent;
function Th(props: ThProps): React.ForwardRefExoticComponent;
function Td(props: TdProps): React.ForwardRefExoticComponent;
function Caption(props: CaptionProps): React.FunctionComponent;

Core Table Structure

Interactive Features

Components and functionality for user interactions including sorting, selection, expansion, and actions.

// Specialized interaction components
function ActionsColumn(props: ActionsColumnProps): React.ForwardRefExoticComponent;
function SortColumn(props: SortColumnProps): React.FunctionComponent;
function SelectColumn(props: SelectColumnProps): React.FunctionComponent;
function CollapseColumn(props: CollapseColumnProps): React.FunctionComponent;
function DraggableCell(props: DraggableCellProps): React.FunctionComponent;
function EditColumn(props: EditColumnProps): React.FunctionComponent;

// Key interaction types
type OnSort = (event: React.MouseEvent, columnIndex: number, sortByDirection: SortByDirection, extraData: IExtraColumnData) => void;
type OnSelect = (event: React.FormEvent<HTMLInputElement>, isSelected: boolean, rowIndex: number, rowData: IRowData, extraData: IExtraData) => void;
type OnCollapse = (event: React.MouseEvent, rowIndex: number, isOpen: boolean, rowData: IRowData, extraData: IExtraData) => void;

Interactive Features

Content and Display

Components for rendering and formatting table content with responsive text handling and favorites.

// Content components
function TableText(props: TableTextProps): React.FunctionComponent;
function ExpandableRowContent(props: ExpandableRowContentProps): React.FunctionComponent;
function FavoritesCell(props: FavoritesCellProps): React.FunctionComponent;
function HeaderCellInfoWrapper(props: ColumnHelpWrapperProps): React.FunctionComponent;

// Text formatting options
enum WrapModifier {
  wrap = 'wrap',
  nowrap = 'nowrap',
  truncate = 'truncate',
  breakWord = 'breakWord',
  fitContent = 'fitContent'
}

Content and Display

Editing Capabilities

Inline editing components for text and select inputs with validation support.

// Editing components
function EditableTextCell(props: IEditableTextCell): React.FunctionComponent;
function EditableSelectInputCell(props: IEditableSelectInputCell): React.FunctionComponent;

// Editing event handlers
type OnRowEdit = (event: React.MouseEvent<HTMLButtonElement>, type: RowEditType, isEditable?: boolean, rowIndex?: number, validationErrors?: RowErrors) => void;
type RowEditType = 'save' | 'cancel' | 'edit';

Editing Capabilities

Layout and Scrolling

Components for managing table layout, scrolling behavior, and responsive design.

// Layout components
function OuterScrollContainer(props: OuterScrollContainerProps): React.FunctionComponent;
function InnerScrollContainer(props: InnerScrollContainerProps): React.FunctionComponent;
function RowWrapper(props: RowWrapperProps): React.Component;
function TreeRowWrapper(props: RowWrapperProps): React.FunctionComponent;

// Grid breakpoints
enum TableGridBreakpoint {
  none = '',
  grid = 'grid',
  gridMd = 'grid-md',
  gridLg = 'grid-lg',
  gridXl = 'grid-xl',
  grid2xl = 'grid-2xl'
}

Layout and Scrolling

Utilities and Decorators

Utility functions, decorators, and transformers for customizing table behavior, appearance, and interactions.

// Behavior decorators
function selectable(onSelect: OnSelect, selectableRowCaptionText?: string): ITransform;
function sortable(onSort: OnSort, options?: ISortBy): ITransform;
function cellActions(actions: IActions | IActionsResolver, areActionsDisabled?: IAreActionsDisabled): ITransform;
function collapsible(onCollapse: OnCollapse): ITransform;
function editable(onRowEdit?: OnRowEdit, validationErrors?: any): ITransform;
function favoritable(onFavorite: OnFavorite): ITransform;

// Layout decorators
function wrappable(): ITransform;
function breakWord(): ITransform;
function fitContent(): ITransform;
function nowrap(): ITransform;
function truncate(): ITransform;
function textCenter(): ITransform;
function cellWidth(width: 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 60 | 70 | 80 | 90 | 100): ITransform;

// Transformers and formatters
function defaultTitle(data?: IFormatterValueType): any;
function emptyTD(): ITransform;
function scopeColTransformer(): ITransform;
function emptyCol(label?: IFormatterValueType): ITransform;

Utilities and Decorators

Types

// Core table props
interface TableProps extends React.HTMLProps<HTMLTableElement>, OUIAProps {
  'aria-label'?: string;
  variant?: TableVariant | 'compact';
  borders?: boolean;
  gridBreakPoint?: '' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl';
  role?: string;
  isStickyHeader?: boolean;
  isTreeTable?: boolean;
  isNested?: boolean;
  isStriped?: boolean;
  isExpandable?: boolean;
  hasAnimations?: boolean;
  hasNoInset?: boolean;
  nestedHeaderColumnSpans?: number[];
  selectableRowCaptionText?: string;
  ouiaId?: number | string;
  ouiaSafe?: boolean;
}

// Cell base props shared by Th and Td
interface BaseCellProps {
  children?: React.ReactNode;
  className?: string;
  component?: React.ReactNode;
  textCenter?: boolean;
  modifier?: 'breakWord' | 'fitContent' | 'nowrap' | 'truncate' | 'wrap';
  width?: 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 60 | 70 | 80 | 90 | 100;
  visibility?: (keyof IVisibility)[];
  innerRef?: React.Ref<any>;
}

// Table variants and grid breakpoints
enum TableVariant {
  compact = 'compact'
}

enum TableGridBreakpoint {
  none = '',
  grid = 'grid',
  gridMd = 'grid-md', 
  gridLg = 'grid-lg',
  gridXl = 'grid-xl',
  grid2xl = 'grid-2xl'
}

// Row and data structures
interface IRow extends RowType {
  cells?: (React.ReactNode | IRowCell)[];
  isOpen?: boolean;
  isEditable?: boolean;
  isClickable?: boolean;
  isRowSelected?: boolean;
  isValid?: boolean;
  rowEditValidationRules?: IValidatorDef[];
  rowEditBtnAriaLabel?: (idx: number) => string;
  rowSaveBtnAriaLabel?: (idx: number) => string;
  rowCancelBtnAriaLabel?: (idx: number) => string;
  parent?: number;
  compoundParent?: number;
  fullWidth?: boolean;
  noPadding?: boolean;
  heightAuto?: boolean;
  showSelect?: boolean;
  isExpanded?: boolean;
  isFirstVisible?: boolean;
  isLastVisible?: boolean;
  selected?: boolean;
  disableSelection?: boolean;
  favorited?: boolean;
  favoritesProps?: any;
  props?: any;
}

interface IRowData extends IRow {
  disableActions?: boolean;
}

// Action definitions
interface IAction extends Omit<DropdownItemProps, 'title' | 'onClick'>, Pick<ButtonProps, 'variant'> {
  isSeparator?: boolean;
  itemKey?: string;
  title?: React.ReactNode;
  isAriaDisabled?: boolean;
  tooltipProps?: TooltipProps;
  onClick?: (event: React.MouseEvent, rowIndex: number, rowData: IRowData, extraData: IExtraData) => void;
  isOutsideDropdown?: boolean;
  shouldCloseOnClick?: boolean;
}

type IActions = (IAction | ISeparator)[];
type IActionsResolver = (rowData: IRowData, extraData: IExtraData) => (IAction | ISeparator)[];

// Sort configuration
interface ISortBy {
  index?: number;
  direction?: 'asc' | 'desc';
  defaultDirection?: 'asc' | 'desc';
}

enum SortByDirection {
  asc = 'asc',
  desc = 'desc'
}

// Validation
interface IValidatorDef {
  validator: (value: string) => boolean;
  errorText: string;
  name: string;
}

interface RowErrors {
  [name: string]: string[];
}

// Transform and formatter interfaces
interface ITransform {
  (label?: IFormatterValueType, extra?: IExtra): decoratorReturnType;
}

interface IFormatter {
  (data?: IFormatterValueType, extra?: IExtra): formatterValueType & decoratorReturnType;
}

interface decoratorReturnType {
  component?: React.ComponentType<any>;
  className?: string; 
  isVisible?: boolean;
  scope?: string;
  parentId?: string | number;
  [key: string]: any;
}

// Visibility configuration
interface IVisibility {
  hidden: string;
  hiddenOnSm: string;
  hiddenOnMd: string;
  hiddenOnLg: string;
  hiddenOnXl: string;
  hiddenOn2Xl: string;
  visibleOnSm: string;
  visibleOnMd: string;
  visibleOnLg: string;
  visibleOnXl: string;
  visibleOn2Xl: string;
}

// Column configuration
interface IColumn {
  title: React.ReactNode;
  transforms?: ITransform[];
  formatters?: IFormatter[];
  cellTransforms?: ITransform[];
  cellFormatters?: IFormatter[];
  props?: any;
  extraParams?: {
    sortBy?: ISortBy;
    onSort?: OnSort;
    onCollapse?: OnCollapse;
    onExpand?: OnExpand;
    onSelect?: OnSelect;
    selectVariant?: 'checkbox' | 'radio';
    onRowEdit?: OnRowEdit;
    onFavorite?: OnFavorite;
    actionsToggle?: (props: CustomActionsToggleProps) => React.ReactNode;
    [key: string]: any;
  };
}

// Cell configuration
interface ICell {
  title?: React.ReactNode;
  transforms?: ITransform[];
  formatters?: IFormatter[];
  cellTransforms?: ITransform[];
  cellFormatters?: IFormatter[];
  props?: any;
}

// Row cell content
interface IRowCell<T = any> {
  title?: React.ReactNode | RowCellContent<T>;
  props?: any;
}

type RowCellContent<T = any> = (
  value?: string,
  rowIndex?: number,
  cellIndex?: number,
  props?: T
) => void;

// Additional event handlers
type OnExpand = (
  event: React.MouseEvent,
  rowIndex: number,
  colIndex: number,
  isOpen: boolean,
  rowData: IRowData,
  extraData: IExtraData
) => void;

type OnFavorite = (
  event: React.MouseEvent,
  isFavorited: boolean,
  rowIndex: number,
  rowData: IRowData,
  extraData: IExtraData
) => void;

type OnTreeRowCollapse = (
  event: any,
  rowIndex: number, 
  title: React.ReactNode,
  rowData: IRowData
) => void;

Install with Tessl CLI

npx tessl i tessl/npm-patternfly--react-table

docs

content-display.md

core-components.md

editing.md

index.md

interactive-features.md

layout-scrolling.md

utilities.md

tile.json