Table.tsx

import React from 'react';
export function Td({id,children,className}){
	return (
		<td id={id} className={className ?? ''}>
			{children}
		</td>
	)
}
export function Th({id,children,className}:{
	id?:string,
	children:React.ReactNode,
	className?:string
}){
	return (
		<th id={id} className={`manage-column ${className}`}>
			{children}

		</th>
	)
}
export default function Table({caption,headers,rows,footer}:{
	caption:string,
	headers:{
		id:string,
		children:React.ReactNode,
		className?:string
		primary?:boolean
	}[]
	rows: {
		key:string,
		cells: {
			key:string,
			children:React.ReactNode,
			className?:string
		}[]
	}[]
	footer?:React.ReactNode
}) {

	return (
		<table className="wp-list-table widefat fixed striped table-view-list">
			<caption className="screen-reader-text">{caption}</caption>
			<thead>
				<tr>
					<Td id="cb" className="manage-column column-cb check-column">
						<label htmlFor="cb-select-all-1">
							<span className="screen-reader-text">Select All</span>
						</label>
					</Td>
					{headers.map(({id,children,className,primary})=>(
						<Th key={id} id="title" className={`manage-column column-${id} ${className} ${primary ? 'primary primary-column':''}`}>
							{children}
						</Th>
					))}
				</tr>
			</thead>

			<tbody id="the-list">
				{rows.map((row) => (
					<tr key={row.key}>

					<Th className="check-column">
						<input id="cb-select-3675782" type="checkbox" name="post[]" value="3675782" />
						<label htmlFor="cb-select-3675782">
							<span className="screen-reader-text">
							Select				</span>
						</label>

					</Th>
					{row.cells.map(({key,children,className})=>(
						<Td key={key} id={key} className={className}>
							{children}
						</Td>
					))}
				</tr>)
				)}
			</tbody>
			{footer ?<tfoot>{footer}</tfoot>:null}
		</table>
	);
}