react table components

Example.js

<table className='table-auto w-full'>
  <TableHeader columns={['Aliases', 'Properties', 'Registered', 'Last seen']} />
  <TableBody iterator={players}>
    {(player) => (
      <>
        <TableCell><PlayerAliases aliases={player.aliases} /></TableCell>
        <TableCell>
          <div className='flex items-center'>
            <span className='min-w-5'>{Object.keys(player.props).length}</span>
            <Button
              variant='icon'
              className='ml-2 p-1 rounded-full bg-indigo-900'
              onClick={() => goToPlayerProps(player)}
              icon={<IconArrowRight size={16} />}
            />
          </div>
        </TableCell>
        <TableCell>{format(new Date(player.createdAt), 'do MMM Y')}</TableCell>
        <TableCell>{format(new Date(player.lastSeenAt), 'do MMM Y')}</TableCell>
      </>
    )}
  </TableBody>
</table>

TableBody.js

import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'

const TableBody = (props) => {
  return (
    <tbody>
      {props.iterator.map((iterator, idx) => (
        <tr
          key={idx}
          className={classNames({
            'bg-indigo-600': (props.startIdx + idx) % 2 !== 0,
            'bg-indigo-500': (props.startIdx + idx) % 2 === 0
          })}
        >
          {props.children(iterator, idx)}
        </tr>
      ))}
    </tbody>
  )
}

TableBody.defaultProps = {
  startIdx: 0
}

TableBody.propTypes = {
  iterator: PropTypes.array.isRequired,
  children: PropTypes.func.isRequired,
  startIdx: PropTypes.number
}

export default TableBody

TableCell.js

import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'

const TableCell = (props) => {
  return (
    <td
      className={classNames(
        'p-4',
        props.className,
        {
          'min-w-40': !props.className?.startsWith('min-w-')
        }
      )}
    >
      {props.children}
    </td>
  )
}

TableCell.propTypes = {
  children: PropTypes.node.isRequired,
  className: PropTypes.string
}

export default TableCell

TableHeader.js

import React from 'react'
import PropTypes from 'prop-types'

const TableHeader = (props) => {
  return (
    <thead className='bg-white text-black font-semibold'>
      <tr>
        {props.columns.map((col) => (
          <th key={col} className='p-4 text-left'>{col}</th>
        ))}
      </tr>
    </thead>
  )
}

TableHeader.propTypes = {
  columns: PropTypes.arrayOf(PropTypes.string).isRequired
}

export default TableHeader