refactor: separated header, body to different files to make the component smaller

src/FlexibleTable/FlexibleTable.jsx

 import {__} from '@wordpress/i18n';
-import {RichText, InspectorControls, useBlockProps,} from '@wordpress/block-editor';
+import {InspectorControls, useBlockProps,} from '@wordpress/block-editor';
 import {PanelBody, ToggleControl} from '@wordpress/components';
 import {DragDropContext, Draggable, Droppable} from "react-beautiful-dnd";
 import {DuoInput, NumberWithUnit, ColorSelector, FontStyles, AlignButtons, BlockPlaceholders} from "../../index";
+import TableBody from "./TableBody";
+import TableHead from "./TableHead";
 
-export default function FlexibleTable({attributes, setAttributes, placeholders, footer, additionalOptions }) {
+export default function FlexibleTable({
+										  attributes,
+										  setAttributes,
+										  placeholders,
+										  additionalOptions,
+										  tableHeader,
+										  tableBody,
+										  tableFooter,
+									  }) {
 	const {
 		headers,
 		rows,
@@ -252,16 +262,16 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 					{multipleBodyBackground ?
 						<>
 							<ColorSelector
-						label={__('Background color (even rows)', 'flexible-invoices-core')}
-						value={bodyBackgroundEven}
-						onChange={(value) => setAttributes({bodyBackgroundEven: value})}
-					/>
-						<ColorSelector
-							label={__('Text color (even rows)', 'flexible-invoices-core')}
-							value={bodyTextColorEven}
-							enableAlpha={false}
-							onChange={(value) => setAttributes({bodyTextColorEven: value})}
-						/>
+								label={__('Background color (even rows)', 'flexible-invoices-core')}
+								value={bodyBackgroundEven}
+								onChange={(value) => setAttributes({bodyBackgroundEven: value})}
+							/>
+							<ColorSelector
+								label={__('Text color (even rows)', 'flexible-invoices-core')}
+								value={bodyTextColorEven}
+								enableAlpha={false}
+								onChange={(value) => setAttributes({bodyTextColorEven: value})}
+							/>
 						</>
 						: ''
 
@@ -340,85 +350,62 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 					borderWidth: tableBorderWidth,
 					borderCollapse: 'collapse'
 				}}>
-					<thead className={"fitb-item-table-header"} style={{
-						borderStyle: "solid",
-						borderColor: headerBorderRowColor,
-						borderTopWidth: headerBorderRowWidthTop,
-						borderBottomWidth: headerBorderRowWidthBottom,
-					}}>
-					<tr className={"fitb-item-table-header-row"} style={{
-						background: headerBackground,
-					}}>
-						{headers.map((header, index) => (
-							states[index] ?
-								<th className={"fitb-item-table-header-cell"} key={index}
-									style={{
-										borderStyle: "solid",
-										borderColor: headerBorderColumnColor,
-										borderLeftWidth: headerBorderColumnWidthLeft,
-										borderRightWidth: headerBorderColumnWidthRight,
-									}}>
-									<RichText
-										tagName="div"
-										key={index}
-										value={header}
-										style={{
-											color: headerTextColor,
-											textAlign: headerTextAlign,
-											fontStyle: headerFontStyle,
-											textDecoration: headerTextDecoration,
-											fontSize: headerFontSize,
-											fontWeight: headerFontWeight,
-										}}
-										onChange={(value) => updateHeader(index, value)}
-									/>
-								</th> : ''
-						))}
-					</tr>
-					</thead>
-					<tbody className={"fitb-item-table-body"}>
+					{tableHeader ? tableHeader :
+						<TableHead
+							headers={headers}
+							updateHeader={updateHeader}
+							tableStyles={{
+								headerBackground,
+								headerTextColor,
+								headerTextAlign,
+								headerFontStyle,
+								headerTextDecoration,
+								headerFontSize,
+								headerFontWeight,
 
-					{Array.from({length: 2}).map((_, trIndex) => (
-						<tr className={"fitb-item-table-row"} style={{
-							background: (multipleBodyBackground && trIndex === 1) ? bodyBackgroundEven : bodyBackground,
-							borderStyle: "solid",
-							borderColor: bodyBorderRowColor,
-							borderTopWidth: bodyBorderRowWidthTop,
-							borderBottomWidth: bodyBorderRowWidthBottom,
-						}}>
-							{rows.map((row, index) => (
-								states[index] ?
-									<td className={"fitb-item-table-cell"} key={index}
-										style={{
-											borderStyle: "solid",
-											borderColor: bodyBorderColumnColor,
-											borderLeftWidth: bodyBorderColumnWidthLeft,
-											borderRightWidth: bodyBorderColumnWidthRight,
-										}}>
-										<RichText
-											tagName="div"
-											key={index}
-											value={row}
-											style={{
-												color: (multipleBodyBackground && trIndex === 1) ? bodyTextColorEven : bodyTextColor,
-												textAlign: bodyTextAlign,
-												fontStyle: bodyFontStyle,
-												fontSize: bodyFontSize,
-												textDecoration: bodyTextDecoration,
-												fontWeight: bodyFontWeight,
-											}}
-											onChange={(value) =>
-												updateCell(index, value)
-											}
-										/>
-									</td> : ''
-							))}
-						</tr>
-					))}
-					</tbody>
-					{footer &&
+								headerBorderColumnColor,
+								headerBorderColumnWidthLeft,
+								headerBorderColumnWidthRight,
+								headerBorderRowColor,
+								headerBorderRowWidthTop,
+								headerBorderRowWidthBottom
+							}}
+							states={states}
+						/>
+					}
+					{
+						tableBody ? tableBody :
+							<TableBody
+								rows={rows}
+								states={states}
+								updateCell={updateCell}
+								tableStyles={
+									{
+										bodyBackground,
+										bodyBackgroundEven,
+										bodyTextColor,
+										bodyTextColorEven,
+										bodyTextDecoration,
+										bodyTextAlign,
+										bodyFontStyle,
+										bodyFontSize,
+										bodyFontWeight,
+
+										bodyBorderColumnColor,
+										bodyBorderColumnWidthLeft,
+										bodyBorderColumnWidthRight,
+										bodyBorderRowColor,
+										bodyBorderRowWidthTop,
+										bodyBorderRowWidthBottom,
+
+										multipleBodyBackground
+									}
+								}
+							/>
+					}
+					{tableFooter &&
 						<tfoot>
-						{footer}
+						{tableFooter}
 						</tfoot>
 					}
 				</table>

src/FlexibleTable/TableBody.jsx

+import {RichText} from "@wordpress/block-editor";
+
+
+export default function TableBody({tableStyles, updateCell, rows, states}) {
+
+	const {
+		bodyBackground,
+		bodyBackgroundEven,
+		bodyTextColor,
+		bodyTextColorEven,
+		bodyTextDecoration,
+		bodyTextAlign,
+		bodyFontStyle,
+		bodyFontSize,
+		bodyFontWeight,
+
+		bodyBorderColumnColor,
+		bodyBorderColumnWidthLeft,
+		bodyBorderColumnWidthRight,
+		bodyBorderRowColor,
+		bodyBorderRowWidthTop,
+		bodyBorderRowWidthBottom,
+
+		multipleBodyBackground
+	} = tableStyles;
+
+	return (
+		<tbody className={"fitb-item-table-body"}>
+
+		{Array.from({length: 2}).map((_, trIndex) => (
+			<tr className={"fitb-item-table-row"} style={{
+				background: (multipleBodyBackground && trIndex === 1) ? bodyBackgroundEven : bodyBackground,
+				borderStyle: "solid",
+				borderColor: bodyBorderRowColor,
+				borderTopWidth: bodyBorderRowWidthTop,
+				borderBottomWidth: bodyBorderRowWidthBottom,
+			}}>
+				{rows.map((row, index) => (
+					states[index] ?
+						<td className={"fitb-item-table-cell"} key={index}
+							style={{
+								borderStyle: "solid",
+								borderColor: bodyBorderColumnColor,
+								borderLeftWidth: bodyBorderColumnWidthLeft,
+								borderRightWidth: bodyBorderColumnWidthRight,
+							}}>
+							<RichText
+								tagName="div"
+								key={index}
+								value={row}
+								style={{
+									color: (multipleBodyBackground && trIndex === 1) ? bodyTextColorEven : bodyTextColor,
+									textAlign: bodyTextAlign,
+									fontStyle: bodyFontStyle,
+									fontSize: bodyFontSize,
+									textDecoration: bodyTextDecoration,
+									fontWeight: bodyFontWeight,
+								}}
+								onChange={(value) =>
+									updateCell(index, value)
+								}
+							/>
+						</td> : ''
+				))}
+			</tr>
+		))}
+		</tbody>
+	);
+}

src/FlexibleTable/TableHead.jsx

+import {RichText} from "@wordpress/block-editor";
+
+export default function TableHead( {headers, updateHeader, tableStyles, states} ) {
+	const {
+		headerBackground,
+		headerTextColor,
+		headerTextAlign,
+		headerFontStyle,
+		headerTextDecoration,
+		headerFontSize,
+		headerFontWeight,
+
+		headerBorderColumnColor,
+		headerBorderColumnWidthLeft,
+		headerBorderColumnWidthRight,
+		headerBorderRowColor,
+		headerBorderRowWidthTop,
+		headerBorderRowWidthBottom,
+	} = tableStyles;
+
+	return (
+		<thead className={"fitb-item-table-header"} style={{
+			borderStyle: "solid",
+			borderColor: headerBorderRowColor,
+			borderTopWidth: headerBorderRowWidthTop,
+			borderBottomWidth: headerBorderRowWidthBottom,
+		}}>
+		<tr className={"fitb-item-table-header-row"} style={{
+			background: headerBackground,
+		}}>
+			{headers.map((header, index) => (
+				states[index] ?
+					<th className={"fitb-item-table-header-cell"} key={index}
+						style={{
+							borderStyle: "solid",
+							borderColor: headerBorderColumnColor,
+							borderLeftWidth: headerBorderColumnWidthLeft,
+							borderRightWidth: headerBorderColumnWidthRight,
+						}}>
+						<RichText
+							tagName="div"
+							key={index}
+							value={header}
+							style={{
+								color: headerTextColor,
+								textAlign: headerTextAlign,
+								fontStyle: headerFontStyle,
+								textDecoration: headerTextDecoration,
+								fontSize: headerFontSize,
+								fontWeight: headerFontWeight,
+							}}
+							onChange={(value) => updateHeader(index, value)}
+						/>
+					</th> : ''
+			))}
+		</tr>
+		</thead>);
+}