React Matrix
React Matrix table shows relationships between two or more variables in a data set in grid format.
The most common usage for a table like React Matrix, is to display the likelihood and consequence "scores" of risks/hazards, this can be for anything from Corporate, Work Health Safety and Environment risks, and more.
PR's
- Have a look at the PR template doc for best approach to getting your pr merged.
Usage
import ReactMatrix from "react-data-matrix";
const App: FC = () => {
...
return (
<ReactMatrix
{...{
matrixName: "",
matrixDescription: "",
hasTableBorder: true,
rowPrimaryUpper: true,
hasInlineStyles: true,
matrixSizeSelected: 5,
headerPrimaryUpper: true,
hasContainerStyles: true,
reverseMatrixValues: true,
tableContainerStyles: {},
tableStyles: {},
thRowStyles: {},
thTitleStyles: {},
thSubTitleStyles: {},
thPrimaryTitleStyles: {},
trRowStyles: {},
trTitleStyles: {},
trSubTitleStyles: {},
trPrimaryTitleStyles: {},
tdStyles: {},
customHeaderRowIdValue: "",
customRowDynamicIdValue: "",
customTableDataDynamicIdValue: "",
customRowHeaderDynamicIdValue: "",
customDynamicHeaderTitleIdValue: "",
customDynamicSubHeaderTitleIdValue: "",
data,
}}
/>
)
}
Expected Data Structure
- See
./src/lib/utils/data.ts
for an example of the data, this can be used for testing if needed, or an example of how to construct/deconstruct your data objects from your api.
import { MatrixData } from "react-data-matrix";
export const data: MatrixData = {
id: 1,
matrix_size: 5,
matrix_name: "React Matrix",
primary_header_title: "Consequence",
primary_row_header_title: "Likelihood",
matrix_description: "Risk Matrix Template",
matrix_details: [
{
id: 1,
likelihood: "E",
consequence: 1,
position: 5,
matrix_type: "Risk",
header_title: "Minor",
header_sub_title: "Header sub-title/description.",
row_header_title: "Rare",
row_header_sub_title: "Row Header sub-title/description.",
},
...
],
matrix_values: [
{
id: 26,
matrix_id: 1,
description: "low",
score_value: 1,
colour: "green",
position: 1,
likelihood_descriptor: "E",
consequence_descriptor: 1,
response: "Business as usual",
},
...
],
};
PropTypes
export interface MatrixDetail {
id: number;
position: number;
matrix_type: string;
likelihood: string;
consequence: number;
header_title: string;
header_sub_title: string;
row_header_title: string;
row_header_sub_title: string;
}
export interface MatrixValue {
id: number;
matrix_id: number;
description: string;
score_value: number;
colour: string;
position: number;
likelihood_descriptor: string;
consequence_descriptor: number;
response: string;
}
export interface MatrixData {
id: number;
matrix_size: number;
matrix_name: string;
primary_header_title: string;
primary_row_header_title: string;
matrix_description: string;
matrix_details: MatrixDetail[];
matrix_values: MatrixValue[];
}
export interface ReactMatrixProps {
data: MatrixData;
hasTableBorder?: boolean;
hasInlineStyles?: boolean | undefined;
hasContainerStyles?: boolean | undefined;
reverseMatrixValues?: boolean;
matrixSizeSelected?: number;
rowPrimaryUpper?: boolean;
headerPrimaryUpper?: boolean;
tableContainerStyles?: React.CSSProperties;
tableStyles?: React.CSSProperties;
thRowStyles?: React.CSSProperties;
thTitleStyles?: React.CSSProperties;
thSubTitleStyles?: React.CSSProperties;
thPrimaryTitleStyles?: React.CSSProperties;
trRowStyles?: React.CSSProperties;
trTitleStyles?: React.CSSProperties;
trSubTitleStyles?: React.CSSProperties;
trPrimaryTitleStyles?: React.CSSProperties;
tdStyles?: React.CSSProperties;
customHeaderRowIdValue?: string;
customDynamicHeaderTitleIdValue?: string;
customDynamicSubHeaderTitleIdValue?: string;
customRowDynamicIdValue?: string;
customRowHeaderDynamicIdValue?: string;
customTableDataDynamicIdValue?: string;
}
export interface MatrixHeaderProps {
data: MatrixData;
hasInlineStyles?: boolean | undefined;
headerPrimaryUpper?: boolean;
thRowStyles?: React.CSSProperties;
thTitleStyles?: React.CSSProperties;
thSubTitleStyles?: React.CSSProperties;
thPrimaryTitleStyles?: React.CSSProperties;
customHeaderRowIdValue?: string;
customDynamicHeaderTitleIdValue?: string;
customDynamicSubHeaderTitleIdValue?: string;
}
export interface MatrixRowsProps {
data: MatrixData;
rowPrimaryUpper?: boolean;
hasInlineStyles?: boolean | undefined;
reverseMatrixValues?: boolean;
trRowStyles?: React.CSSProperties;
trTitleStyles?: React.CSSProperties;
trSubTitleStyles?: React.CSSProperties;
trPrimaryTitleStyles?: React.CSSProperties;
tdStyles?: React.CSSProperties;
customRowDynamicIdValue?: string;
customRowHeaderDynamicIdValue?: string;
customTableDataDynamicIdValue?: string;
}
export interface TableDataProps {
data: {
id: number;
colour: string;
position: number;
matrix_id: number;
score_value: number;
description: string;
response: string;
likelihood_descriptor: string;
consequence_descriptor: number;
};
tdStyles?: React.CSSProperties;
hasInlineStyles?: boolean;
customTableDataDynamicIdValue?: string;
}
defaultProps = {
hasTableBorder: true,
rowPrimaryUpper: true,
hasInlineStyles: true,
matrixSizeSelected: 5,
headerPrimaryUpper: true,
hasContainerStyles: true,
reverseMatrixValues: true,
tableContainerStyles: {},
tableStyles: {},
thRowStyles: {},
thTitleStyles: {},
thSubTitleStyles: {},
thPrimaryTitleStyles: {},
trRowStyles: {},
trTitleStyles: {},
trSubTitleStyles: {},
trPrimaryTitleStyles: {},
tdStyles: {},
customHeaderRowIdValue: "",
customRowDynamicIdValue: "",
customTableDataDynamicIdValue: "",
customRowHeaderDynamicIdValue: "",
customDynamicHeaderTitleIdValue: "",
customDynamicSubHeaderTitleIdValue: "",
};
Available Properties
-
hasInlineStyles
- Default is true.
- If false all inline styles are removed.
-
hasTableBorder
- Default is true.
- If false the most outer border is removed.
-
hasContainerStyles
- Default is true.
- This will center the matrix in the middle of the page.
-
reverseMatrixValues
- Default is true.
- When true the lowest value will be in the bottom left and the highest value will be in the top right, with all sequential values in-between.
- When false the values will be reversed, lowest value top left highest value bottom right.
-
rowPrimaryUpper
- Default is true.
- If false string formatting will be removed.
-
headerPrimaryUpper
- Default is true.
- If false string formatting will be removed.
-
customHeaderRowIdValue
- Default is empty string.
- can be used to target element through id prop.
-
customDynamicHeaderTitleIdValue
- Default is empty string.
- can be used to target element through id prop.
-
customDynamicSubHeaderTitleIdValue
- Default is empty string.
- can be used to target element through id prop.
-
customRowDynamicIdValue
- Default is empty string.
- can be used to target element through id prop.
-
customRowHeaderDynamicIdValue
- Default is empty string.
- can be used to target element through id prop.
-
customTableDataDynamicIdValue
- Default is empty string.
- can be used to target element through id prop.
Styling Properties
Inline
These styles can be added to the current styles or,
if you make hasInlineStyles = false
, then add these values with your own styles, you can have full control over styling inline.
ReactMatrix
- tableContainerStyles={{}}
- tableStyles={{}}
MatrixHeaders
- thRowStyles={{}}
- thTitleStyles={{}}
- thSubTitleStyles={{}}
- thPrimaryTitleStyles={{}}
MatrixRows
- trRowStyles={{}},
- trTitleStyles={{}},
- trSubTitleStyles={{}},
- trPrimaryTitleStyles={{}},
TableData
- tdStyles={{}},