Example

View Source on GitHub

import { useTable } from '@h6s/table'

export default function Table() {
  const [{ theadGroups, rows }, controls] = useTable({
    model: myTableModel,
    source: products,
  })

  return (
    <table>
      <thead>
        {theadGroups.map(({ theads, getRowProps }) => {
          const props = getRowProps()

          return (
            <tr key={props.id} {...props}>
              {theads.map(head => (
                <th>{head.render({ cellProps: head })}</th>
              ))}
            </tr>
          )
        })}
      </thead>
      <tbody>
        {rows.map(({ cells, getRowProps }) => {
          const props = getRowProps()

          return (
            <tr key={props.id} {...props}>
              {cells.map(cell => (
                cell.colSpan !== 0
                  ? <td key={cell.id}>{cell.render({ cellProps: cell })}</td>
                  : null
              )}
            </tr>
          )
        })}
      </tbody>
    </table>
  )
}