@appbuckets/react-ui/RxTable/RxTable.factory.d.ts

Just Another React UI Framework

import * as React from 'react';
import { AnyObject } from '../generic';
import { UseColumnsConfig } from './lib/useColumns';
import { UseDataFiltering } from './lib/useDataFiltering';
import { UseDataLoadConfig } from './lib/useDataLoad';
import { DataSelector, UseDataSelectorConfig } from './lib/useDataSelector';
import { UseDataSortingConfig } from './lib/useDataSorting';
import { RxTableColumnProps, RxTableComponents } from './RxTable.types';
declare type RxTableComponentClasses = Partial<
  Record<keyof RxTableComponents<any> | 'FilterCell' | 'FilterRow', string>
>;
declare type RxTableComponentStyles = Partial<
  Record<
    keyof RxTableComponents<any> | 'FilterCell' | 'FilterRow',
    React.CSSProperties
  >
>;
export declare type UseRxTableFactoryConfig<Data> = UseColumnsConfig<Data> &
  UseDataFiltering<Data> &
  UseDataLoadConfig<Data> &
  UseDataSelectorConfig<Data> &
  UseDataSortingConfig & {
    onRowClick?: (row: Data, index: number, array: Data[]) => void;
  } & {
    isVirtualized?: boolean;
  } & {
    classes?: RxTableComponentClasses;
  } & {
    styles?: RxTableComponentStyles;
  };
export interface RxTableFactory<Data> {
  /** User defined classes */
  classes: RxTableComponentClasses;
  /** All loaded data */
  data: Data[];
  /** Only filtered and sorted data */
  tableData: Data[];
  /** Current data state */
  dataState: {
    /** Data load error */
    error: any;
    /** Data is currently loading */
    isLoading: boolean;
  };
  /** Columns Descriptor */
  columns: {
    /** Current table columns */
    current: RxTableColumnProps<Data>[];
    /** Get column width by key */
    getWidth: (key: string) => number;
    /** The width of the columns indexed by key */
    width: Record<string, number>;
  };
  /** Data filters */
  filter: {
    /** Current filters */
    current: Record<string, any>;
    /** Set column filter by key */
    set: (column: string, value: any) => void;
  };
  /** Interaction handler */
  interaction: {
    /** Check if row click is enabled */
    isRowClickEnabled: boolean;
    /** Row Click Handler */
    handleRowClick: (index: number) => void;
  };
  /** Table Layout Props */
  layout: {
    /** The effective table width */
    effectiveTableWidth: number;
    /** Table has filter row */
    hasFilterRow: boolean;
    /** Table has the Footer Row */
    hasFooterRow: boolean;
    /** Table has header row */
    hasHeaderRow: boolean;
    /** Check if table is virtualized */
    isVirtualized: boolean;
    /** The total columns width */
    totalColumnsWidth: number;
  };
  /** Data selection */
  selection: DataSelector<Data> & {
    enabled: boolean;
  };
  /** Sort controller */
  sorting: {
    /** Current sorting */
    current: string[];
    /** Check if is reversed */
    isReversed: boolean;
    /** Set new sorting */
    set: (fields: string[], reverse: boolean) => void;
  };
  /** User defined styles */
  styles: RxTableComponentStyles;
}
export declare function useRxTableFactory<Data extends AnyObject = any>(
  config: UseRxTableFactoryConfig<Data>
): RxTableFactory<Data>;
export {};