@react-md/table/types/TableCell.d.ts

Create responsive data tables and accessible fixed tables

import type { ReactNode, TdHTMLAttributes, ThHTMLAttributes } from "react";
import type { TableCellConfig } from "./config";
import type { SortOrder } from "./TableCellContent";
export declare type TableCellAttributes = Omit<TdHTMLAttributes<HTMLTableCellElement> | ThHTMLAttributes<HTMLTableCellElement>, "colSpan" | "scope">;
export interface TableCellOptions extends TableCellConfig {
    /**
     * This is a bit of a "weird" prop since all it does is apply `width: 100%` to
     * this cell. This will make this specific cell fill the remaining width of
     * the table (if there is any). If no cells have this prop enabled and the
     * `fullWidth` table configuration is enabled, all cells will have an
     * equal-sized width.
     */
    grow?: boolean;
    /**
     * This prop is only valid when the `header` prop is enabled or the
     * `TableCell` is a child of the `TableHeader` component. This will generally
     * be used with a value of `"row"` if you have table headers that are at the
     * start of each row instead of at the top of the table.
     */
    scope?: "row" | "col" | "rowgroup" | "colgroup";
    /**
     * The number of columns that the cell should span. If you would like a cell
     * to span an entire row ignoring the other rows and cells, you can set this
     * value to the number of columns within your table or `"100%"`.
     */
    colSpan?: number | "100%";
    /**
     * If this is a trueish value, the cell will become a sticky cell that will be
     * fixed while the user scrolls the table. When this is a `boolean` (or
     * inherited from a `TableHeader`) or set to `"header"`, the cell will act as
     * a sticky header that will be visible for vertical scrolling.
     *
     * When this is set to `"cell"`, the cell will be fixed to the left or right
     * for horizontal scrolling.
     *
     * Finally, if this is set to `"header-cell"`, it will be a combination of
     * both vertical and horizontal scrolling. This means that other sticky header
     * cells will scroll beneath this cell.
     */
    sticky?: boolean | "header" | "cell" | "header-cell";
}
export interface TableCellProps extends TableCellAttributes, TableCellOptions {
    /**
     * If you want to apply a sort icon for a header cell, set this prop to either
     * `"ascending"` or `"descending"`. When you change the sort order, this prop
     * should change as well which will cause the sort icon to rotate. The default
     * behavior is to have the icon facing upwards and not-rotated when
     * `"ascending"`, otherwise it will rotate downwards when `"descending"`.
     *
     * If this prop is set to `"none"`, the cell will render the clickable button
     * in the children, just without the sort icon. This is so that the sort
     * behavior can still be toggled for keyboard users and will be tab-focusable.
     */
    "aria-sort"?: SortOrder;
    /**
     * An optional sort icon to use. This will be defaulted to the configured sort
     * icon from the `@react-md/icon` package. If you do not want the default
     * implementation for the sort icon behavior from `react-md`, you can set this
     * prop to `null`.
     */
    sortIcon?: ReactNode;
    /**
     * Boolean if the sort icon should appear after the children in the cell
     * instead of before.
     */
    sortIconAfter?: boolean;
    /**
     * Boolean if the sort icon should be rotated instead of the default
     * direction. When this is `undefined`, it will only be `true` when the
     * `"aria-sort"` prop is set to `"descending"`. If this is not `undefined`,
     * its boolean value will always be used.
     */
    sortIconRotated?: boolean;
    /**
     * Boolean if cell should no longer have any padding since you want a child
     * element to span the entire size of the cell instead. This is helpful when
     * rendering clickable and focusable elements within a cell.
     *
     * This will be defaulted to `true` if the `"aria-sort"` prop has been
     * provided and the `sortIcon` is not resoled as `null`. You can override this
     * default behavior by manually setting this to `true` or `false`.
     */
    disablePadding?: boolean;
}
/**
 * Creates a `<th>` or `<td>` cell with sensible styled defaults. You can create
 * a `<th>` element by enabling the `header` prop OR having a `TableCell` as a
 * child of the `TableHeader` component.
 *
 * Note: If you have a checkbox column in the `TableHeader` without any labels,
 * you will need to manually set the `header={false}` prop for that cell since
 * it is invalid to have a `<th>` without any readable content for screen
 * readers.
 */
export declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;