Quick Start

At the heart of every React Table is the useTable hook and the table instance object that it returns. This instance object contains everything you'll need to build a table and interact with its state. This includes, but is not limited to:

• Columns
• Materialized Data
• Sorting
• Filtering
• Grouping
• Pagination
• Expanded State
• Any functionality provided by custom plugin hooks, too!

In React Table, you the developer are responsible for rendering the UI (markup and styles) of your table, but don't let that intimidate you! Table UIs are fun and React Table exists to make the process much easier to wire up your own table UI.

To show you how this works. Let's start with a very basic table example.

Getting your data

When thinking about a table structure, you typically have rows which contain columns. While table configurations can get far more complex with nested columns, subrows, etc. for this basic quick start, we need to define some data that resembles this structure.

1 const data = React.useMemo(
2   () => [
3     {
4       col1: 'Hello',
5       col2: 'World',
6     },
7     {
8       col1: 'react-table',
9       col2: 'rocks',
10     },
11     {
12       col1: 'whatever',
13       col2: 'you want',
14     },
15   ],
16   []
17 )

It's important that we're using React.useMemo here to ensure that our data isn't recreated on every render. If we didn't use React.useMemo, the table would think it was receiving new data on every render and attempt to recalculate a lot of logic every single time. Not cool!

Define Columns

Now that we have some data, let's create a set of column definitions to pass into the useTable hook.

1 const columns = React.useMemo(
2   () => [
3     {
4       Header: 'Column 1',
5       accessor: 'col1', // accessor is the "key" in the data
6     },
7     {
8       Header: 'Column 2',
9       accessor: 'col2',
10     },
11   ],
12   []
13 )

Again, we're using React.useMemo so React Table doesn't recalculate the universe on every single render. Only when the memoized value actually changes!

Using the useTable hook

Now that you have some data and columns defined, we can pass those into the useTable hook to create a table instance.

 const tableInstance = useTable({ columns, data })

useTable at the very least needs to be provided with an object containing the memoized columns and data.

Building a basic table UI

Nice! We have our table instance and we're almost there! However, we still don't have any table markup or styles to show, right?

Let's build a basic table structure using just HTML for now:

1 return (
2   <table>
3     <thead>
4       <tr>
5         <th></th>
6       </tr>
7     </thead>
8     <tbody>
9       <tr>
10         <td></td>
11       </tr>
12     </tbody>
13   </table>
14 )

Applying the table instance to markup

Now that we have our table structure, we can use the tableInstance to make it come to life!

1 const tableInstance = useTable({ columns, data })
2 
3 const {
4   getTableProps,
5   getTableBodyProps,
6   headerGroups,
7   rows,
8   prepareRow,
9 } = tableInstance
10 
11 return (
12   // apply the table props
13   <table {...getTableProps()}>
14     <thead>
15       {// Loop over the header rows
16       headerGroups.map(headerGroup => (
17         // Apply the header row props
18         <tr {...headerGroup.getHeaderGroupProps()}>
19           {// Loop over the headers in each row
20           headerGroup.headers.map(column => (
21             // Apply the header cell props
22             <th {...column.getHeaderProps()}>
23               {// Render the header
24               column.render('Header')}
25             </th>
26           ))}
27         </tr>
28       ))}
29     </thead>
30     {/* Apply the table body props */}
31     <tbody {...getTableBodyProps()}>
32       {// Loop over the table rows
33       rows.map(row => {
34         // Prepare the row for display
35         prepareRow(row)
36         return (
37           // Apply the row props
38           <tr {...row.getRowProps()}>
39             {// Loop over the rows cells
40             row.cells.map(cell => {
41               // Apply the cell props
42               return (
43                 <td {...cell.getCellProps()}>
44                   {// Render the cell contents
45                   cell.render('Cell')}
46                 </td>
47               )
48             })}
49           </tr>
50         )
51       })}
52     </tbody>
53   </table>
54 )

Final Result

If we put all of this together, we should get a very basic (as well as temporarily ugly) table.

1 import { useTable } from 'react-table'
2 
3 function App() {
4   const data = React.useMemo(
5     () => [
6       {
7         col1: 'Hello',
8         col2: 'World',
9       },
10       {
11         col1: 'react-table',
12         col2: 'rocks',
13       },
14       {
15         col1: 'whatever',
16         col2: 'you want',
17       },
18     ],
19     []
20   )
21 
22   const columns = React.useMemo(
23     () => [
24       {
25         Header: 'Column 1',
26         accessor: 'col1', // accessor is the "key" in the data
27       },
28       {
29         Header: 'Column 2',
30         accessor: 'col2',
31       },
32     ],
33     []
34   )
35 
36   const {
37     getTableProps,
38     getTableBodyProps,
39     headerGroups,
40     rows,
41     prepareRow,
42   } = useTable({ columns, data })
43 
44   return (
45     <table {...getTableProps()} style={{ border: 'solid 1px blue' }}>
46       <thead>
47         {headerGroups.map(headerGroup => (
48           <tr {...headerGroup.getHeaderGroupProps()}>
49             {headerGroup.headers.map(column => (
50               <th
51                 {...column.getHeaderProps()}
52                 style={{
53                   borderBottom: 'solid 3px red',
54                   background: 'aliceblue',
55                   color: 'black',
56                   fontWeight: 'bold',
57                 }}
58               >
59                 {column.render('Header')}
60               </th>
61             ))}
62           </tr>
63         ))}
64       </thead>
65       <tbody {...getTableBodyProps()}>
66         {rows.map(row => {
67           prepareRow(row)
68           return (
69             <tr {...row.getRowProps()}>
70               {row.cells.map(cell => {
71                 return (
72                   <td
73                     {...cell.getCellProps()}
74                     style={{
75                       padding: '10px',
76                       border: 'solid 1px gray',
77                       background: 'papayawhip',
78                     }}
79                   >
80                     {cell.render('Cell')}
81                   </td>
82                 )
83               })}
84             </tr>
85           )
86         })}
87       </tbody>
88     </table>
89   )
90 }

Clearly this isn't ready to ship, but from a conceptual standpoint, you just learned the basics of using React Table!