45 lines
939 B
JavaScript
45 lines
939 B
JavaScript
import { makeStyles } from '@material-ui/core/styles'
|
|
import classnames from 'classnames'
|
|
import React, { memo } from 'react'
|
|
|
|
import typographyStyles from 'src/components/typography/styles'
|
|
import {
|
|
tableHeaderColor,
|
|
tableHeaderHeight,
|
|
spacer,
|
|
white
|
|
} from 'src/styling/variables'
|
|
|
|
const { tl2 } = typographyStyles
|
|
|
|
const useStyles = makeStyles({
|
|
th: {
|
|
extend: tl2,
|
|
backgroundColor: tableHeaderColor,
|
|
height: tableHeaderHeight,
|
|
textAlign: 'left',
|
|
color: white,
|
|
padding: `0 ${spacer * 3}px`
|
|
},
|
|
alignRight: {
|
|
textAlign: 'right'
|
|
}
|
|
})
|
|
|
|
const TableHeaderCell = memo(
|
|
({ rightAlign, children, className, ...props }) => {
|
|
const classes = useStyles()
|
|
const styles = {
|
|
[classes.th]: true,
|
|
[classes.alignRight]: rightAlign
|
|
}
|
|
|
|
return (
|
|
<th {...props} className={classnames(styles, className)}>
|
|
{children}
|
|
</th>
|
|
)
|
|
}
|
|
)
|
|
|
|
export default TableHeaderCell
|