@kvaser/canking-api/dist/controls/TableControl.d.ts

CanKing API to communicate with the CanKing service using Node.js.

/**
 * This module includes a table UI control.
 *
 * To be able to use these controls the CanKingDataProvider component must be present in the
 * component tree above your component. Normally the CanKingDataProvider is added
 * at the root of the component tree.
 *
 * @packageDocumentation
 */
import React, { JSX } from 'react';
import { TableCellProps, TypographyVariant } from '@mui/material';
/**
 * TableColumn definition.
 */
export interface TableColumn<T> {
    /** A unique key. */
    key: React.Key;
    /** Header cell properties. */
    headProps: Partial<TableCellProps>;
    /** Header cell content. */
    headCell: React.ReactNode;
    /** Data cell properties. */
    dataProps: Partial<TableCellProps>;
    /** A callback to get the data cell content for the specified row. */
    dataCell: (row: T) => React.ReactNode;
}
/**
 * Properties of the TableControl React component.
 */
export interface TableControlProps<T> {
    /** Data rows to be displayed. */
    data: T[];
    /** Callback to get a unique data key for the specified row. */
    dataKey: (row: T) => React.Key;
    /** If each row should have a remove button */
    hasRemoveButton?: boolean;
    /** A title for the remove button */
    removeButtonTitle?: string;
    /** Callback to be run when clicking on the remove button */
    onRemoveRow?: (row: T) => void;
    /** The key of the currently selected data row. */
    selectedKey?: React.Key;
    /** Callback to inform that a data row has been clicked. */
    onClickRow?: (row: T) => void;
    /** Column definitions. */
    columns: TableColumn<T>[];
    /** An optional table label. */
    label?: string;
    /** An optional Typography variant to be used for the label. */
    labelVariant?: TypographyVariant;
    /** Optional max height. */
    maxHeight?: string | number;
    /** Table size, defaults to 'medium'. */
    size?: 'small' | 'medium';
    /** Set the header sticky, defaults to false. */
    stickyHeader?: boolean;
    /** If true, the table row will shade on hover, defaults to false. */
    hover?: boolean;
}
/**
 * Creates a table control.
 * @param props - Component properties.
 * @returns The TableControl React component.
 */
declare function TableControl<T>({ data, dataKey, hasRemoveButton, removeButtonTitle, onRemoveRow, selectedKey, onClickRow, columns, label, labelVariant, maxHeight, size, stickyHeader, hover, }: TableControlProps<T>): JSX.Element;
export default TableControl;