import * as React from "react"; import { CellMeasurerCache, InfiniteLoader, List, ListRowRenderer } from "react-virtualized"; import { ViewProps } from "../View"; export interface DataTableProps extends ViewProps { /** Component shown if there is no results */ emptyState?: React.ReactNode; /** The height of a row. When using autoRowHeight, you can supply this for a more accurate initial estimate */ rowHeight?: number; /** The total number of rows that can be loaded. Used for autoloading. */ rowCount: number; /** Function to render a row */ rowRenderer?: ListRowRenderer; header?: React.ReactNodeArray; footer?: React.ReactNode; /** A string to display the total number of results */ total?: React.ReactNode; /** Used to scroll directly to a row. When using autoRowHeight, the height wont be populated yet, so it is important to also specify a rowHeight */ scrollToIndex?: number; /** *Experimental* Automatically measures the row height. Due to the measurement method, this is not suggested for data sets of over 250 items */ autoRowHeight?: boolean; /** * If set, will use an infinite loader. The following props will be required for correct functionality: * isRowLoaded, loadMoreRows, rowCount */ infiniteLoad?: boolean; /** * Function to check if a row has been loaded. Used in conjunction with infiniteLoad */ isRowLoaded?: ({ index }: { index: any; }) => boolean; /** * Function to load the required rows. Used in conjunction with infiniteLoad */ loadMoreRows?: ({ startIndex, stopIndex }: { startIndex: any; stopIndex: any; }) => Promise; /** * A callback that returns the top row rendered. Triggers when the top rendered row changes. */ scrollCallback?: ({ row }: { row: any; }) => void; /** * Hide the scroll to top of page button */ hideScrollButton?: boolean; scrollElement?: any; isListLoading?: boolean; /** * an array representing the columns that should be rendered in this table. each entry in the array contains a header renderer and a cell renderer. * eg. { headerRenderer: () => , cellRenderer: () => Row cell } */ columns?: DataTableColumn[]; /** * If we wish to allow a user to have control over what columns are showing, then supply a true to this prop. */ dynamicColumns?: boolean; /** * If the component is supplied an array of initialColumns, then only display the columns with columnIdentifier contained in this array */ initialColumns?: string[]; } export interface DataTableColumn { columnIdentifier?: string; columnSelectorLabel?: string; cellRenderer: any; headerRenderer: any; } /** * This component renders a table. It can do this in one of two ways. Either by supplying columns (which each include a header and cell renderer), or by supplying a function to render each row out and an array of headers. This uses the TR and TH components from the Table component. */ declare class DataTable extends React.Component { listEl: List; header: HTMLElement; cache: CellMeasurerCache; loaderRef: React.RefObject; constructor(props: any); setHeader(ref: HTMLElement): void; rowsReturn(onRowsRendered: any): (args: any) => void; resetTableData(reload?: boolean): void; scrollToTop(): void; getColumnsToDisplayObjects(): DataTableColumn[]; headersRenderer(args: any): any[]; columnsRenderer(args: any): JSX.Element; /** * Render a select component which has an entry for each of the column array. */ renderColumnSelector(): JSX.Element; /** * When the column selection changes we want to update the columnsToDisplay, in the same order as the columns are supplied, so they are not changing order all the time. * @param evt */ handleColumnChange(evt: any): void; render(): JSX.Element; } export default DataTable;