hightable
Version:
A dynamic windowed scrolling table component for react
69 lines (68 loc) • 4.01 kB
TypeScript
import { KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'react';
import { ColumnConfiguration } from '../../helpers/columnConfiguration.js';
import { DataFrame } from '../../helpers/dataframe/index.js';
import { Selection } from '../../helpers/selection.js';
import { OrderBy } from '../../helpers/sort.js';
import { ColumnParameters } from '../../hooks/useColumnParameters.js';
import { type MaybeHiddenColumn } from '../../hooks/useColumnVisibilityStates.js';
import { type CellContentProps } from '../Cell/Cell.js';
export { type CellContentProps } from '../Cell/Cell.js';
interface Props {
data: DataFrame;
cacheKey?: string;
className?: string;
columnConfiguration?: ColumnConfiguration;
focus?: boolean;
maxRowNumber?: number;
orderBy?: OrderBy;
overscan?: number;
padding?: number;
selection?: Selection;
styled?: boolean;
onColumnsVisibilityChange?: (columns: Record<string, MaybeHiddenColumn>) => void;
onDoubleClickCell?: (event: MouseEvent, col: number, row: number) => void;
onError?: (error: unknown) => void;
onKeyDownCell?: (event: KeyboardEvent, col: number, row: number) => void;
onMouseDownCell?: (event: MouseEvent, col: number, row: number) => void;
onOrderByChange?: (orderBy: OrderBy) => void;
onSelectionChange?: (selection: Selection) => void;
renderCellContent?: (props: CellContentProps) => ReactNode;
stringify?: (value: unknown) => string | undefined;
}
export declare const defaultOverscan = 20;
export declare const columnWidthsSuffix = ":2:column:widths";
export declare const columnVisibilityStatesSuffix = ":2:column:visibility";
/**
* Render a table with streaming rows on demand from a DataFrame.
*
* orderBy: the order used to fetch the rows. If set, the component is controlled, and the property cannot be unset (undefined) later. If undefined, the component is uncontrolled (internal state). If the data cannot be sorted, it's ignored.
* onOrderByChange: the callback to call when the order changes. If undefined, the component order is read-only if controlled (orderBy is set), or disabled if not (or if the data cannot be sorted).
* selection: the selected rows and the anchor row. If set, the component is controlled, and the property cannot be unset (undefined) later. If undefined, the component is uncontrolled (internal state).
* onSelectionChange: the callback to call when the selection changes. If undefined, the component selection is read-only if controlled (selection is set), or disabled if not.
*/
export default function HighTable(props: Props): import("react/jsx-runtime").JSX.Element;
type PropsData = Omit<Props, 'data'>;
type ScrollContainerProps = Omit<PropsData, 'orderBy' | 'onOrderByChange' | 'selection' | 'onSelectionChange' | 'columnConfiguration' | 'maxRowNumber'> & {
version: number;
maxRowNumber: number;
numRows: number;
data: Omit<DataFrame, 'numRows'>;
};
type TablePartProps = Omit<ScrollContainerProps, 'maxRowNumber' | 'styled' | 'className' | 'overscan' | 'onerror'> & {
offsetTop: number;
rowsRange: RowsRange;
columnsParameters: ColumnParameters[];
tableCornerRef: RefObject<Pick<HTMLTableCellElement, 'offsetWidth'> | null>;
};
interface RowsRange {
start: number;
end: number;
}
/**
* Container providing the scrollable area for the table.
*/
export declare function ScrollContainer({ data, numRows, overscan, padding, focus, onDoubleClickCell, onMouseDownCell, onKeyDownCell, onError, stringify, className, styled, version, renderCellContent, maxRowNumber, }: ScrollContainerProps): import("react/jsx-runtime").JSX.Element;
/**
* Only the visible rows are fetched and rendered as HTML <tr> elements.
*/
export declare function TablePart({ data, numRows, padding, focus, onDoubleClickCell, onMouseDownCell, onKeyDownCell, stringify, version, renderCellContent, offsetTop, rowsRange, columnsParameters, tableCornerRef, }: TablePartProps): import("react/jsx-runtime").JSX.Element | undefined;