@kwiz/fluentui
Version:
KWIZ common controls for FluentUI
70 lines (69 loc) • 3.61 kB
TypeScript
import { IDictionary, primitiveTypes } from "@kwiz/common";
import { ReactNode } from "react";
import { iMenuItemEX } from "./menu";
type expandedColType = {
/** key used for getting the column value, and for sorting/filtering */
key: string;
renderer?: string | (() => ReactNode);
headerCss?: string[];
css?: string[];
nowrap?: boolean;
sortable?: boolean;
/** should match the type of primitiveValue or tableItemValueType */
filter?: "string" | "bool" | "number" | "date";
primary?: boolean;
};
type colType = string | expandedColType;
export type tableItemExpandedValueType = {
/** pass in any object you can access in your actions */
raw?: object;
/** if your renderer does not return a simple string, use this to provide a sort/filter value */
primitiveValue?: primitiveTypes;
renderer?: string | (() => ReactNode);
media?: JSX.Element;
description?: string;
};
export type tableItemValueType = primitiveTypes | tableItemExpandedValueType;
type itemTypeBase = IDictionary<tableItemValueType>;
interface iPropsBaseNoSelect {
selectionMode?: never;
getItemKey?: never;
selection?: never;
onSelect?: never;
}
interface iPropsSelect<ItemType extends itemTypeBase, ItemKeyType extends string | number> {
selectionMode: "single" | "multiselect";
/** used to identify the selected row */
getItemKey: (item: ItemType) => ItemKeyType;
selection: ItemKeyType[];
onSelect: (selection: ItemKeyType[]) => void;
}
interface iPropsBase<ItemType extends itemTypeBase, FolderType extends IDictionary<tableItemValueType>> {
columns: colType[];
/** item is a dictionary. Values are primitives, or tableItemExpandedValueType */
items: ItemType[];
/** folders are similar to items but do not sort, always show on top, and hidden when there is a filter */
folders?: FolderType[];
css?: string[];
rowCss?: string[];
getItemMenu?: (item: ItemType, index: number) => iMenuItemEX[];
getFolderMenu?: (folder: FolderType, index: number) => iMenuItemEX[];
emptyLabel?: string;
noDefaultSort?: boolean;
}
interface iPropsUnfreezed<ItemType extends itemTypeBase, ItemKeyType extends string | number, FolderType extends IDictionary<tableItemValueType>> extends iPropsBase<ItemType, FolderType> {
maxHeight: never;
}
interface iPropsFreezed<ItemType extends itemTypeBase, ItemKeyType extends string | number, FolderType extends IDictionary<tableItemValueType>> extends iPropsBase<ItemType, FolderType> {
stickyTop?: true;
stickyLeft?: true | 1 | 2;
/** default: small - keep 40px of first cell visible. medium=80px cover=none */
stickyLeftGap?: "small" | "medium" | "cover";
/** if you want to have sticky header, with internal scroll - you must pass a max-height, for example:
* 100% or calc(100vh - 16px)
*/
maxHeight?: string;
}
type iProps<ItemType extends itemTypeBase, ItemKeyType extends string | number, FolderType extends IDictionary<tableItemValueType>> = iPropsUnfreezed<ItemType, ItemKeyType, FolderType> & iPropsSelect<ItemType, ItemKeyType> | iPropsFreezed<ItemType, ItemKeyType, FolderType> & iPropsSelect<ItemType, ItemKeyType> | iPropsUnfreezed<ItemType, ItemKeyType, FolderType> & iPropsBaseNoSelect | iPropsFreezed<ItemType, ItemKeyType, FolderType> & iPropsBaseNoSelect;
export declare function TableEX<ItemType extends itemTypeBase, ItemKeyType extends string | number, FolderType extends IDictionary<tableItemValueType> = {}>(props: iProps<ItemType, ItemKeyType, FolderType>): import("react/jsx-runtime").JSX.Element;
export {};