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

A UI component library from Xandr.

import React from 'react';
import PropTypes from 'prop-types';
import { IThProps, ITableProps } from '../Table/Table';
export interface IDataTableProps extends ITableProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
    data: object[];
    emptyCellText: string;
    isActionable: boolean;
    isFullWidth?: boolean;
    isLoading?: boolean;
    isSelectable: boolean;
    anchorMessage?: boolean;
    style?: object;
    minRows: number;
    onRowClick: any;
    onSelect: any;
    onSelectAll: any;
    onSort: any;
    hasFixedHeader: boolean;
    fixedColumnCount: number;
    fixedRowHeight?: number;
    truncateContent?: boolean;
    Column?: any;
    ColumnGroup?: any;
    onResize?: any;
}
export declare const DataTable: {
    (props: IDataTableProps): JSX.Element;
    displayName: string;
    propTypes: {
        /**
            Class names that are appended to the defaults.
        */
        className: PropTypes.Requireable<string>;
        /**
            Array of objects to be rendered in the table. Object keys match the
            \`field\` of each defined \`DataTable.Column\`.
        */
        data: PropTypes.Requireable<(object | null | undefined)[]>;
        /**
            The text to display in cells which have no data.
        */
        emptyCellText: PropTypes.Requireable<string>;
        /**
            Render each row item to be navigable, allowing \`onRowClick\` to be
            triggered.
        */
        isActionable: PropTypes.Requireable<boolean>;
        /**
            If \`true\`, the table will be set to fill the width of its parent
            container.
        */
        isFullWidth: PropTypes.Requireable<boolean>;
        /**
            Controls the visibility of the \`LoadingMessage\`.
        */
        isLoading: PropTypes.Requireable<boolean>;
        /**
            Render a checkbox in the first column allowing \`onSelect\` and
            \`onSelectAll\` to be triggered.
        */
        isSelectable: PropTypes.Requireable<boolean>;
        /**
            Position the \`EmptyMessage\` and \`LoadingMessage\` near the top of the container.
            By default, they are vertically aligned to the middle of the table. Useful
            for tables with many rows that extend past the viewport.
        */
        anchorMessage: PropTypes.Requireable<boolean>;
        /**
            Styles that are passed through to the root container.
        */
        style: PropTypes.Requireable<object>;
        /**
            The minimum number of rows to rendered. If not enough data is provided,
            the remainder will be shown as empty rows.
        */
        minRows: PropTypes.Requireable<number>;
        /**
            Handler for row click. Signature is
            \`(object, index, { props, event }) => {...}\`
        */
        onRowClick: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            Handler for checkbox selection. Signature is
            \`(object, index, { props, event }) => {...}\`
        */
        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            Handler for checkbox selection in the table header. Signature is
            \`({ props, event }) => {...}\`
        */
        onSelectAll: PropTypes.Requireable<(...args: any[]) => any>;
        /**
            Handler for column header click (for sorting). Signature is
            \`(field, { props, event }) => {...}\`
        */
        onSort: PropTypes.Requireable<(...args: any[]) => any>;
        hasFixedHeader: PropTypes.Requireable<boolean>; /**
            If \`true\` the table will have a fixed header set. *Note* this feature
            imposes some limitations with respect to the styling and usage of your
            table. Here are those caveats:
    
            - Each \`DataTable.Column\` *must* have an explicit pixel width defined
                on it. If the combined width of all the columns is greater than the
                parent container, the user will be able to horizontally scroll.
            - The outermost wrapper element emitted by this component will be set to
                100% height. It's your responsibility to put this component inside
                another container that limits its height so that the resulting table can
                scroll vertically and keep the fixed headers.
            - Scroll bars will always be present. This is prevent misalignment of the
                header and the table body that can occur when scroll bars show up and
                take width. MacOS browsers depend on OS level settings to determine how
                scrollbars show up. Having them always present saves us from writing a
                bunch of terrible code to detect scroll bars and account for their width.
            - Using fixed headers means multiple tables will be rendered under the
                hood. We use \`table-layout: fixed\` behavior to make sure we can sync
                columns widths between the header and the body.
            - Does not support \`DataTable.ColumnGroup\`s at this time. It's possible
                we could support them at some point but its not a priority at the moment.
            - You have to be careful about table cell height overflow. There are
                cases where this can break the alignment of fixed columns.
        */
        /**
            Sets the number of columns you want to have fixed. You must specify
            \`fixedRowHeight\` and enable \`hasFixedHeader\`when setting this prop.
        */
        fixedColumnCount: PropTypes.Requireable<number>;
        /**
            Determines the height of every row in the DataTable. It's required when
            using the \`fixedColumnCount\` prop.
        */
        fixedRowHeight: PropTypes.Requireable<number>;
        /**
            Truncates \`Table.Td\` content with ellipses, must be used with \`hasFixedHeader\`
        */
        truncateContent: PropTypes.Requireable<boolean>;
        Column: PropTypes.Requireable<any>; /**
            *Child Element*
    
            Used to define a column of the table. It accepts the same props as
            \`Table.Th\` in addition to:
    
            - the required prop \`field\`
            - the optional prop \`title\`
        */
        ColumnGroup: PropTypes.Requireable<any>; /**
            *Child Element*
    
            _Note_: column groups are *not* compatible with \`hasFixedHeader\`.
    
            Used to Group defined \`Column\`s in the table. It accepts the same props
            as \`Table.Th\` in addition to:
    
            - the optional prop \`title\`
        */
        /**
             If \`isResizable\` is true,
            it is called when the user resizes the a header cell in the table.
         */
        onResize: PropTypes.Requireable<(...args: any[]) => any>;
    };
    defaultProps: {
        emptyCellText: string;
        isActionable: boolean;
        isSelectable: boolean;
        onRowClick: (...args: any[]) => void;
        onSelect: (...args: any[]) => void;
        onSelectAll: (...args: any[]) => void;
        onSort: (...args: any[]) => void;
        minRows: number;
        hasFixedHeader: boolean;
        fixedColumnCount: number;
    };
    peek: {
        description: string;
        notes: {
            overview: string;
            intendedUse: string;
            technicalRecommendations: string;
        };
        categories: string[];
        madeFrom: string[];
    };
    EmptyStateWrapper: {
        (props: import("../EmptyStateWrapper/EmptyStateWrapper").IEmptyStateWrapperProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
        _isPrivate: boolean;
        peek: {
            description: string;
            categories: string[];
            madeFrom: string[];
        };
        displayName: string;
        defaultProps: {
            isEmpty: boolean;
            isLoading: boolean;
            anchorMessage: boolean;
        };
        propTypes: {
            className: PropTypes.Requireable<string>;
            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
            isEmpty: PropTypes.Requireable<boolean>;
            isLoading: PropTypes.Requireable<boolean>;
            anchorMessage: PropTypes.Requireable<boolean>;
            Body: PropTypes.Requireable<any>;
            Title: PropTypes.Requireable<any>;
        };
        Body: {
            (_props: import("../EmptyStateWrapper/EmptyStateWrapper").IEmptyStateWrapperBodyProps): null;
            displayName: string;
            peek: {
                description: string;
            };
            propName: string;
        };
        Title: {
            (_props: import("../EmptyStateWrapper/EmptyStateWrapper").IEmptyStateWrapperTitleProps): null;
            displayName: string;
            peek: {
                description: string;
            };
            propName: string;
        };
    };
    Column: {
        (props: IColumnProps): null;
        displayName: string;
        peek: {
            description: string;
        };
        propTypes: {
            field: PropTypes.Validator<string>;
            title: PropTypes.Requireable<string>;
            isResizable: PropTypes.Requireable<boolean>;
        };
    };
    ColumnGroup: {
        ({ children }: IColumnGroupProps): any;
        displayName: string;
        peek: {
            description: string;
        };
        propTypes: {
            title: PropTypes.Requireable<string>;
        };
        defaultProps: {
            align: string;
        };
    };
    shouldColumnHandleSort(column: any): any;
};
export interface IColumnProps extends IThProps {
    field: string;
    title?: string;
}
export interface IColumnGroupProps {
    children?: any;
    title?: string;
}
export default DataTable;
//# sourceMappingURL=DataTable.d.ts.map