finform-react-builder
Version:
A powerful, flexible React form builder with dynamic field rendering, custom validation, multi-step forms, Material-UI integration, image component support, toggle/radio buttons, switches, autocomplete, and advanced button positioning
74 lines (73 loc) • 2.17 kB
TypeScript
import { default as React } from 'react';
export type GridColumn = {
key: string;
header: string;
type?: "text" | "number" | "select" | "checkbox" | "date" | "index" | "rowSelect";
width?: number | string | "auto";
options?: {
label: string;
value: any;
}[];
placeholder?: string;
disabled?: boolean | ((row: any, index: number) => boolean);
value?: any | ((row: any, index: number) => any);
editable?: boolean;
indexFormat?: (index: number) => string;
helperText?: string;
required?: boolean;
minLength?: number;
maxLength?: number;
pattern?: string;
min?: number;
max?: number;
step?: number;
endorsementText?: string | ((row: any, index: number) => string);
endorsementBg?: string;
endorsementColor?: string;
endorsementRadius?: number | string;
endorsementHeight?: number;
endorsementPaddingX?: number;
apiConfig?: {
endpoint: string;
method?: "GET" | "POST" | "PUT" | "DELETE";
valueField?: string;
labelField?: string;
headers?: Record<string, string>;
params?: Record<string, any>;
body?: any;
transform?: (data: any[]) => Array<{
label: string;
value: string | number;
}>;
dependsOn?: string;
conditional?: boolean;
passThroughFields?: string[];
};
sx?: any;
cellSx?: any;
};
export interface FinEditableGridProps {
name: string;
columns: GridColumn[];
initialRow: Record<string, any>;
addLabel?: string;
maxRows?: number;
hideAddWhenMax?: boolean;
disableAddWhenMax?: boolean;
showEmptyState?: boolean;
rowDeletable?: boolean;
control: any;
sx?: any;
addActions?: {
label: string;
template: Record<string, any>;
}[];
emptyTitle?: string;
emptySubtitle?: string;
emptyCardSx?: any;
setValue?: (name: string, value: any, options?: any) => void;
rowSelectionMode?: "single" | "multi";
rowSelectionKey?: string;
}
export declare const FinEditableGrid: React.FC<FinEditableGridProps>;
export default FinEditableGrid;