Skip to main content

MatrixFabric component

Component for rendering a matrix with rows and columns.

📝 Signature​

MatrixFabric(props: {
styles: {
backgroundColor: string;
borderColor: string;
borderSize?: number;
textColor: string;
errorColor: string;
scale?: number;
hideRequiredIndicator?: boolean;
};
columns: IMatrixColumn[];
rows: IMatrixRow[];
required?: boolean;
disabled?: boolean;
readOnly?: boolean;
allowUnselect?: boolean;
tabIndex?: number;
ariaDescribedBy?: string;
onFocus?: (e: FocusEvent) => void;
onBlur?: (e: FocusEvent) => void;
onAutoFocus?: (el: HTMLInputElement | null) => void;
onSubmit?: () => void;
onCancel?: () => void;
}): JSX.Element

📇 Props​

NameTypeOptionalDescription
stylesobjectNoSpecifies the styles for the matrix control. Supports the following styles:
- backgroundColor: Background color for the input control;
- borderColor: Border color for the input control;
- borderSize: Optional border size in pixels for the input control;
- textColor: Text color for the input control;
- errorColor: Optional error color for the input control;
- scale: Optional scale factor for the input control (defaults to 1);
- hideRequiredIndicator: Specifies if the indicator (asterisk) for a required row is hidden.
columnsIMatrixColumn[]NoSpecifies the columns for the matrix (see IMatrixColumn).
rowsIMatrixRow[]NoSpecifies the rows for the matrix (see IMatrixRow).
requiredbooleanYesSpecifies if the component is required.
disabledbooleanYesSpecifies if the component is disabled.
readOnlybooleanYesSpecifies if the component is read-only.
allowUnselectbooleanYesSpecifies if unselecting is allowed for the component.
tabIndexnumberYesSpecifies the tabindex for the component.
ariaDescribedBystringYesSpecifies the aria-describedby identifier of the element that describes the component.
onFocus(e: FocusEvent) => voidYesInvoked when the component gets focus.
onBlur(e: FocusEvent) => voidYesInvoked when the component loses focus.
onAutoFocus(el: HTMLInputElement | null) => voidYesInvoked when the HTML element of the component is available for auto-focus.
onSubmit() => voidYesInvoked when the user presses the Shift + Enter key combination or the Tab key (this event is often used to go to the next input control in a form).
onCancel() => voidYesInvoked when the user presses the Shift + Tab key combination (this event is often used to go to the previous input control in a form).

↩ī¸ Return value​

Returns the JSX.Element for the component.

👩‍đŸ’ģ Example​

import { MatrixFabric } from "tripetto-runner-fabric/components/matrix";

const MatrixFabricExample = () => (
<MatrixFabric
styles={{
backgroundColor: "white",
borderColor: "black",
textColor: "black",
errorColor: "red"
}}
columns={[
{
id: "1",
label: "Column 1"
},
{
id: "2",
label: "Column 2"
}
]}
rows={[
{
id: "1",
label: "Row 1",
onChange: (id) => console.log(`Row 1 selected: ${id}`)
},
{
id: "2",
label: "Row 2",
onChange: (id) => console.log(`Row 2 selected: ${id}`)
}
]}
/>
);

⛓ī¸ Interfaces​


🔗 IMatrixColumn​

Describes the interface for a matrix column.

Type declaration​

interface IMatrixColumn {
/* Identifier for the column. */
id: string;

/* Name for the column. */
name: string;

/* Label for the column. */
label?: string | JSX.Element;

/* Value for the column. */
value?: string;
}

🔗 IMatrixRow​

Describes the interface for a matrix row.

Type declaration​

interface IMatrixRow {
/* Identifier for the row. */
id: string;

/* Label for the row. */
label?: string | JSX.Element;

/* Alias for the row. */
alias?: string;

/* Explanation for the row. */
explanation?: string | JSX.Element;

/* Specifies if the row is required. */
required?: boolean;

/* Tabindex for the row. */
tabIndex?: number;

/* Value for the row. */
value?: string | Value;

/* Specifies the onChange function for the row. */
onChange?: (id: string) => void;
}