simple react table

Table.tsx

import React from 'react'
import { ClassNames, CSSObject } from '@emotion/react'
import { Column, useTable } from 'react-table'
import TextByScale from './TextByScale'

interface Props {
  columns: Array<Column>
  data: Array<any>
}

const Table: React.FC<Props> = ({ columns: _columns, data: _data }) => {
  const columns = React.useMemo(() => _columns, [])
  const data = React.useMemo(() => _data, [])

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({ columns, data })

  return (
    <ClassNames>
      {({ css }) => (
        <div className={css(st.tableContainer)}>
          <div className={css(st.theadSeparatorLine)} />
          <table {...getTableProps()} className={css(st.table)}>
            <thead>
              {headerGroups.map((headerGroup) => (
                <tr {...headerGroup.getHeaderGroupProps()}>
                  {headerGroup.headers.map((column) => (
                    <th {...column.getHeaderProps()} className={css(st.header)}>
                      <TextByScale bold scale="body2">
                        {column.render('Header')}
                      </TextByScale>
                    </th>
                  ))}
                </tr>
              ))}
            </thead>
            <tbody {...getTableBodyProps()}>
              {rows.map((row) => {
                prepareRow(row)
                return (
                  <tr {...row.getRowProps()}>
                    {row.cells.map((cell) => {
                      return (
                        <td {...cell.getCellProps()} className={css(st.cell)}>
                          <TextByScale scale="body2">
                            {cell.render('Cell')}
                          </TextByScale>
                        </td>
                      )
                    })}
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>
      )}
    </ClassNames>
  )
}

const headerHeight = 64

const st: CSSObject = {
  tableContainer: {
    flex: 1,
    display: 'flex',
    height: '100%', //important
    overflowY: 'auto', //important
    flexDirection: 'column',
  },
  table: {
    width: '100%',

    'thead,tr,th': {
      position: 'sticky',
      top: 0,
    },

    th: {
      backgroundColor: 'white',
      fontWeight: 'revert',
    },

    'thead tr, tbody tr': {
      'th:first-child,td:first-child': {
        paddingLeft: 20,
      },
      'th:last-child,td:last-child': {
        paddingRight: 20,
      },
    },

    'tbody tr:hover': {
      backgroundColor: '#d1dffa',
    },

    'th,td': {
      margin: 0,
      padding: 20,
      paddingLeft: 10,
      paddingRight: 10,
      borderBottomWidth: 1,
      borderBottomColor: '#eeeeee',
    },

    'tr:last-child td': {
      borderBottomWidth: 0,
    },
  },
  header: {
    padding: '10px',
    color: 'black',
    textAlign: 'left',
    height: headerHeight - 2,
  },
  theadSeparatorLine: {
    borderBottomWidth: 2,
    borderBottomColor: 'black',
    marginTop: -2,
    width: '100%',
    position: 'sticky',
    top: headerHeight - 2,
  },
  cell: {
    padding: '10px',
  },
}

// https://emotion.sh/docs/class-names
// https://emotion.sh/docs/object-styles

export default Table