Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why use `useTable` over `ReactTable` when using react-table

On their npm page, the example shows the usage of <ReactTable> component:

import ReactTable from 'react-table'
...
render() {
  return (
    <ReactTable
      data={data}
      columns={columns}
    />
  )
}

However, on their API Docs and examples, they all use useTable.

import { useTable } from 'react-table';

function Table({ columns, data }) {
  // Use the state and functions returned from useTable to build your UI
  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>
  )
}

...

render () {
  return (
    <Table columns={columns} data={data} />
  )
}

So, my question is: Why would someone use hooks(useTable, useFilters, and etc...) and make Table component when he/she can just use a that's already provided. I'm pretty sure they didn't forget updating their npm page's example... or did they?

like image 788
Andy Avatar asked Nov 19 '19 18:11

Andy


People also ask

What is Usetable in react?

Provides the behavior and accessibility implementation for a table component. A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting. install.

Why should I use react table?

React-table also allows you to implement basic table features such as pagination, row selection through checkboxes, column grouping, column ordering and even column drag and dropping using plugins already written. You just need to add the appropriate hook to your code.

How do you display Boolean values in react table?

Use the String() function to render a boolean value in JSX in React, e.g. <h2>{String(bool1)}</h2> . By default boolean values don't render anything in React, so we have to convert the value to a string in order to render it. Copied!


1 Answers

react-table is a "headless" UI library which means that it provides only the backend table functionality, and it requires you to implement the rendering of the table with your own React components.

This means that you can apply the backend table code to whichever style of table you want (e.g. Bootstrap, Material UI, vanilla HTML etc.) and you get precise control of where to hook-up this library to the UI.

Most table libraries (including react-table pre v7!) have predefined functionality and behaviours which might not be suitable for you in certain cases; however when using react-table >=v7 you would be able to cater for these situations by implementing your own UI code and then hooking it up to your react-table hook code.

like image 120
Ben Smith Avatar answered Oct 07 '22 12:10

Ben Smith