import React, { FC } from 'react'; import { TableHead, TableRow, TableCell } from '@material-ui/core'; import { TodosTableHeader, HeaderStyle } from '../../types'; const TableHeader: FC<{ data: TodosTableHeader[]; headerStyle?: HeaderStyle; }> = ({ data, headerStyle = {} }) => { return ( <TableHead> <TableRow> {data.map((column, i) => ( <TableCell key={i} align="left" style={{ minWidth: column.minWidth, fontSize: '1.5rem', fontWeight: 600, height: '48px', background: 'black', color: 'white', ...headerStyle }} > {column.label} </TableCell> ))} </TableRow> </TableHead> ); }; export default TableHeader;