man

Author: spencergray96

package.json

@@ -1,6 +1,6 @@
 {
   "name": "frame-one-table",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "A react table with maximum flexibility.",
   "main": "build/index.js",
   "module": "build/index.es.js",

src/TableGenerator.stories.tsx

@@ -102,11 +102,11 @@ Primary.args = {
 			valueFormatter: stringToCaps,
 		},
 		{
-			key: "nestedData",
+			key: undefined,
 			headerValue: "Nested Test",
 			// sortable: true,
-			cellRender: (nestedData: {test: number}, data: CellContextDetails) => {
-				return nestedData.test;
+			cellRender: (row: any) => {
+				return row.nestedData?.test;
 			},
 		},
 		{

src/TableGenerator.tsx

@@ -96,7 +96,7 @@ export interface ColumnOption<T = any> {
 	/**
 	 * Format function to run the values for the column's body cells through before displaying them (ie. (height) => height + "cm"). Does not modify the value used to compare for sorting the column
 	 */
-	valueFormatter?: ContextFunctionCellWithValue<T, string>;
+	valueFormatter?: ContextFunctionCellWithValue<T, any>;
 
 	/**
 	 * Custom render function for the header cell
@@ -107,7 +107,7 @@ export interface ColumnOption<T = any> {
 	 * Custom render function for the body cells of this column
 	 *
 	 */
-	cellRender?: ContextFunctionCellWithValue<T, ReactNode>;
+	cellRender?: ContextFunctionCellWithValue<T, any>;
 
 	/**
 	 * className applied to the header cell

src/TableRow.tsx

@@ -28,8 +28,10 @@ const TableRow: React.FC<ITableRowProps> = (props) => {
 
 		// Create the content to be rendered, starting with the cell value found within the data.
 		// Value is .toString()'d so numbers and booleans will display properly.
-		let content: any = rowData?.[column.key]; // todo better typing eventually.
-
+		let content = rowData;
+		if (column.key) {
+			content = rowData?.[column.key];
+		}
 		// Construct this object with all the details needed for the value formatter / cell render functions
 		const cellContextDetails: CellContextDetails = {
 			value: content,
@@ -57,7 +59,9 @@ const TableRow: React.FC<ITableRowProps> = (props) => {
 		}
 
 		// Generate classes for the header cell.
-		const _rowClassName: string = (typeof column.rowCellClassName === "string" || !column.rowCellClassName) ? column.rowCellClassName as string : column.rowCellClassName(content, cellContextDetails);
+		const _rowClassName: string = (typeof column.rowCellClassName === "string" || !column.rowCellClassName) ?
+			column.rowCellClassName as string :
+			column.rowCellClassName(content.toString(), cellContextDetails);
 		const cellClasses: string = classNames(rowCellClassName, _rowClassName);
 
 		return (