@kinvolk/headlamp-plugin
Version:
The needed infrastructure for building Headlamp plugins.
105 lines (104 loc) • 4.6 kB
TypeScript
import { TableCellProps } from '@mui/material/TableCell';
import { ReactNode } from 'react';
import { ApiError } from '../../../lib/k8s/apiProxy';
import { KubeObjectClass } from '../../../lib/k8s/KubeObject';
import { RowAction } from '../../../redux/actionButtonsSlice';
import { TableColumn } from '../Table';
export type ResourceTableColumn<RowItem> = {
/** Unique id for the column, not required but recommended */
id?: string;
/** Show or hide the column @default true */
show?: boolean;
/** Label of the column that will be shown in the header */
label: string;
cellProps?: TableCellProps & {
[propName: string]: any;
};
/**
* By default the column will be sorted by the value provided in the getter
* but you can provide your own sorting function here
*
* @default true
**/
sort?: boolean | ((a: RowItem, b: RowItem) => number);
/** Change how filtering behaves, by default it will just search the text value */
filterVariant?: TableColumn<any>['filterVariant'];
disableFiltering?: boolean;
/**
* Column width in the grid template format
* Number values will be converted to "fr"
* @example
* 1
* "1.5fr"
* "min-content"
*/
gridTemplate?: string | number;
/** Options for the select filter */
filterSelectOptions?: TableColumn<any>['filterSelectOptions'];
} & ({
/** To render a simple value provide property name of the item */
datum: keyof RowItem;
render?: never;
getValue?: never;
} | {
datum?: never;
/** How to render a cell */
render?: (item: RowItem) => ReactNode;
/** Plain value for filtering and sorting. This is going to be displayed unless render property is defined */
getValue: (item: RowItem) => string | number | null | undefined;
} | {
datum?: never;
render?: never;
/** @deprecated please use getValue and render (optional, if you need custom renderer) */
getter: (item: RowItem) => any;
});
export type ColumnType = 'age' | 'name' | 'namespace' | 'type' | 'kind' | 'cluster';
export interface ResourceTableProps<RowItem> {
/** The columns to be rendered, like used in Table, or by name. */
columns: (ResourceTableColumn<RowItem> | ColumnType)[];
/** Show or hide row actions @default false*/
enableRowActions?: boolean;
/** Show or hide row selections and actions @default false*/
enableRowSelection?: boolean;
actions?: null | RowAction[];
/** Provide a list of columns that won't be shown and cannot be turned on */
hideColumns?: string[] | null;
/** ID for the table. Will be used by plugins to identify this table.
* Official tables in Headlamp will have the 'headlamp-' prefix for their IDs which is followed by the resource's plural name or the section in Headlamp the table is in.
* Plugins should use their own prefix when creating tables, to avoid any clashes.
*/
id?: string;
/** Deny plugins to process this table's columns. */
noProcessing?: boolean;
/** The callback for when the columns chooser is closed. */
onColumnChooserClose?: () => void;
/** Specify initial sorting of the table, provide id of the column you want the table to be sorted by and direction */
defaultSortingColumn?: {
id: string;
desc: boolean;
};
/** Apply a global search filter by default. Table will use all columns to search */
defaultGlobalFilter?: string;
/** Rows data */
data: Array<RowItem> | null;
/** Filter out rows from the table */
filterFunction?: (item: RowItem) => boolean;
/** Display an error message. Table will be hidden even if data is present */
errorMessage?: string | null;
/** Display an errors */
errors?: ApiError[] | null;
/** State of the Table (page, rows per page) is reflected in the url */
reflectInURL?: string | boolean;
}
export interface ResourceTableFromResourceClassProps<KubeClass extends KubeObjectClass> extends Omit<ResourceTableProps<InstanceType<KubeClass>>, 'data'> {
resourceClass: KubeClass;
}
export default function ResourceTable<KubeClass extends KubeObjectClass>(props: ResourceTableFromResourceClassProps<KubeClass> | ResourceTableProps<InstanceType<KubeClass>>): import("react/jsx-runtime").JSX.Element;
/**
* Returns a throttled version of the input value.
*
* @param value - The value to be throttled.
* @param interval - The interval in milliseconds to throttle the value.
* @returns The throttled value.
*/
export declare function useThrottle(value: any, interval?: number): any;