@shakibdshy/react-tablegrid
Version:
A modern, flexible, headless and advanced table component for React with grid layout
264 lines (245 loc) • 10.6 kB
text/typescript
import * as React from 'react';
import React__default from 'react';
import { TableProps, TableCustomRender, Column, ColumnResizeInfoState, TableState, ServerSideConfig, TableCustomComponents, HeaderGroup, UpdateDataFn, SortDirection } from './types.mjs';
import { u as useTableGrid } from './use-table-grid-Cv9U2bQF.mjs';
interface VirtualizationConfig$1 {
enabled: boolean;
rowHeight: number;
overscan: number;
scrollingDelay?: number;
onEndReached?: () => void;
getRowHeight?: (index: number) => number;
}
interface TableGridProps<T extends Record<string, unknown>> extends Omit<TableProps<T>, "columns"> {
style?: React__default.CSSProperties;
customRender?: TableCustomRender<T>;
columns: Column<T>[];
columnResizeInfo?: ColumnResizeInfoState;
columnSizing?: TableState<T>["columnSizing"];
data: T[];
onStateChange?: (state: TableState<T>) => void;
isLoading?: boolean;
serverSide?: ServerSideConfig<T>;
enableColumnResize?: boolean;
state?: TableState<T>;
columnResizeDirection?: "ltr" | "rtl";
virtualization?: VirtualizationConfig$1;
withoutTailwind?: boolean;
}
interface TableGridHandle {
scrollTo: (index: number) => void;
}
declare const TableGrid: (<T extends Record<string, unknown>>(props: TableGridProps<T> & {
ref?: React__default.ForwardedRef<TableGridHandle>;
}) => React__default.ReactElement) & {
displayName?: string;
};
interface TableColumnProps<T extends Record<string, unknown>> {
tableInstance: ReturnType<typeof useTableGrid<T>>;
column: Column<T>;
className?: string;
width?: number;
style?: React__default.CSSProperties;
components?: TableCustomComponents<T>;
enableColumnResize?: boolean;
withoutTailwind?: boolean;
}
declare function TableColumnBase<T extends Record<string, unknown>>({ tableInstance, column, className, width, style, enableColumnResize, withoutTailwind, }: TableColumnProps<T>): React__default.JSX.Element;
declare const TableColumn: typeof TableColumnBase;
interface TableHeaderProps<T extends Record<string, unknown>> {
tableInstance: ReturnType<typeof useTableGrid<T>>;
className?: string;
style?: React__default.CSSProperties;
components?: TableCustomComponents<T>;
enableColumnResize?: boolean;
TableColumnClassName?: string;
headerRowClassName?: string;
withoutTailwind?: boolean;
}
declare function TableHeader<T extends Record<string, unknown>>({ tableInstance, className, TableColumnClassName, headerRowClassName, style, components, enableColumnResize, withoutTailwind, }: TableHeaderProps<T>): React__default.JSX.Element;
interface TableBodyProps<T extends Record<string, unknown>> {
className?: string;
style?: React__default.CSSProperties;
bodyRowClassName?: string;
bodyCellClassName?: string;
tableInstance: ReturnType<typeof useTableGrid<T>>;
components?: {
EmptyState?: React__default.ComponentType;
LoadingState?: React__default.ComponentType;
};
customRender?: {
empty?: () => React__default.ReactNode;
loading?: () => React__default.ReactNode;
row?: (props: {
row: T;
rowIndex: number;
}) => React__default.ReactNode;
};
withoutTailwind?: boolean;
}
declare function TableBody<T extends Record<string, unknown>>({ className, style, tableInstance, components, customRender, bodyRowClassName, bodyCellClassName, withoutTailwind, }: TableBodyProps<T>): string | number | boolean | Iterable<React__default.ReactNode> | React__default.JSX.Element | null | undefined;
interface TableHeaderGroupProps<T extends Record<string, unknown>> {
className?: string;
style?: React.CSSProperties;
tableInstance: ReturnType<typeof useTableGrid<T>>;
TableColumnClassName?: string;
customRender?: {
group: (group: HeaderGroup<T>) => React.ReactNode;
};
headerGroupClassName?: string;
withoutTailwind?: boolean;
}
declare function TableHeaderGroup<T extends Record<string, unknown>>({ className, style, tableInstance, customRender, TableColumnClassName, headerGroupClassName, withoutTailwind, }: TableHeaderGroupProps<T>): React.JSX.Element | null;
interface TableRowProps<T extends Record<string, unknown>> {
row: T;
rowIndex: number;
className?: string;
cellClassName?: string;
style?: React__default.CSSProperties;
tableInstance: ReturnType<typeof useTableGrid<T>>;
components?: {
Cell?: React__default.ComponentType<{
column: Column<T>;
row: T;
value: T[keyof T];
}>;
};
customRender?: (column: Column<T>, row: T, value: T[keyof T]) => React__default.ReactNode;
isVirtual?: boolean;
virtualStyle?: React__default.CSSProperties;
withoutTailwind?: boolean;
isSelected?: boolean;
}
declare function TableRow<T extends Record<string, unknown>>({ row, rowIndex, className, style, tableInstance, components, customRender, isVirtual, virtualStyle, cellClassName, withoutTailwind, isSelected, }: TableRowProps<T>): React__default.JSX.Element;
interface TableSearchProps<T extends Record<string, unknown>> {
className?: string;
searchInputClassName?: string;
tableInstance: ReturnType<typeof useTableGrid<T>>;
style?: React__default.CSSProperties;
placeholder?: string;
components?: {
SearchInput?: React__default.ComponentType<{
value: string;
onChange: (value: string) => void;
placeholder?: string;
}>;
};
customRender?: (props: {
value: string;
onChange: (value: string) => void;
placeholder?: string;
}) => React__default.ReactNode;
onFilterChange?: (value: string) => void;
withoutTailwind?: boolean;
isLoading?: boolean;
error?: string;
}
declare function TableSearch<T extends Record<string, unknown>>({ className, searchInputClassName, tableInstance, style, placeholder, components, customRender, onFilterChange, withoutTailwind, isLoading, error, }: TableSearchProps<T>): React__default.JSX.Element;
interface VirtualizationConfig {
enabled: boolean;
rowHeight: number;
overscan: number;
scrollingDelay?: number;
onEndReached?: () => void;
getRowHeight?: (index: number) => number;
}
interface VirtualizedBodyProps<T extends Record<string, unknown>> {
className?: string;
bodyRowClassName?: string;
bodyCellClassName?: string;
style?: React__default.CSSProperties;
config: VirtualizationConfig;
tableInstance: ReturnType<typeof useTableGrid<T>>;
customRender?: {
row?: typeof TableRow;
loading?: () => React__default.ReactNode;
};
components?: {
LoadingState?: React__default.ComponentType;
};
}
interface VirtualizedBodyHandle {
scrollTo: (index: number) => void;
}
declare const VirtualizedBody: <T extends Record<string, unknown>>(props: VirtualizedBodyProps<T> & {
ref?: React__default.ForwardedRef<VirtualizedBodyHandle>;
withoutTailwind?: boolean;
}) => React__default.ReactElement;
interface TableCellProps<T> {
column: Column<T>;
row: T;
rowIndex: number;
value: T[keyof T];
onRowChange?: UpdateDataFn<T>;
onRowDelete?: (index: number) => void;
className?: string;
width?: number;
style?: React__default.CSSProperties;
components?: {
Cell?: React__default.ComponentType<{
column: Column<T>;
row: T;
value: T[keyof T];
}>;
};
customRender?: (column: Column<T>, row: T, value: T[keyof T]) => React__default.ReactNode;
withoutTailwind?: boolean;
isEditing?: boolean;
}
declare function TableCell<T extends Record<string, unknown>>({ column, row, rowIndex, value, onRowChange, onRowDelete, className, width, style, components, customRender, withoutTailwind, isEditing, }: TableCellProps<T>): React__default.JSX.Element;
interface TableResizerProps {
columnId: string;
isResizing: boolean;
onResizeStart: (columnId: string, startX: number) => void;
onResizeMove: (currentX: number) => void;
onResizeEnd: () => void;
direction?: "ltr" | "rtl";
isDragging?: boolean;
width?: number;
withoutTailwind?: boolean;
}
declare function TableResizer({ columnId, isResizing, onResizeStart, onResizeMove, onResizeEnd, direction, isDragging, width, withoutTailwind, }: TableResizerProps): React__default.JSX.Element;
interface SortIconProps {
direction?: SortDirection;
className?: string;
active?: boolean;
}
declare function SortIcon({ direction, className, active, }: SortIconProps): React.JSX.Element;
interface LoadingSpinnerProps {
size?: 'sm' | 'md' | 'lg';
className?: string;
}
declare function LoadingSpinner({ size, className }: LoadingSpinnerProps): React.JSX.Element;
declare const Input: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
declare const emptyStyles: {
base: string;
alignment: {
start: string;
center: string;
end: string;
};
};
type EmptyTextTagProps = 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
interface EmptyProps {
image?: React__default.ReactNode;
imageClassName?: string;
defaultImageClassName?: string;
text?: string;
textAs?: EmptyTextTagProps;
textClassName?: string;
alignment?: keyof typeof emptyStyles.alignment;
className?: string;
}
declare function Empty({ image, className, text, textAs, imageClassName, textClassName, alignment, defaultImageClassName, children, }: React__default.PropsWithChildren<EmptyProps>): React__default.JSX.Element;
declare namespace Empty {
var displayName: string;
}
interface EmptySVGIconProps {
className?: string;
}
declare function EmptyBoxIcon({ className }: EmptySVGIconProps): React__default.JSX.Element;
declare function EmptyProductBoxIcon({ className, }: EmptySVGIconProps): React__default.JSX.Element;
declare function SearchNotFoundIcon({ className, }: EmptySVGIconProps): React__default.JSX.Element;
declare function CaretDown(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
declare function CaretUp(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
export { CaretDown, CaretUp, Empty, EmptyBoxIcon, EmptyProductBoxIcon, Input, LoadingSpinner, SearchNotFoundIcon, SortIcon, TableBody, TableCell, TableColumn, TableGrid, type TableGridProps, TableHeader, TableHeaderGroup, TableResizer, TableRow, TableSearch, VirtualizedBody };