import React , { memo , TableHTMLAttributes } from 'react' ; import { TableColumnDisplayProps } from '../mixins' ; import { StyledTableDataCell , StyledTableDataCheckbox } from './styled' ; export interface DataCellProps extends TableHTMLAttributes < HTMLTableCellElement > , TableColumnDisplayProps { align ? : 'left' | 'center' | 'right' ; isCheckbox ? : boolean ; verticalAlign ? : 'top' | 'middle' ; width ? : number | string ; withBorder ? : boolean ; withPadding ? : boolean ; } export const DataCell = memo ( ( { align , children , display , isCheckbox , verticalAlign , width , withBorder = true , withPadding = true , } ) => { return isCheckbox ? ( < StyledTableDataCheckbox align = { align } display = { display } width = { width } withBorder = { withBorder } > { children } < /StyledTableDataCheckbox>) : (<StyledTableDataCell align={align} display={display} verticalAlign={verticalAlign} width={width} withBorder={withBorder} withPadding={withPadding}> { children } < /StyledTableDataCell>); } ) ;