import { ColumnDef } from '@tanstack/react-table'; import { EmptyStateProps } from '../../EmptyState/EmptyState'; export interface SpreadsheetProps { /** Flag to determine if the data is being fetched */ loading: boolean; /** Table configuration that will handle column headers and rendering of data. */ columns: ColumnDef[]; /** Array of data passed into the Table */ data: TData[]; /** This is the text that is displayed when no data is available */ noDataFields: EmptyStateProps; /** Configure the sticky header and columns */ stickyTableConfig?: { header?: number; left?: number; right?: number; }; /** This determines if there are more rows to load */ hasMore?: boolean; /** These rules help us manage forms */ inputRules?: { [key: string]: { required?: boolean; mandatory?: boolean; data_type?: 'string' | 'number' | 'boolean' | Date; options?: string[]; validation_rule?: string; }; }; /** Determine whether to showcase the header error count and background color change. */ isReviewMode?: boolean; /** You may define a set height for the table - optional */ customHeight?: number | string; /** You may define a set width for the table - optional */ customWidth?: number | string; /** If the table is next to another element, the computed width of the table will be incorrect. Use this to input the width of the element (including padding, margin, and other spacing) to have the correct width for the table. */ widthOffset?: number; /** If there are columns that should be selected by default, then this prop is necessary. */ selectedColumns?: string[]; /** Callback function will return the updated data to the host component */ onUpdateData?: (data: TData[]) => void; /** Callback function will return the deleted row to the host component */ onRowDelete?: (data: TData, index: number) => void; /** Callback function will return the updated row to the host component */ onRowSave?: (data: TData) => void; /** Flag to determine if the table is submited */ onRowClick?: ({ data, selectedCell, }: { data: TData; selectedCell: string; }) => void; /** Flag to determine if the table is submited */ isTableSubmited?: boolean; /** This is the value used for search filtering */ searchTerm?: string; /** Callback function will return the updated invalid cell count to the host component */ onInvalidCountChange?: (count: number) => void; /** Optionally update the parent component to know if the sticky classes are applied. */ onStickyTableClassChange?: (isSticky: boolean) => void; /** SubHeader name to be displayed in the table header */ subHeaderKeyName?: string; /** Optionally remove the outside border of the Spreadsheet. This is useful when the Spreadsheet appears within another container. */ noOutsideBorder?: boolean; /** Optional flag to indicate whether the last row in the table has been deleted or not */ isLastRowDeleted?: { isRowDelete: boolean; tooltipMessage: string; confirmButtonText?: string; }; /** Optional array of keys to be included in the main data */ keysToInclude?: string[]; /** Optional prop to define an exact height of the rows. NOTE: This may be removed later once we make the calculations more dynamic to handle variable height rows within a single Spreadsheet. */ rowHeight?: number; /** Optional prop to define the overscan of the rows. By default it is 5. */ overscan?: number; /** Optional prop to be used where virtualization is not needed and height of the rows needs to be calculated dynamically. */ noVirtualization?: boolean | { dynamicRowHeight?: boolean; }; /** Callback function will return the clicked header to the host component */ onHeaderCellClick?: (header: ColumnDef) => void; /** Callback function will return the clicked header to the host component */ headerCancelCallout?: () => void; /** Optional prop to add a test id to the Spreadsheet for QA testing */ qaTestId?: string; /** Optional prop to define the order of the columns. */ columnOrder?: string[]; } export interface CellHeader { heading: string; subHeader: string; showCount: boolean; subHeadingTooltipContent: string; subHeaderError: string; subHeaderValue: string; subHeaderColor: string; errorCount: number; validCount: number; color: string; }