@carbon/react/es/components/DataTable/TableHeader.d.ts

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React, { type HTMLAttributes, type MouseEventHandler, type ReactNode } from 'react';
import type { TranslateWithId } from '../../types/common';
import { sortStates, type DataTableSortState } from './state/sortStates';
declare const translationIds: {
    readonly 'carbon.table.header.icon.description': "carbon.table.header.icon.description";
};
type TranslationKey = keyof typeof translationIds;
interface TableHeaderTranslationArgs {
    header: ReactNode;
    isSortHeader?: boolean;
    sortDirection?: DataTableSortState;
    sortStates: typeof sortStates;
}
export interface TableHeaderProps extends HTMLAttributes<HTMLTableCellElement & HTMLButtonElement>, TranslateWithId<TranslationKey, TableHeaderTranslationArgs> {
    /**
     * Pass in children that will be embedded in the table header label
     */
    children?: ReactNode;
    /**
     * Specify an optional className to be applied to the container node
     */
    className?: string;
    /**
     * Specify `colSpan` as a non-negative integer value to indicate how
     * many columns the TableHeader cell extends in a table
     */
    colSpan?: number;
    /**
     * Supply an id to the th element.
     */
    id?: string;
    /**
     * Specify whether this header is the header by which a table is being sorted
     * by
     */
    isSortHeader?: boolean;
    /**
     * Specify whether this header is one through which a user can sort the table
     */
    isSortable?: boolean;
    /**
     * Hook that is invoked when the header is clicked
     */
    onClick?: MouseEventHandler<HTMLButtonElement>;
    /**
     * Specify the scope of this table header. You can find more info about this
     * attribute at the following URL:
     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
     */
    scope?: string;
    /**
     * @deprecated please use decorator instead.
     * Provide a `Slug` component to be rendered inside the `TableSlugRow` component
     */
    slug?: ReactNode;
    /**
     * **Experimental**: Provide a `decorator` component to be rendered inside the `TableDecoratorRow` component
     */
    decorator?: ReactNode;
    /**
     * Specify which direction we are currently sorting by, should be one of DESC,
     * NONE, or ASC.
     */
    sortDirection?: DataTableSortState;
}
declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
export default TableHeader;