Fix table head render

packages/components/src/Table/components/Table.tsx

@@ -1,9 +1,6 @@
 import React, { FC, useMemo } from 'react';
-import { keys, map } from 'ramda';
 import clsx from 'clsx';
 
-import { isNilOrEmpty } from '@procyon/utils';
-
 import type { TableRow as TableRowType } from '../types';
 import { TableCol } from '../types';
 import { TableCell } from './TableCell';
@@ -18,46 +15,30 @@ export type TableProps = {
 };
 
 export const Table: FC<TableProps> = ({ cols, rows, nthStyle = true, className }) => {
-	const headCells = useMemo(() => {
-		if (!isNilOrEmpty(cols?.data)) {
-			Object.keys(cols.data).map((c) => (
-				<TableHead key={c} className={cols.className}>
-					{cols.data[c].value}
-				</TableHead>
-			))
-		}
-		return null;
-	}, [cols.data]);
-
 	const body = useMemo(() => {
 		if (!rows) {
 			return null;
 		}
-		let rowIndex = 0;
+		return rows.map((row, i) => (
-		return map((row) => {
+			<TableRow nthStyle={nthStyle} key={i} className={row.className}>
-			rowIndex++;
+				{Object.keys(cols.data).map((cell) => (
-			return (
+					<TableCell key={cell} title={cols.data[cell].value} className={row.data[cell].className}>
-				<TableRow nthStyle={nthStyle} key={rowIndex} className={row.className}>
-					{map((cell) => {
-						const head = cols.data[cell];
-						return (
-							<TableCell
-								key={cell}
-								title={head.value}
-								className={row.data[cell].className}
-							>
 						{row.data[cell].value}
 					</TableCell>
-						);
+				))}
-					}, keys(cols.data))}
 			</TableRow>
-			);
+		));
-		}, rows);
 	}, [cols.data, rows, nthStyle]);
 
 	return (
 		<div className={clsx('tablek', className)}>
-			<div className="tablek-head-row">{headCells}</div>
+			<div className="tablek-head-row">
+				{Object.keys(cols.data).map((c) => (
+					<TableHead key={c} className={cols.className}>
+						{cols.data[c].value}
+					</TableHead>
+				))}
+			</div>
 			{body}
 		</div>
 	);