lucid-ui/dist/esm/components/Table/Table.d.ts

A UI component library from Xandr.

import React from 'react';
import PropTypes from 'prop-types';
import { StandardProps, Overwrite } from '../../util/component-types';
import { IDragCaptureZoneProps } from '../DragCaptureZone/DragCaptureZone';
/** Thead <Thead>: The Table Head component */
export interface ITheadPropsRaw extends StandardProps {
}
declare type ITheadProps = Overwrite<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, ITheadPropsRaw>;
/** Tbody <Tbody>: The Table Body component */
export interface ITBodyPropsRaw extends StandardProps {
}
declare type ITBodyProps = Overwrite<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, ITBodyPropsRaw>;
/** Tr <Tr>: The Table Row component */
export interface ITrPropsRaw extends StandardProps {
    /** Applies disabled styles to the row. */
    isDisabled: boolean;
    /** Applies styles to the row for when the row is selected, usually by a
        checkbox. */
    isSelected: boolean;
    /** Applies active styles to the row, usually when the row has been clicked. */
    isActive: boolean;
    /**  */
    isActionable?: boolean;
}
declare type ITrProps = Overwrite<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, ITrPropsRaw>;
/** Th <Th>: The Table Header Cell components */
export interface IThProps extends StandardProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement> {
    /** Aligns the content of a cell. Can be \`left\`, \`center\`, or \`right\`. */
    align?: 'left' | 'center' | 'right';
    hasBorderRight?: boolean;
    /** Should be \`true\` to render a left border. */
    hasBorderLeft?: boolean;
    /** Styles the cell to indicate it should be resizable and sets up drag-
        related events to enable this resizing functionality. */
    isResizable?: boolean;
    /** Styles the cell to allow column sorting. */
    isSortable?: boolean;
    /** Renders a caret icon to show that the column is sorted. */
    isSorted?: boolean;
    /** Callback triggered as the user drags the resize handle to resize the column atop
        which this table header cell sits. */
    onResize?: (width: number | string | null, { event, props, }: {
        event: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent;
        props: IThProps;
    }) => void;
    /** Sets the direction of the caret icon when \`isSorted\` is also set. */
    sortDirection?: 'left' | 'up' | 'right' | 'down' | undefined;
    /** Sets the width of the cell. */
    width?: number | string;
    /** Sets the min width of the cell. */
    minWidth?: number | string;
    /** Indicates for how many columns the cell extends */
    colSpan?: number;
    /** Define the cell as being in the first row. */
    isFirstRow?: boolean;
    /** Define the cell as being in the last row. */
    isLastRow?: boolean;
    /** Define the cell as being in the first column. */
    isFirstCol?: boolean;
    /** Define the cell as being in the last column. */
    isLastCol?: boolean;
    /** Define the cell as being the first 1-height cell in the row. */
    isFirstSingle?: boolean;
    /** Sets the field value for the cell. */
    field?: string;
    rowSpan?: number | null;
    /** Truncates `Table.Th` content with ellipses, must be used with `hasFixedHeader` */
    truncateContent?: boolean;
}
interface IThState {
    activeWidth: number | string | null;
    hasSetWidth: boolean;
    isResizing: boolean;
    isDragging: boolean;
    passiveWidth: number | string | null;
}
interface ICoordinates {
    dX: number;
    dY: number;
    pageX: number;
    pageY: number;
}
export declare class Th extends React.Component<IThProps, IThState> {
    static displayName: string;
    static defaultProps: {
        align: string;
        isResizable: boolean;
        isSorted: boolean;
        sortDirection: string;
        rowSpan: number;
    };
    static peek: {
        description: string;
    };
    static propTypes: {
        /**
            Aligns the content of a cell. Can be \`left\`, \`center\`, or \`right\`.
        */
        align: PropTypes.Requireable<string>;
        /**
            any valid React children
        */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
            Appended to the component-specific class names set on the root element.
            Value is run through the \`classnames\` library.
        */
        className: PropTypes.Requireable<any>;
        /**
            Should be \`true\` to render a right border.
        */
        hasBorderRight: PropTypes.Requireable<boolean>;
        /**
            Should be \`true\` to render a left border.
        */
        hasBorderLeft: PropTypes.Requireable<boolean>;
        /**
            Styles the cell to indicate it should be resizable and sets up drag-
            related events to enable this resizing functionality.
        */
        isResizable: PropTypes.Requireable<boolean>;
        /**
            Styles the cell to allow column sorting.
        */
        isSortable: PropTypes.Requireable<boolean>;
        /**
            Renders a caret icon to show that the column is sorted.
        */
        isSorted: PropTypes.Requireable<boolean>;
        /**
            Called as the user drags the resize handle to resize the column atop
            which this table header cell sits.
        */
        onResize: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            Sets the direction of the caret icon when \`isSorted\` is also set.
        */
        sortDirection: PropTypes.Requireable<string | undefined>;
        /**
            Styles that are passed through to root element.
        */
        style: PropTypes.Requireable<object>;
        /**
            Sets the width of the cell.
        */
        width: PropTypes.Requireable<string | number>;
        /**
            Sets the min width of the cell.
        */
        minWidth: PropTypes.Requireable<string | number>;
        /**
            Define the cell as being in the first row.
        */
        isFirstRow: PropTypes.Requireable<boolean>;
        /**
            Define the cell as being in the last row.
        */
        isLastRow: PropTypes.Requireable<boolean>;
        /**
            Define the cell as being in the first column.
        */
        isFirstCol: PropTypes.Requireable<boolean>;
        /**
            Define the cell as being in the last column.
        */
        isLastCol: PropTypes.Requireable<boolean>;
        /**
            Define the cell as being the first 1-height cell in the row.
        */
        isFirstSingle: PropTypes.Requireable<boolean>;
        /**
            Sets the field value for the cell.
        */
        field: PropTypes.Requireable<string>;
        /** Truncates `Table.Td` content with ellipses, must be used with `hasFixedHeader` */
        /**
            Truncates header and adds ellipses.
        */
        truncateContent: PropTypes.Requireable<boolean>;
    };
    private rootRef;
    state: {
        activeWidth: string | number | null;
        hasSetWidth: boolean;
        isResizing: boolean;
        isDragging: boolean;
        passiveWidth: string | number | null;
    };
    UNSAFE_componentWillReceiveProps({ width, }: {
        width?: number | string | null;
    }): void;
    getWidth: () => number | null;
    handleClickCapture: (event: React.MouseEvent | KeyboardEvent) => void;
    handleMouseEnter: () => void;
    handleMouseUp: () => void;
    handleDragEnded: (coordinates: ICoordinates, { event }: {
        event: MouseEvent | TouchEvent;
    }) => void;
    handleDragged: (coordinates: ICoordinates, { event, props, }: {
        event: MouseEvent | TouchEvent;
        props: IDragCaptureZoneProps;
    }) => void;
    handleDragStarted: (coordinates: ICoordinates, { event, props, }: {
        event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>;
        props: IDragCaptureZoneProps;
    }) => void;
    render(): React.ReactNode;
}
/** Td <td>: The Table Data Cell element */
export interface ITdProps extends StandardProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement> {
    /** Aligns the content of a cell. Can be \`left\`, \`center\`, or \`right\`. */
    align: 'left' | 'center' | 'right';
    /** Should be \`true\` to render a right border. */
    hasBorderRight: boolean;
    /** Should be \`true\` to render a left border. */
    hasBorderLeft: boolean;
    /** Define the cell as being in the first row. */
    isFirstRow?: boolean;
    /** Define the cell as being in the last row. */
    isLastRow?: boolean;
    /** Define the cell as being in the first column. */
    isFirstCol?: boolean;
    /** Define the cell as being in the last column. */
    isLastCol?: boolean;
    /** Define the cell as being the first 1-height cell in the row. */
    isFirstSingle?: boolean;
    /** Indicates if the cell has any data or not */
    isEmpty?: boolean;
    rowSpan: number | null;
    /** Truncates `Table.Td` content with ellipses, must be used with `hasFixedHeader` */
    truncateContent?: boolean;
    /** Sets the width of the cell. */
    width?: number | string;
}
/** Table <Table> The Table Component */
export interface ITableProps extends StandardProps {
    /** Adjusts the row density of the table to have more or less spacing. */
    density?: 'compressed' | 'extended';
    /** Allows light header. */
    hasLightHeader?: boolean;
    /** Render the table with borders on the outer edge. */
    hasBorder?: boolean;
    /** Enables word wrapping in tables cells. */
    hasWordWrap?: boolean;
    /** Applies a row hover to rows. Defaults to true. */
    hasHover?: boolean;
}
declare const Table: {
    (props: ITableProps): JSX.Element;
    displayName: string;
    defaultProps: {
        density: string;
        hasBorder: boolean;
        hasWordWrap: boolean;
        hasLightHeader: boolean;
        hasHover: boolean;
    };
    peek: {
        description: string;
        categories: string[];
        madeFrom: string[];
    };
    propTypes: {
        /**
            Styles that are passed through to the root container.
        */
        style: PropTypes.Requireable<object>;
        /**
            Class names that are appended to the defaults.
        */
        className: PropTypes.Requireable<string>;
        /**
            Adjusts the row density of the table to have more or less spacing.
        */
        density: PropTypes.Requireable<string>;
        /**
            Allows light header.
        */
        hasLightHeader: PropTypes.Requireable<boolean>;
        /**
            Render the table with borders on the outer edge.
        */
        hasBorder: PropTypes.Requireable<boolean>;
        /**
            Enables word wrapping in tables cells.
        */
        hasWordWrap: PropTypes.Requireable<boolean>;
        /**
            Applies a row hover to rows. Defaults to true.
        */
        hasHover: PropTypes.Requireable<boolean>;
    };
    /** ChildComponents */
    Thead: {
        (props: ITheadProps): JSX.Element;
        displayName: string;
        peek: {
            description: string;
        };
        propTypes: {
            /**
                Appended to the component-specific class names set on the root element.
                Value is run through the \`classnames\` library.
            */
            className: PropTypes.Requireable<any>;
            /**
                any valid React children
            */
            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        };
    };
    Th: typeof Th;
    Tbody: {
        (props: ITBodyProps): JSX.Element;
        displayName: string;
        peek: {
            description: string;
        };
        propTypes: {
            /**
                Appended to the component-specific class names set on the root element.
                Value is run through the \`classnames\` library.
            */
            className: PropTypes.Requireable<any>;
            /**
                any valid React children
            */
            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        };
    };
    Tr: {
        (props: ITrProps): JSX.Element;
        defaultProps: {
            isDisabled: boolean;
            isSelected: boolean;
            isActive: boolean;
        };
        displayName: string;
        peek: {
            description: string;
        };
        propTypes: {
            /**
                any valid React children
            */
            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
            /**
                Appended to the component-specific class names set on the root element.
                Value is run through the \`classnames\` library.
            */
            className: PropTypes.Requireable<any>;
            /**
                Applies disabled styles to the row.
            */
            isDisabled: PropTypes.Requireable<boolean>;
            /**
                Applies styles to the row for when the row is selected, usually by a
                checkbox.
            */
            isSelected: PropTypes.Requireable<boolean>;
            /**
                Applies active styles to the row, usually when the row has been clicked.
            */
            isActive: PropTypes.Requireable<boolean>;
        };
    };
    Td: {
        (props: ITdProps): React.ReactElement;
        displayName: string;
        defaultProps: {
            align: string;
            hasBorderRight: boolean;
            hasBorderLeft: boolean;
            rowSpan: number;
        };
        peek: {
            description: string;
            categories: never[];
            madeFrom: never[];
        };
        propTypes: {
            /**
                Aligns the content of a cell. Can be \`left\`, \`center\`, or \`right\`.
            */
            align: PropTypes.Requireable<string>;
            /**
                Appended to the component-specific class names set on the root element.
                Value is run through the \`classnames\` library.
            */
            className: PropTypes.Requireable<any>;
            /**
                Should be \`true\` to render a right border.
            */
            hasBorderRight: PropTypes.Requireable<boolean>;
            /**
                Should be \`true\` to render a left border.
            */
            hasBorderLeft: PropTypes.Requireable<boolean>;
            /**
                Define the cell as being in the first row.
            */
            isFirstRow: PropTypes.Requireable<boolean>;
            /**
                Define the cell as being in the last row.
            */
            isLastRow: PropTypes.Requireable<boolean>;
            /**
                Define the cell as being in the first column.
            */
            isFirstCol: PropTypes.Requireable<boolean>;
            /**
                Define the cell as being in the last column.
            */
            isLastCol: PropTypes.Requireable<boolean>;
            /**
                Define the cell as being the first 1-height cell in the row.
            */
            isFirstSingle: PropTypes.Requireable<boolean>;
            /**
                Indicates if the cell has any data or not.
            */
            isEmpty: PropTypes.Requireable<boolean>;
            /**
                Truncates \`Table.Td\` content with ellipses, must be used with \`hasFixedHeader\`
            */
            truncateContent: PropTypes.Requireable<boolean>;
        };
    };
};
export default Table;
//# sourceMappingURL=Table.d.ts.map