react-ts-tab-lib/dist/types/components/Table/Table.d.ts

A React Typescript library rendering a Table compenent receiving in props for rows an array of a generic type T (precised when using the component) and for columns an array of objects of type Column<T> precising the displayName, the key of the T type and

import { JSX, ReactNode } from 'react';
export type DataType = 'string' | 'number' | 'date' | 'boolean' | 'custom';
export type OrderType = 'asc' | 'desc';
export type ActiveOrderType<T> = {
    property: keyof T;
    order: OrderType;
};
type RangeInfoText = {
    showEntries_altText: string | null;
    to_altText: string | null;
    of_altText: string | null;
    entries_altText: string | null;
};
export type TextContentType = {
    searchLabel?: string | null;
    searchPlaceholder?: string | null;
    sampleLabelPrefix?: string | null;
    sampleLabelSuffix?: string | null;
    emptyTableText?: string | null;
    rangeInfoText?: RangeInfoText | null;
    previousPageButtonLabel?: string | null;
    nextPageButtonLabel?: string | null;
};
export type Column<T> = {
    property: keyof T;
    displayName?: string;
    type: DataType;
    render?: (value: T[keyof T]) => ReactNode;
};
export type TableHeadersClassNames = {
    font?: string;
    backgroundColor?: string;
    textColor?: string;
    borderY?: string;
    borderColor?: string;
    borderL?: string;
    borderR?: string;
    roundedL?: string;
    roundedR?: string;
    padding?: string;
    margin?: string;
    gap?: string;
};
export type RangeOptionsClassNames = {
    buttonBackgroundColor?: string;
    buttonText?: string;
    buttonBorder?: string;
    buttonBorderColor?: string;
    buttonRounded?: string;
    buttonPadding?: string;
    menuBorder?: string;
    menuBorderColor?: string;
    menuRounded?: string;
    menuPadding?: string;
    menuMargin?: string;
    menuTextColor?: string;
    menuBackgroundColor?: string;
};
export type SearchBarClassNames = {
    label?: string;
    inputPadding?: string;
    inputBackgroundColor?: string;
    inputMarginL?: string;
    inputBorder?: string;
    inputBorderColor?: string;
    inputRounded?: string;
    inputFocusOutLine?: string;
    inputTextColor?: string;
};
export type PaginationClassNames = {
    paginationBlockHover?: string;
    buttonBackgroundColor?: string;
    buttonBackgroundColorHover?: string;
    buttonBorderColor?: string;
    textColor?: string;
    border?: string;
    rounded?: string;
    padding?: string;
    previousButtonPadding?: string;
    nextButtonPadding?: string;
    previousButtonRoundedL?: string;
    navButtonsColor?: string;
    nextButtonRoundedR?: string;
    margin?: string;
    currentPageButton?: string;
    otherpages?: string;
    navButtons?: string;
};
export type RowsClassNames = {
    oddRowBackgroundColor?: string;
    evenRowBackgroundColor?: string;
    marginL?: string;
    marginR?: string;
    paddingT?: string;
    paddingB?: string;
    paddingX?: string;
    height?: string;
    textColor?: string;
};
export type StyleClassNames = {
    tableBackgroundColor?: string;
    tableBorders?: string;
    tableBordersHover?: string;
    tablePaddings?: string;
    tableMargins?: string;
    tableRounded?: string;
    tableHeaders?: TableHeadersClassNames;
    rangeOptionsAndSearchBarArea?: string;
    rangeLengthOptions?: RangeOptionsClassNames;
    searchBar?: SearchBarClassNames;
    sortIndicatorColor?: string;
    rows?: RowsClassNames;
    cells?: string;
    pagination?: PaginationClassNames;
};
export type TableProps<T> = {
    columns: Column<T>[];
    rows: T[];
    onRowHover?: (row: T | null) => void;
    onRowClick?: (row: T | null) => void;
    styleClassNames?: StyleClassNames;
    rangeLengthOptions?: number[] | undefined;
    defaultOrder?: ActiveOrderType<T> | null;
    textContent?: TextContentType | null;
};
/**
 * The Table component renders a table with a specified number of columns and rows.
 *
 * Props:
 *   columns: Column<T>[]
 *   rows: T[]
 *   onRowHover: (row: T | null) => void
 *   onRowClick: (row: T | null) => void
 *   classNames: ClassNames
 *   rangeLengthOptions: number[] | undefined
 *   defaultOrder: ActiveOrderType<T> | null
 *   textContent: TextContentType | null
 *
 * State:
 *   allRows: T[]
 *   columnsWidth: number[]
 *   activeOrder: { property: keyof T; order: OrderType }
 *   currentPage: number
 *   pagesNumber: number
 *   displayedRange: T[]
 *   hoveredRow: T | null
 *   selectedKeys: Selection
 *
 * Effects:
 *   Updates the sample length when the user selects a new number of displayed entries.
 *   Resets the current page to 1.
 *   Filters the rows based on the search input value.
 *   Generates an array of page numbers for the pagination component.
 *   Updates the columns width when the component is mounted.
 *
 * Renders:
 *   A table with the specified number of columns and rows.
 *   A select menu for selecting the number of displayed entries.
 *   A search bar for filtering the rows.
 *   A pagination component for navigating between pages.
 */
declare function Table<T extends Record<string, any>>({ columns, rows, onRowHover, onRowClick, styleClassNames, rangeLengthOptions, defaultOrder, textContent }: TableProps<T>): JSX.Element;
export default Table;