@coconut-software/ui/dist/Table/Table.d.ts

React components for faster and easier web development.

import type { Dispatch, MutableRefObject, ReactElement, ReactNode } from 'react';
import type SvgIcon from '../SvgIcon/SvgIcon';
import { Directions } from '../utilities/directions';
import type { Actions } from './Actions';
export interface GroupedTableColumns {
    selected: TableColumn[];
    unselected: TableColumn[];
}
export type Limit = 25 | 50 | 100;
export type FilterOptions = {
    columnKey: string;
    value: string;
    checked: boolean;
};
export type SortOptions = {
    direction: Directions.Ascending | Directions.Descending;
    key: keyof TableRow;
};
export type ClickRowActionEventHandler = (row: TableRow) => void;
type FilterEventHandler = ({ columnKey, value, checked }: FilterOptions) => void;
type SelectEventHandler = (rows: TableRow[]) => void;
type SortEventHandler = ({ direction, key }: SortOptions) => void;
export interface TableColumn {
    filter?: {
        label: string;
        value: string;
        checked: boolean;
    }[];
    key: string;
    selected: boolean;
    sort?: Directions.Ascending | Directions.Descending;
    sortable?: boolean;
    value: ReactNode;
}
interface TableProps {
    children?: ReactElement | ReactElement[];
    columns: TableColumn[];
    dense?: boolean;
    isScrolling?: boolean;
    limit?: Limit;
    loading?: boolean;
    onFilterChange?: FilterEventHandler;
    onSort?: SortEventHandler;
    onSelect?: SelectEventHandler;
    rowActions?: {
        enabled?: (row: TableRow) => boolean;
        label: ReactNode;
        handler: ClickRowActionEventHandler;
        startAdornment?: typeof SvgIcon;
    }[];
    rows: TableRow[];
    selectable?: boolean;
    selectionsRef?: MutableRefObject<string[]>;
    storageKey?: string;
    total?: number;
}
export interface TableRow {
    [key: string]: string | ReactNode;
    id: string;
    selected?: boolean;
}
interface TableState {
    columns: GroupedTableColumns;
    dense: boolean;
    isScrolling?: boolean;
    limit: Limit;
    loading: boolean;
    onFilterChange?: FilterEventHandler;
    onSelect?: SelectEventHandler;
    onSort?: SortEventHandler;
    page: number;
    rowActions?: {
        enabled?: (row: TableRow) => boolean;
        label: ReactNode;
        handler: ClickRowActionEventHandler;
        startAdornment?: typeof SvgIcon;
    }[];
    rows: TableRow[];
    selectionsRef?: MutableRefObject<string[]>;
    selectable: boolean;
    total: number;
}
type UseTableValues = [TableState, Dispatch<Actions>];
export declare const useTable: () => UseTableValues;
declare function Table({ children, columns: initialColumns, dense, isScrolling, limit, loading, onFilterChange, onSelect, onSort, rowActions, rows, selectable, selectionsRef, storageKey, total, }: TableProps): JSX.Element;
declare namespace Table {
    var BulkActions: typeof import("./BulkActions").default;
    var GlobalActions: typeof import("./GlobalActions").default;
    var Header: typeof import("./Header").default;
    var Pagination: typeof import("./Pagination").default;
    var Search: typeof import("./Search").default;
    var Title: typeof import("./Title").default;
    var Toolbar: typeof import("./Toolbar").default;
}
export default Table;