import { MiddlewareFunction } from "@table-library/react-table-library/types/common"; import { Column as ReactTableColumn } from "@table-library/react-table-library/types/compact"; import { ExcludedProps } from "@vitality-ds/system"; import React, { MouseEventHandler } from "react"; import { CellComponentProps, CellProps } from "./components/Cells/types"; import { RowData, RowOnClickType } from "./components/Row/types"; import { EmptyProps as EmptyStateProps } from "./components/States/Empty/types"; import { RightActionsButtonOptions, ToolbarProps } from "./components/Toolbar/types"; export declare type TableData = { nodes: RowData[]; }; export declare type ReactTableColumns = ReactTableColumn[]; export declare type TableSize = "default" | "compact"; declare type PaginationProps = { rowsPerPageOptions?: number[]; }; export declare type TableStatusTypes = "loading" | "empty" | "error"; export declare type TableStatusProps = EmptyStateProps & { /** * changes the status of the table; `"loading"` makes the table enter a loading state, `"error"` makes the table enter an error state. */ status: Extract; /** * Changes the props of the retry button when hasError is true */ errorButtonProps?: errorButtonPropType; /** * customises the error message when status="error" */ errorMessage?: string; }; export declare type errorButtonPropType = { /** * The function run when the try again button is clicked, if no function is given the retry button will not appear */ onClick: MouseEventHandler; /** * Allows the user to change the text within the label * @default "Try Again" */ label?: string; /** * Disables the button and adds a loading spinner */ isLoading?: boolean; }; export declare type ColumnType = Omit & { /** * The column title */ label: string; /** * The type of cell to be rendered for this column's data type */ cellType?: T; /** * Unique Identifier for the column. Should match the key used in each row's data object for that cell */ colId: string; /** * Custom function to specify which props to pass to all cells in a column based on their values. You have access to both the column's Id (colId) and row data. */ getCellProps?: (colId: string, rowData: RowData) => CellProps; /** * Determine if the column can be clicked and dragged to resize * @default false */ resize?: boolean; /** * Optional minimum width for resize: true columns */ minWidth?: number; /** * Applies a checkbox column before this column, handled internally */ hasSelect?: boolean; /** * Applies a function to sort data by the values within that column */ sortable?: boolean | ((a: RowData, b: RowData) => void); /** * Sets the sort function for this column as the default so the first table rendered is sorted. Only pass to one column. */ isDefaultSort?: boolean; }; export declare type Columns = ColumnType[]; export declare type TableProps = ExcludedProps & { id: string; /** * The table's data */ tableData: RowData[]; /** * Configuration of the columns including their labels and cell rendering. */ columns: Columns; /** * The string that renders when no data is available for a particular cell. * @default "-" */ emptyPlaceholderText?: string; /** * Determines whether the table is compact or not. size="compact" reduces padding between rows to increase the number of entries that can fit on the screen * @default "default" */ size?: TableSize; /** * Determines whether the on hover highlighting is visible on tables without a onRowClick function. * @default true */ rowHighlight?: boolean; /** * Specifies a function to trigger on row click and contains the data of the row (`rowData`) and the event (`event`). */ onRowClick?: RowOnClickType; /** * The props for the Toolbar section */ toolbarProps?: ToolbarProps; statusProps?: TableStatusProps; /** * String that determines the widths of individual columns based on the CSS property grid-template-columns, see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for more */ gridTemplateColumns?: string; /** * Returns the string value of grid-template-columns after columns have been resized, useful for storing width preferences */ onLayoutChange?: (newLayout: string) => void; /** * Enables row selection and places checkboxes at the start of the table's first column. * @default false */ selectableRows?: boolean; /** * the function that triggers when the selected state changes contains both the changing action and the state of all selected id's */ onSelectChange?: MiddlewareFunction; /** * Enables users to navigate through pages in a table. Useful for large data sets or when using table in a limited space. Option to pass an array of numbers which gives the developer freedom to set the options in the rows / page select, which determines how many rows can be displayed per page. The user ultimately decides how many rows to display but the developer controls the choices. * @default false */ pagination?: PaginationProps | boolean; /** * The row active by default when the table is first rendered. Does not actually call the `onRowClick` function just styles the row as if its been clicked. */ defaultActiveRow?: string; /** * The row(s) selected by default when the table is first rendered. */ defaultSelectedRows?: string[]; }; export declare type GetCellTypeReturnType = { [x: string]: any; as: React.ComponentType; }; export declare type CellTypes = keyof CellComponentProps & string; export {};