react-data-matrix 0.3.7 → 0.4.1

package/README.md

@@ -1,6 +1,6 @@
-# React Matrix   [![npm version](https://badge.fury.io/js/react-data-matrix.svg)](https://badge.fury.io/js/react-data-matrix)
+# React Matrix
 
-[React Matrix Demo](https://bronz3beard.github.io/react-matrix)
+[React Matrix Demo](https://bronz3beard.github.io/react-matrix/)
 
 React Matrix table shows relationships between two or more variables in a data set in grid format.
 
@@ -12,8 +12,8 @@ The most common usage for a table like React Matrix, is to display the **likelih
 
 # Usage
 
-```ts
-import { ReactMatrix } from "react-data-matrix";
+```tsx
+import ReactMatrix from "react-data-matrix";
 
 const App: FC = () => {
   ...
@@ -65,60 +65,50 @@ const App: FC = () => {
   or an example of how to construct/deconstruct your data objects from your api.
 
 ```ts
-  const data = {
-    id: 1,
-    matrix_size: 5,
-    matrix_name: "React Matrix",
-    matrix_description: "Risk Matrix Template",
-    matrix_details: [
-      {
-        id: 1,
-        likelihood: "LIKELIHOOD VALUE",
-        consequence: CONSEQUENCE VALUE,
-        header_title: "Title",
-        header_sub_title: "Sub-title/description.",
-        row_header_title: "Row Title",
-        row_header_sub_title: "Row Sub-title/description.",
-      }, {
-        id: 2,
-        ...
-      } {
-        id: 3,
-        ...
-      } {
-        id: 4,
-        ...
-      } {
-        id: 5,
-        ...
-      }
-    ],
-    matrix_values: [
-      {
-        id: 1,
-        position: 1,
-        matrix_id: 1,
-        score_value: 1,
-        colour: "green",
-        description: "low",
-        consequence_descriptor: 1,
-        likelihood_descriptor: "E",
-        response: "Business as usual",
-      }, {
-        id: 2,
-        ...
-      },
-      ...,
-      ...,
-      , {
-        id: 25,
-        ...
-      },
-    ]
-  }
+import { MatrixData } from "../types";
+
+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",
+    },
+    ...
+  ],
+};
+
 ```
 
-# Types
+# PropTypes
 
 ```ts
 export interface MatrixDetail {
@@ -159,8 +149,8 @@ export interface MatrixData {
 export interface ReactMatrixProps {
   data: MatrixData;
   hasTableBorder?: boolean;
-  hasInlineStyles?: boolean;
-  hasContainerStyles?: boolean;
+  hasInlineStyles?: boolean | undefined;
+  hasContainerStyles?: boolean | undefined;
   reverseMatrixValues?: boolean;
   matrixSizeSelected?: number;
   rowPrimaryUpper?: boolean;
@@ -184,6 +174,34 @@ export interface ReactMatrixProps {
   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;
@@ -204,8 +222,6 @@ export interface TableDataProps {
 
 ```ts
 defaultProps = {
-  matrixName: "",
-  matrixDescription: "",
   hasTableBorder: true,
   rowPrimaryUpper: true,
   hasInlineStyles: true,
@@ -345,6 +361,4 @@ if you make `hasInlineStyles = false`, then add these values with your own style
 
 ---
 
-# Create React App
-
-- This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+# React + TypeScript + Vite

package/dist/{components → lib/components}/MatrixHeaders.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
-import { MatrixHeaderProps } from "../types";
+import { FC } from 'react';
+import { MatrixHeaderProps } from '../types';
 declare const MatrixHeaders: FC<MatrixHeaderProps>;
 export default MatrixHeaders;

package/dist/{components → lib/components}/MatrixRows.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
-import { MatrixRowsProps } from "../types";
+import { FC } from 'react';
+import { MatrixRowsProps } from '../types';
 declare const MatrixRows: FC<MatrixRowsProps>;
 export default MatrixRows;

package/dist/{components → lib/components}/TableData.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
-import { TableDataProps } from "../types";
+import { FC } from 'react';
+import { TableDataProps } from '../types';
 declare const TableData: FC<TableDataProps>;
 export default TableData;

package/dist/{components/ReactMatrix.d.ts → lib/index.d.ts}

@@ -1,4 +1,4 @@
-import { FC } from "react";
-import { ReactMatrixProps } from "../types";
+import { FC } from 'react';
+import { ReactMatrixProps } from './types';
 declare const ReactMatrix: FC<ReactMatrixProps>;
 export default ReactMatrix;

package/dist/{types → lib/types}/index.d.ts

@@ -33,8 +33,6 @@ export interface MatrixData {
 }
 export interface ReactMatrixProps {
     data: MatrixData;
-    matrixName: string;
-    matrixDescription: string;
     hasTableBorder?: boolean;
     hasInlineStyles?: boolean | undefined;
     hasContainerStyles?: boolean | undefined;

package/dist/{utils → lib/utils}/data.d.ts

@@ -1,2 +1,2 @@
-import { MatrixData } from "../types";
+import { MatrixData } from '../types';
 export declare const data: MatrixData;

package/dist/lib/utils/functions.d.ts

@@ -0,0 +1,4 @@
+export declare const groupObjectsByProp: <T>(array: T[], prop: keyof T) => T[][];
+export declare const capitaliseFirstCharacter: (stringValue: string) => string;
+export declare const capitaliseString: (stringValue: string) => string;
+export declare const callAll: <T extends (...args: never[]) => void>(...fns: T[]) => (...args: Parameters<T>) => void;

package/dist/manifest.json

@@ -0,0 +1,7 @@
+{
+  "lib/index.tsx": {
+    "file": "react-data-matrix.umd.js",
+    "isEntry": true,
+    "src": "lib/index.tsx"
+  }
+}