@aws-northstar/ui/components/InfiniteQueryTable/index.d.ts

NorthStar Design System v2

import { TableProps } from '@cloudscape-design/components/table';
import type { UseInfiniteQueryResult } from '@tanstack/react-query';
/**
 * Options for a local text filter
 */
export interface InfiniteQueryTextFilterOptions<TItem> {
    /**
     * Given the entered filter text, return true if the item is considered a match
     */
    readonly filterFunction: (filterText: string, item: TItem) => boolean;
    /**
     * Placeholder for the filter text box
     */
    readonly placeholder?: string;
}
/**
 * Options for local sorting
 */
export interface InfiniteQuerySortOptions<TItem> {
    /**
     * Default column to sort by. Can use dot notation for nested keys of an item, eg foo.bar for { foo: { bar: "value" } }
     * @default not sorted
     */
    readonly defaultSortingColumn?: TableProps.SortingColumn<TItem>;
    /**
     * Set to true if sorting in descending order
     * @default ascending order
     */
    readonly defaultSortingDescending?: boolean;
}
/**
 * Options for the infinite query table
 */
export interface InfiniteQueryTableProps<TItem, K extends string, TExtendedItem extends TItem, TError> extends Omit<TableProps, 'items' | 'loading' | 'pagination' | 'columnDefinitions'> {
    /**
     * Columns configuration
     */
    readonly columnDefinitions: TableProps.ColumnDefinition<TExtendedItem>[];
    /**
     * Tanstack query hook result used to fetch items
     */
    readonly query: UseInfiniteQueryResult<Record<K, TItem[]>, TError>;
    /**
     * Key in the response under which the items to tabulate are returned
     */
    readonly itemsKey: K;
    /**
     * Number of items per page. Set this to the page size you are requesting in your query hook.
     * @default 100
     */
    readonly pageSize?: number;
    /**
     * Options for a text filter which will filter loaded items client side
     */
    readonly clientSideTextFilter?: InfiniteQueryTextFilterOptions<TItem>;
    /**
     * Options for sorting items client side
     */
    readonly clientSideSort?: InfiniteQuerySortOptions<TItem>;
    /**
     * Optional function to compute additional fields or add items, called with all pages of data whenever new data is loaded
     */
    readonly extendData?: (data: TItem[]) => TExtendedItem[];
}
/**
 * Extends the Cloudscape Table component with pagination options for @tanstack/react-query infinite query hooks.
 * Compatible with generated hooks for paginated operations from <a href='https://aws.github.io/aws-pdk/developer_guides/type-safe-api/index.html' target='_blank' rel='noreferrer noopener'>AWS PDK Type Safe API</a>.
 */
declare const InfiniteQueryTable: <TItem, K extends string, TExtendedItem extends TItem, TError>({ query, itemsKey, pageSize, clientSideSort, clientSideTextFilter, extendData, ...tableProps }: InfiniteQueryTableProps<TItem, K, TExtendedItem, TError>) => JSX.Element;
export default InfiniteQueryTable;