react-native-tabeller/src/types.ts

import type { ReactNode } from 'react';
import type { ViewStyle, TextStyle, StyleProp, ViewProps } from 'react-native';

/** border style configuration for table elements */
export interface BorderStyle {
  borderColor?: string; // defaults to #000
  borderWidth?: number; // defaults to 0
}

/** base props shared across table components */
export interface BaseTableProps {
  /** custom  style for the component */
  style?: StyleProp<ViewStyle>;
  /** border style configuration */
  borderStyle?: BorderStyle;
}

/** props for the Cell component */
export interface CellProps extends BaseTableProps {
  /** cell content */
  data?: string | number | null;
  /** cell width (pixels) */
  width?: number;
  /** cell height (pixels) */
  height?: number;
  /** flex value for the cell */
  flex?: number;
  /** text style for cell content */
  textStyle?: StyleProp<TextStyle>;
  /** props passed to the cell container */
  cellContainer?: ViewProps;
  /** callback when cell is pressed */
  onPress?: (data: any) => void;
  /** children to render inside the cell */
  children?: ReactNode;
}

/** props for the Row component */
export interface RowProps extends BaseTableProps {
  /** array of data items for each cell in the row */
  data: Array<string | number | null>;
  /** array of widths for each cell */
  widthArr?: number[];
  /** height for the entire row */
  height?: number;
  /** array of flex values for each cell in the row */
  flexArr?: number[];
  /** text style applied to all cell in the row */
  textStyle?: StyleProp<TextStyle>;
  /** function to generate custom text styles for individual cell */
  cellTextStyle?: (item: any) => StyleProp<TextStyle>;
  /** callback when a cell is pressed */
  onPress?: (item: any) => void;
}

/** props for the Rows componen */
export interface RowsProps extends BaseTableProps {
  /** 2D array of data for rows and cells */
  data: Array<Array<string | number | null>>;
  /** array of widths for each column */
  widthArr?: number[];
  /** array of heights for each cell in a column */
  heightArr?: number[];
  /** array of flex values for each column */
  flexArr?: number[];
  /** text style applied to all cells */
  textStyle?: StyleProp<TextStyle>;
  cellTextStyle?: (item: any) => StyleProp<TextStyle>;
  /** callback when a cell is pressed */
  onPress?: (item: any) => void;
}

/** props for the Col component */
export interface ColProps extends BaseTableProps {
  /** array of data items for each cell in the column */
  data: Array<string | number | null>;
  /** width for the entire column */
  width?: number;
  /** array of heights for each cell */
  heightArr?: number[];
  /** flex value for the column */
  flex?: number;
  /** text style applied to all cells in the column */
  textStyle?: StyleProp<TextStyle>;
}

/** props for the Cols component */
export interface ColsProps extends BaseTableProps {
  /** 2D array of data for columns and cells */
  data: Array<Array<string | number | null>>;
  /** array of widths for each column */
  widthArr?: number[];
  /** array of heights for each cell in a column */
  heightArr?: number[];
  /** array of flex values for each column */
  flexArr?: number[];
  /** text style applied to all cells */
  textStyle?: StyleProp<TextStyle>;
}

/** props for the Table component */
export interface TableProps extends BaseTableProps {
  children: ReactNode; // Table content
}

/** props for the TableWrapper component */
export interface TableWrapperProps extends BaseTableProps {
  children: ReactNode; // TableWrapper content
}

/** props for the StickyTable component */
export interface StickyTableProps {
  /** full table data including first column */
  data: (string | number | null)[][];
  /** width of the sticky column */
  stickyColumnWidth: number;
  /** widths for non-sticky columns */
  columnWidths?: number[];
  /** style for the container */
  style?: StyleProp<ViewStyle>;
  /** style for cells */
  cellStyle?: StyleProp<ViewStyle>;
  /** text style for cell content */
  textStyle?: StyleProp<TextStyle>;
  /** style for header row */
  headerStyle?: StyleProp<ViewStyle>;
  /** text style for header cells */
  headerTextStyle?: StyleProp<TextStyle>;
  /** border style */
  borderStyle?: BorderStyle;
}