Update Table.tsx

lib/Table.d.ts

@@ -7,6 +7,7 @@ export interface ZebraProps {
 export interface TableProps extends ZebraProps {
     data?: any[];
     isNested?: boolean;
+    children?: React.ReactNode;
 }
 export declare class Table extends React.PureComponent<TableProps> {
     render(): JSX.Element;

lib/TableBody.d.ts

@@ -4,6 +4,7 @@ import { ZebraProps } from "./Table";
 export interface TableBodyProps extends TableRowProps, Pick<ZebraProps, "zebra"> {
     data?: any[];
     renderTopBorder?: boolean;
+    children?: React.ReactNode;
 }
 export declare class TableBody extends React.PureComponent<TableBodyProps> {
     render(): JSX.Element[];

lib/TableCell.d.ts

@@ -12,6 +12,7 @@ export interface TableCellProps extends TableBorder {
     textAlign?: "left" | "center" | "right";
     isHeader?: boolean;
     fontSize?: number | string;
+    children?: React.ReactNode
 }
 export declare class TableCell extends React.PureComponent<TableCellProps> {
     render(): JSX.Element;

lib/TableRow.d.ts

@@ -9,6 +9,7 @@ export interface TableRowProps extends TableBorder {
     even?: boolean;
     evenRowColor?: string;
     oddRowColor?: string;
+    children?: React.ReactNode
 }
 export declare class TableRow extends React.PureComponent<Partial<TableBodyProps>> {
     render(): JSX.Element;

package.json

@@ -5,7 +5,7 @@
   "main": "./lib/index.js",
   "scripts": {
     "generate-barrels": "barrelsby -d src --delete -e TableRow.tsx",
-    "build": "rm -rf ./lib/* && npm run generate-barrels && tsc && npm run build-storybook && npm run build-doco",
+    "build": "rm -rf ./lib/* && npm run generate-barrels && tsc",
     "recompile": "tsc",
     "prepublish": "npm run build",
     "storybook": "start-storybook -p 6006",
@@ -15,12 +15,12 @@
   "author": "David Kucsai",
   "license": "MIT",
   "peerDependencies": {
-    "@react-pdf/renderer": "^1.6.8",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "@react-pdf/renderer": "^3.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@react-pdf/renderer": "^1.6.8",
+    "@react-pdf/renderer": "^3.3.1",
     "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-knobs": "^5.3.7",
@@ -48,9 +48,9 @@
     "html-webpack-plugin": "^3.2.0",
     "jsdom": "^15.1.1",
     "mini-css-extract-plugin": "^0.7.0",
-    "react": "^16.8.6",
+    "react": "^18.2.0",
     "@storybook-addons/react-docgen-typescript-loader": "^3.8.0",
-    "react-dom": "^16.8.6",
+    "react-dom": "^18.2.0",
     "regenerator-runtime": "^0.13.2",
     "sinon": "^7.3.2",
     "storybook": "^6.4.19",

src/Table.tsx

@@ -34,6 +34,8 @@ export interface TableProps extends ZebraProps {
      * Otherwise assumed to be false.
      */
     isNested?: boolean;
+
+    children?: React.ReactNode
 }
 
 export class Table extends React.PureComponent<TableProps> {

src/TableBody.tsx

@@ -13,7 +13,9 @@ export interface TableBodyProps extends TableRowProps, Pick<ZebraProps, "zebra">
      * Allows control of the very top border of the TableBody to be toggled on and off
      * if there is no header.
      */
-    renderTopBorder?: boolean
+    renderTopBorder?: boolean;
+
+    children?: React.ReactNode;
 }
 
 /**

src/TableCell.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import ReactPDF, {Text, View} from "@react-pdf/renderer";
 import {getDefaultBorderIncludes, transformToArray} from "./Utils";
+import { Style } from '@react-pdf/types';
 
 /**
  * Whether to include borders or not.
@@ -38,7 +39,7 @@ export interface TableCellProps extends TableBorder {
     /**
      * Extra styling to apply. These will override existing style with the same key.
      */
-    style?: ReactPDF.Style | ReactPDF.Style[];
+    style?: Style | Style[];
 
     /**
      * How to align the text
@@ -54,6 +55,8 @@ export interface TableCellProps extends TableBorder {
      * The font-size to apply to the cell.
      */
     fontSize?: number | string;
+
+    children?: React.ReactNode;
 }
 
 /**
@@ -76,7 +79,7 @@ export class TableCell extends React.PureComponent<TableCellProps> {
         }
 
         const {includeRightBorder} = getDefaultBorderIncludes(this.props);
-        const defaultStyle: ReactPDF.Style = {
+        const defaultStyle: Style = {
             flex: this.props.weighting ?? 1,
             // @ts-ignore
             justifyContent: "stretch",
@@ -87,7 +90,7 @@ export class TableCell extends React.PureComponent<TableCellProps> {
             whiteSpace: "pre-wrap"
         };
 
-        const mergedStyles: ReactPDF.Style[] = [
+        const mergedStyles: Style[] = [
             defaultStyle,
             ...transformToArray(this.props.style)
         ];

src/TableRow.tsx

@@ -40,6 +40,8 @@ export interface TableRowProps extends TableBorder {
      * Specify the color of odd rows
      */
     oddRowColor?: string;
+
+    children?: React.ReactNode;
 }
 
 /**