import React, { ComponentType, ReactNode } from 'react'; import { CellProps, Column, DefaultSortTypes, HeaderGroup, HeaderProps, IdType, Renderer, SortByFn, TableInstance, TableState, UseExpandedOptions, UseFiltersColumnOptions, UseFiltersColumnProps, UseFiltersOptions, UseFiltersState, UsePaginationInstanceProps, UsePaginationOptions, UseRowSelectInstanceProps, UseRowSelectOptions, UseRowSelectState, UseSortByColumnOptions, UseSortByColumnProps, UseSortByOptions, UseSortByState, UseTableColumnOptions, UseTableInstanceProps, UseTableOptions } from 'react-table'; export interface TableProps { /** * Common Props */ className?: string; columns: TableColumnProps[]; pagination?: 'pages' | 'infinite-scroll'; onPageChange?: (pageSize: number, page: number) => void; pageCount?: number; pageSize?: number; toolbar?: boolean; loading?: boolean; emptyRowsPlaceholder?: ReactNode; selection?: 'single' | 'multi'; onRowSelected?: (rowIds: Record) => void; selectedRowIds?: Record; expandable?: boolean; renderExpandedComponent?: (data: T, index: number) => React.ReactNode; tableHeader?: boolean; data: T[]; totalData: number; rowKey: keyof T | string; isMultiSort?: boolean; sortBy?: TableSort[]; onSortChange?: (sortBy: TableSort[]) => void; filters?: TableFilter[]; onFilterChange?: (filters: TableFilter[]) => void; } export interface TableColumnProps { /** * Required * This string/function is used to build the data model for your column. * The data returned by an accessor should be primitive and sortable. */ accessor?: string | IdType | never; /** * Required if accessor is a function * This is the unique ID for the column. It is used by reference in things like sorting, grouping, filtering etc. * If a string accessor is used, it defaults as the column ID, but can be overridden if necessary. */ id?: string; /** * Optional * Defaults to () => null */ Header?: Renderer>; /** * Optional * Defaults to ({ value }) => String(value) * Must return valid JSX */ Cell?: CellComponent; sortable?: boolean; Filter?: FilterComponent; minWidth?: string | number; maxWidth?: string | number; /** * Optional * String options: basic, datetime, alphanumeric. Defaults to alphanumeric. * If a function is passed, it must be memoized. The sortType function should return -1 if rowA is larger, and 1 if rowB is larger. react-table will take care of the rest. * more information about this parameter on the github page https://react-table-omega.vercel.app/docs/api/useSortBy#column-options */ sortType?: SortByFn | DefaultSortTypes; } export declare type CellComponent = Renderer>; export declare type FilterComponent = ComponentType<{ value: T | null; setFilterValue: (value: T | null) => void; closePopup?: () => void; }>; export interface TableSort { id: string; desc?: boolean; } export interface TableFilter { id: string; value: any; } export interface TableColumnFilterProps { type: 'text' | 'select'; filterBy: string; } export declare type FeTableColumnProps = HeaderGroup & UseSortByColumnProps & UseFiltersColumnProps & UseRowSelectInstanceProps & { Filter: FilterComponent; }; export declare type FeTableColumnOptions = Column & UseTableColumnOptions & UseSortByColumnOptions & UseFiltersColumnOptions & UseRowSelectOptions; export declare type FeUseTable = UseTableOptions & UseFiltersOptions & UseSortByOptions & UseExpandedOptions & UseRowSelectOptions & UsePaginationOptions; export declare type FeTableInstance = TableInstance & UseTableInstanceProps & UsePaginationInstanceProps & UseRowSelectInstanceProps; export declare type FeTableState = TableState & UseFiltersState & UseSortByState & UseRowSelectState;