@gpa-gemstone/react-table/lib/Table/Types.d.ts

Table for GPA web applications

import { Search } from "@gpa-gemstone/react-interactive";
import { IUnit } from "../Filters/NumberFilter";
export interface ITable<T> {
    /**
    * List of T objects used to generate rows
    */
    Data: T[];
    /**
    * Callback when the user clicks on a data entry
    * @param data contains the data including the columnKey
    * @param event the onClick Event to allow propagation as needed
    * @returns
    */
    OnClick?: (data: {
        colKey?: string;
        colField?: keyof T;
        row: T;
        data: T[keyof T] | null;
        index: number;
    }, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
    /**
    * Key of the collumn to sort by
    */
    SortKey: string;
    /**
    * Boolen to indicate whether the sort is ascending or descending
    */
    Ascending: boolean;
    /**
    * Callback when the data should be sorted
    * @param data the information of the collumn including the Key of the collumn
    * @param event The onCLick event to allow Propagation as needed
    */
    OnSort(data: {
        colKey: string;
        colField?: keyof T;
        ascending: boolean;
    }, event: React.MouseEvent<HTMLElement, MouseEvent>): void;
    /**
    * Class of the table component
    */
    TableClass?: string;
    /**
    * style of the table component
    */
    TableStyle?: React.CSSProperties;
    /**
    * style of the thead component
    */
    TheadStyle?: React.CSSProperties;
    /**
    * Class of the thead component
    */
    TheadClass?: string;
    /**
    * style of the tbody component
    * Note: Display style overwritten to "block"
    */
    TbodyStyle?: React.CSSProperties;
    /**
    * Class of the tbody component
    */
    TbodyClass?: string;
    /**
    * style of the tfoot component
    */
    TfootStyle?: React.CSSProperties;
    /**
    * Class of the tfoot component
    */
    TfootClass?: string;
    /**
    * determines if a row should be styled as selected
    * @param data the item to be checked
    * @returns true if the row should be styled as selected
    */
    Selected?: (data: T, index: number) => boolean;
    /**
    *
    * @param data the information of the row including the item of the row
    * @param e the event triggering this
    * @returns
    */
    OnDragStart?: (data: {
        colKey?: string;
        colField?: keyof T;
        row: T;
        data: T[keyof T] | null;
        index: number;
    }, e: React.DragEvent<Element>) => void;
    /**
    * The default style for the tr element
    */
    RowStyle?: React.CSSProperties;
    /**
    * a Function that retrieves a unique key used for React key properties
    * @param data the item to be turned into a key
    * @returns a unique Key
    */
    KeySelector: (data: T, index?: number) => string | number;
    /**
    * Optional Element to display in the last row of the Table
    * use this for displaying warnings when the Table content gets cut off.
    * Data appears in the tfoot element
    */
    LastRow?: string | React.ReactNode;
    /**
    * Optional Element to display on upper Right corner
    */
    LastColumn?: string | React.ReactNode;
    /**
    * Optional Callback that gets called when there is not enough space to display columns
    * @param disabled takes in string of disabled keys
    */
    ReduceWidthCallback?: (disabled: string[]) => void;
    /**
    * Callback to set filters for data. Required if using filterable columns.
    * @param filters sets the set of filters
    */
    SetFilters?: (filters: Search.IFilter<T>[]) => void;
    /**
    * Filters currently filtering the data, required if using filterable columns.
    */
    Filters?: Search.IFilter<T>[];
}
export interface IColumn<T> {
    /**
     * a unique Key for this Collumn
     */
    Key: string;
    /**
     * Flag indicating whether sorting by this Collumn is allowed
     */
    AllowSort?: boolean;
    /**
     * Optional - the Field to be used
     */
    Field?: keyof T;
    /**
     * The Default style for the th element
     */
    HeaderStyle?: React.CSSProperties;
    /**
     * The Default style for the td element
     */
    RowStyle?: React.CSSProperties;
    /**
     * Determines the Content to be displayed
     * @param d the data to be turned into content
     * @returns the content displayed
     */
    Content?: (d: {
        item: T;
        key: string;
        field: keyof T | undefined;
        index: number;
        style?: React.CSSProperties;
    }) => React.ReactNode;
    /**
     * Determines if a column's width is adjustable, undefined is read as false.
     */
    Adjustable?: boolean;
}
export interface IOptions {
    Value: string | number;
    Label: string;
}
export interface IFilterableCollumn<T> extends IColumn<T> {
    /**
     * Type of field, determines filter entry UI of header.
     */
    Type?: Search.FieldType;
    /**
     * Enumeration for field, required for 'enum' type fields (has no effect otherwise)
     */
    Enum?: IOptions[];
    /**
     * Definition for a different label on hover of header.
     */
    ExpandedLabel?: string;
    /**
     * Definition for units on a number filter (has no effect if field type is not 'number')
     */
    Unit?: IUnit[];
}