@signozhq/table/dist/index.d.ts

Table component with granular control using tanstack

import * as react_jsx_runtime from 'react/jsx-runtime';
import * as React from 'react';
import { ColumnDef, Row, ExpandedState, Cell } from '@tanstack/react-table';
export { Cell, ColumnDef, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ExpandedState, HeaderGroup, Row, RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table';
import { Virtualizer } from '@tanstack/react-virtual';

type TableProps = React.ComponentProps<'table'> & {
    fixedHeight?: string | number;
    containerRef?: React.Ref<HTMLDivElement>;
    containerProps?: React.HTMLAttributes<HTMLDivElement>;
};
declare function Table({ className, fixedHeight, containerRef, containerProps, ...props }: TableProps): react_jsx_runtime.JSX.Element;
declare function TableHeader({ className, sticky, ...props }: React.ComponentProps<'thead'> & {
    sticky?: boolean;
}): react_jsx_runtime.JSX.Element;
declare function TableBody({ className, ...props }: React.ComponentProps<'tbody'>): react_jsx_runtime.JSX.Element;
declare function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>): react_jsx_runtime.JSX.Element;
declare function TableRow({ className, ...props }: React.ComponentProps<'tr'>): react_jsx_runtime.JSX.Element;
declare function TableHead({ className, ...props }: React.ComponentProps<'th'>): react_jsx_runtime.JSX.Element;
declare function TableCell({ className, ...props }: React.ComponentProps<'td'>): react_jsx_runtime.JSX.Element;
declare function TableCaption({ className, ...props }: React.ComponentProps<'caption'>): react_jsx_runtime.JSX.Element;

interface DataTableProps<TData, TValue> {
    columns: ColumnDef<TData, TValue>[];
    data: TData[];
    tableId: string;
    onColumnOrderChange?: (orderedColumns: ColumnDef<TData, TValue>[]) => void;
    enableColumnReordering?: boolean;
    enableColumnResizing?: boolean;
    enableSorting?: boolean;
    enableFiltering?: boolean;
    enableGlobalFilter?: boolean;
    enableColumnPinning?: boolean;
    defaultColumnWidth?: number;
    minColumnWidth?: number;
    maxColumnWidth?: number;
    enableRowSelection?: boolean;
    selectionMode?: SelectionModeType;
    onRowSelectionChange?: (selectedRows: TData[]) => void;
    enableRowExpansion?: boolean;
    renderSubComponent?: (props: {
        row: Row<TData>;
    }) => React.ReactNode;
    initialExpanded?: ExpandedState;
    onExpandedChange?: (expanded: ExpandedState) => void;
    getRowCanExpand?: (row: Row<TData>) => boolean;
    expandOnRowClick?: boolean;
    renderRow?: (props: {
        row: Row<TData>;
        children: React.ReactNode;
    }) => React.ReactNode;
    onRowClick?: (row: Row<TData>, event: React.MouseEvent) => void;
    onRowDoubleClick?: (row: Row<TData>, event: React.MouseEvent) => void;
    onCellClick?: (cell: Cell<TData, unknown>, event: React.MouseEvent) => void;
    onCellDoubleClick?: (cell: Cell<TData, unknown>, event: React.MouseEvent) => void;
    stopPropagationOnRowClick?: boolean;
    stopPropagationOnCellClick?: boolean;
    enableScrollRestoration?: boolean;
    enableDynamicRowHeights?: boolean;
    rowHeight?: number;
    onScroll?: (scrollPosition: {
        top: number;
        left: number;
    }) => void;
    enablePagination?: boolean;
    pageSize?: number;
    pageSizeOptions?: number[];
    onPageChange?: (page: number) => void;
    onPageSizeChange?: (pageSize: number) => void;
    serverSidePagination?: boolean;
    totalCount?: number;
    isLoading?: boolean;
    onPaginationChange?: (pagination: {
        pageIndex: number;
        pageSize: number;
    }) => void;
    enableInfiniteScroll?: boolean;
    hasMore?: boolean;
    onLoadMore?: () => void;
    loadingMore?: boolean;
    enableVirtualization?: boolean;
    estimateRowSize?: number;
    overscan?: number;
    onVirtualizerChange?: (virtualizer: Virtualizer<HTMLDivElement, Element>) => void;
    virtualizerRef?: React.MutableRefObject<Virtualizer<HTMLDivElement, Element> | undefined>;
    scrollToIndexRef?: React.MutableRefObject<((rowIndex: number, options?: {
        align?: 'start' | 'center' | 'end';
    }) => void) | undefined>;
    showHeaders?: boolean;
    enableStickyHeaders?: boolean;
    fixedHeight?: string | number;
}
declare enum SelectionMode {
    Single = "single",
    Multiple = "multiple"
}
type SelectionModeType = SelectionMode.Single | SelectionMode.Multiple;
declare function DataTable<TData, TValue>({ columns, data, tableId, onColumnOrderChange, enableColumnResizing, enableSorting, enableFiltering, enableGlobalFilter, enableColumnReordering, enableColumnPinning, defaultColumnWidth, minColumnWidth, maxColumnWidth, enableRowSelection, selectionMode, onRowSelectionChange, enableRowExpansion, renderSubComponent, initialExpanded, onExpandedChange, getRowCanExpand, expandOnRowClick, renderRow, onRowClick, onRowDoubleClick, onCellClick, onCellDoubleClick, stopPropagationOnRowClick, stopPropagationOnCellClick, enableScrollRestoration, enableDynamicRowHeights, rowHeight, onScroll, enablePagination, pageSize, pageSizeOptions, onPageChange, onPageSizeChange, serverSidePagination, totalCount, isLoading, onPaginationChange, enableInfiniteScroll, hasMore, onLoadMore, loadingMore, enableVirtualization, estimateRowSize, overscan, onVirtualizerChange, virtualizerRef, scrollToIndexRef, showHeaders, enableStickyHeaders, fixedHeight, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;

export { DataTable, type DataTableProps, SelectionMode, type SelectionModeType, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };