@frui.ts/dataviews/dist/dataTypes.d.ts

View components for data display

import type { IPagingFilter } from "@frui.ts/data";
import type { ReactNode } from "react";
import type React from "react";
export type PropertyKey<TItem> = keyof TItem & (string | number);
export interface KeyRenderProps {
    key: React.Key;
}
export interface ColumnRenderProps<TItem, TContext, TProperty extends PropertyKey<TItem>> {
    column: ColumnDefinition<TItem, TContext, TProperty>;
    context: TContext;
}
export interface ValueRenderProps<TItem, TContext, TProperty extends PropertyKey<TItem>> extends ColumnRenderProps<TItem, TContext, TProperty> {
    value?: TItem[TProperty] | any;
    item: TItem;
}
export interface ColumnDefinition<TItem, TContext = any, TProperty extends PropertyKey<TItem> = PropertyKey<TItem>> {
    title?: ReactNode;
    titleFactory?: (context: TContext) => ReactNode;
    property?: TProperty;
    sortable?: boolean;
    headerClassName?: string;
    headerFormatter?: (props: ColumnRenderProps<TItem, TContext, TProperty> & KeyRenderProps) => ReactNode;
    valueFormatter?: (props: ValueRenderProps<TItem, TContext, TProperty>) => ReactNode;
    cellClassName?: string;
    cellFormatter?: (props: ValueRenderProps<TItem, TContext, TProperty> & KeyRenderProps) => ReactNode;
    cellProps?: (props: ValueRenderProps<TItem, TContext, TProperty>) => any;
}
export interface ResponsiveColumnDefinition<TItem, TContext> extends ColumnDefinition<TItem, TContext> {
    responsiveTitle?: string | false;
    responsiveTitleFactory?: (context: TContext) => string;
    responsiveVisible?: boolean;
}
export interface PropsWithColumns<TItem, TContext> {
    columns: ColumnDefinition<TItem, TContext>[];
    context: TContext;
}
export interface PropsWithItems<TItem> {
    items: TItem[];
    itemKey: keyof TItem;
}
export interface DataTablePropsBase<TItem, TContext> extends PropsWithColumns<TItem, TContext>, PropsWithItems<TItem> {
    id?: string;
    pagingFilter?: IPagingFilter;
    onColumnSort?: (column: ColumnDefinition<TItem, TContext>) => any;
    displayHeader?: boolean;
}