@furystack/shades-common-components/esm/components/data-grid/data-grid.d.ts

import type { ChildrenList } from '@furystack/shades';
import type { CollectionService } from '../../services/collection-service.js';
import type { GridProps } from '../grid.js';
import type { FindOptions } from '@furystack/core';
import type { ObservableValue } from '@furystack/utils';
export type DataHeaderCells<Column extends string> = {
    [TKey in Column | 'default']?: (name: Column) => JSX.Element;
};
export type DataRowCells<T, Column extends string> = {
    [TKey in Column | 'default']?: (element: T, state: {
        focus?: T;
        selection: T[];
    }) => JSX.Element;
};
export interface DataGridProps<T, Column extends string> {
    /**
     * A list of columns to display
     */
    columns: Column[];
    /**
     * Optional style overrides for the grid
     */
    styles: GridProps<T, Column>['styles'];
    /**
     * A collection service to use for data source
     */
    collectionService: CollectionService<T>;
    /**
     * The query settings to use for the data source
     */
    findOptions: ObservableValue<FindOptions<T, Array<keyof T>>>;
    /**
     * A list of custom header components to use
     */
    headerComponents: DataHeaderCells<Column>;
    /**
     * A list of custom row components to use
     */
    rowComponents: DataRowCells<T, Column>;
    /**
     * Optional autoFocus property to set the grid as focused
     */
    autofocus?: boolean;
    /**
     * Optional style to attach to grid rows when the row is focused
     */
    focusedRowStyle?: Partial<CSSStyleDeclaration>;
    /**
     * Optional style to attach to grid rows when the row is not focused
     */
    unfocusedRowStyle?: Partial<CSSStyleDeclaration>;
    /**
     * Optional style to attach to grid rows when the row is selected
     */
    selectedRowStyle?: Partial<CSSStyleDeclaration>;
    /**
     * Optional style to attach to grid rows when the row is not selected
     */
    unselectedRowStyle?: Partial<CSSStyleDeclaration>;
    /**
     * An optional component to show if there are no rows to display
     */
    emptyComponent?: JSX.Element;
    /**
     * An optional component to show while the data is loading
     */
    loaderComponent?: JSX.Element;
}
export declare const DataGrid: <T, Column extends string>(props: DataGridProps<T, Column>, children: ChildrenList) => JSX.Element<any>;
//# sourceMappingURL=data-grid.d.ts.map