@kinvolk/headlamp-plugin
Version:
The needed infrastructure for building Headlamp plugins.
72 lines (71 loc) • 2.55 kB
TypeScript
import { MRT_ColumnDef as MaterialTableColumn, MRT_TableInstance, MRT_TableOptions as MaterialTableOptions } from 'material-react-table';
import { ReactNode } from 'react';
/**
* Column definition
* We reuse the Material React Table column definition
* Additional gridTemplate property is added because we have our own layout
* based on the CSS grid
*
* @see https://www.material-react-table.com/docs/api/column-options
*/
export type TableColumn<RowItem extends Record<string, any>, Value = any> = MaterialTableColumn<RowItem, Value> & {
/**
* Column width in the grid template format
* Number values will be converted to "fr"
* @example
* 1
* "1.5fr"
* "min-content"
*/
gridTemplate?: string | number;
};
/**
* All the options provided by the MRT and some of our custom behaviour
*
* @see https://www.material-react-table.com/docs/api/table-options
*/
export type TableProps<RowItem extends Record<string, any>> = Omit<MaterialTableOptions<RowItem>, 'columns'> & {
columns: TableColumn<RowItem>[];
/**
* Message to show when the table is empty
*/
emptyMessage?: ReactNode;
/**
* Error message to show instead of the table
*/
errorMessage?: ReactNode;
/** Whether to reflect the page/perPage properties in the URL.
* If assigned to a string, it will be the prefix for the page/perPage parameters.
* If true or '', it'll reflect the parameters without a prefix.
* By default, no parameters are reflected in the URL. */
reflectInURL?: string | boolean;
/**
* Initial page to show in the table
* Important: page is 1-indexed!
* @default 1
*/
initialPage?: number;
/**
* List of options for the rows per page selector
* @example [15, 25, 50]
*/
rowsPerPage?: number[];
/**
* Function to filter the rows
* Works in addition to the default table filtering and searching
*/
filterFunction?: (item: RowItem) => boolean;
/**
* Whether to show a loading spinner
*/
loading?: boolean;
renderRowSelectionToolbar?: (props: {
table: MRT_TableInstance<RowItem>;
}) => ReactNode;
};
/**
* Table component based on the Material React Table
*
* @see https://www.material-react-table.com/docs
*/
export default function Table<RowItem extends Record<string, any>>({ emptyMessage, reflectInURL, initialPage, rowsPerPage, filterFunction, errorMessage, loading, ...tableProps }: TableProps<RowItem>): import("react/jsx-runtime").JSX.Element;