@kadconsulting/dry
Version:
KAD Reusable Component Library
90 lines (89 loc) • 2.95 kB
TypeScript
/// <reference types="react" />
import type { Column as RTColumn, TableState as RTTableState, TableInstance as RTTableInstance, UsePaginationInstanceProps as RTUsePaginationInstanceProps, UsePaginationState as RTUsePaginationState, Row } from 'react-table';
import { BadgeVariants, BadgeSizes, SemanticColorsEnum, SecondaryColorsEnum } from '../Badge/BadgeTypes';
export { BadgeVariants, BadgeSizes };
export interface DataRow extends Record<string, unknown> {
id: string | number;
}
export interface DataTableInstance<D extends DataRow> extends TableInstance<D>, RTUsePaginationInstanceProps<D> {
}
export interface DataTableState<D extends DataRow> extends TableState<D>, RTUsePaginationState<D> {
}
export interface DataTableProps<D extends DataRow> {
columns: Column<D>[];
data: D[];
pageIndex: number;
pageSize: number;
onPageChange: (newPageIndex: number, newPageSize: number) => void;
filters: {
[key: string]: any;
};
columnOrder: Array<string | number>;
columnWidths: {
[key: string]: number;
};
visibleColumns: string[];
pinnedColumns: string[];
setColumnOrder: (newOrder: Array<string | number>) => void;
setColumnWidths: (newColumnWidths: {
[key: string]: number;
}) => void;
loading: boolean;
setPageIndex: React.Dispatch<React.SetStateAction<number>>;
handleRowClick: (value: D) => void;
loadingRowCount?: number;
id?: string;
className?: string;
'data-testid'?: string;
hasPageSizeInput?: boolean;
hasGoToPageInput?: boolean;
hasResize?: boolean;
isDraggable?: boolean;
badgeColumnConfig?: BadgeColumnConfig;
handleDataFilterChange?: (data: any) => void;
hasAccordion?: boolean;
}
export interface TableState<D extends DataRow> extends RTTableState<D> {
pageIndex: number;
pageSize: number;
sortBy: Array<{
id: keyof D;
desc: boolean;
}>;
filters: {
[key: string]: any;
};
}
export interface TableInstance<D extends DataRow> extends RTTableInstance<D>, RTUsePaginationInstanceProps<D> {
headerGroups: any[];
rows: Row<D>[];
}
export declare enum FilterType {
Text = "Text",
Number = "Number",
DateRange = "DateRange"
}
export interface CustomColumn<T extends Record<string, unknown>> {
isVisible?: boolean;
filterValue?: any;
setFilter?: (value: any) => void;
filterType?: FilterType;
defaultSort?: boolean;
}
export type Column<D extends DataRow> = RTColumn<D> & {
Header: string | React.ReactNode | (() => React.ReactNode);
id?: string;
isPinned?: boolean;
className?: string;
} & CustomColumn<D>;
export type BadgeColor = SemanticColorsEnum | SecondaryColorsEnum;
export type BadgeConfig = {
color: BadgeColor;
variant?: BadgeVariants;
size?: BadgeSizes;
};
export type BadgeColumnConfig = {
[columnName: string]: {
[value: string]: BadgeConfig;
};
};