Questions tagged [react-table-v7]

The most recent version of react-table is the @tanstack/react-table adapter of the TanStack Table libary. This tag is specifically for questions about v7, which was a major refactor over previous versions, and differs in other ways from v8 and beyond.

Website

https://react-table-v7.tanstack.com/

Demos

https://react-table-v7.tanstack.com/docs/examples/basic

Docs

https://react-table-v7.tanstack.com/docs/overview

Example

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

// Render the UI for your table
return (
  <table {...getTableProps()}>
    <thead>
      {headerGroups.map(headerGroup => (
        <tr {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map(column => (
            <th {...column.getHeaderProps()}>{column.render('Header')}</th>
          ))}
        </tr>
      ))}
    </thead>
    <tbody {...getTableBodyProps()}>
      {rows.map((row, i) => {
        prepareRow(row)
        return (
          <tr {...row.getRowProps()}>
            {row.cells.map(cell => {
              return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
            })}
          </tr>
        )
      })}
    </tbody>
  </table>
)