PageSourceSearch

https://nafeu.com/2021-03-05/global-filtering-and-sorting-with-react-table/

html nafeu.com collected 2026-10-03 23:20:10 UTC 31,417 bytes, 461 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <meta name="description" content="Personal blog and portfolio site of Nafeu Nasir.">
6  <meta name="keywords" content="Blog,Profile,Portfolio,Nafeu,Nasir,Developer,Toronto">
7  <meta name="author" content="Nafeu Nasir">
8  <meta http-equiv="X-UA-Compatible" content="IE=edge">
9  <meta name="viewport" content="width=device-width, initial-scale=1">
10  <meta property="og:url" content="http://nafeu.com" />
11  <meta property="og:type" content="website" />
12  <meta property="og:title" content="Nafeu Nasir | Blog & Portfolio" />
13  <meta property="og:description" content="Personal blog and portfolio site of Nafeu Nasir." />
14  <meta property="og:image" content="/images/circle-headshot.png" />
15  <title>Global Filtering and Sorting with React Table</title>
16
17  <!-- CSS -->
18  <link rel="stylesheet" href="/assets/css/main.css" type="text/css">
19
20  <!-- Font -->
21  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
22  <!-- <link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css' rel='stylesheet' type='text/css'> -->
23  <link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono" rel="stylesheet">
24  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:200,300,400,700" rel="stylesheet">
25
26  <link rel="alternate" type="application/rss+xml" title="RSS Feed for Nafeu Nasir" href="/feed.xml" />
27
28  <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
29  <!-- Begin Jekyll SEO tag v2.8.0 -->
30<title>Global Filtering and Sorting with React Table | Nafeu Nasir</title>
31<meta name="generator" content="Jekyll v3.9.5" />
32<meta property="og:title" content="Global Filtering and Sorting with React Table" />
33<meta property="og:locale" content="en_US" />
34<meta name="description" content="Implementing a global filter and column sorting with React Table" />
35<meta property="og:description" content="Implementing a global filter and column sorting with React Table" />
36<link rel="canonical" href="https://nafeu.github.io/2021-03-05/global-filtering-and-sorting-with-react-table/" />
37<meta property="og:url" content="https://nafeu.github.io/2021-03-05/global-filtering-and-sorting-with-react-table/" />
38<meta property="og:site_name" content="Nafeu Nasir" />
39<meta property="og:type" content="article" />
40<meta property="article:published_time" content="2021-03-05T00:00:00-05:00" />
41<meta name="twitter:card" content="summary" />
42<meta property="twitter:title" content="Global Filtering and Sorting with React Table" />
43<script type="application/ld+json">
44{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2021-03-05T00:00:00-05:00","datePublished":"2021-03-05T00:00:00-05:00","description":"Implementing a global filter and column sorting with React Table","headline":"Global Filtering and Sorting with React Table","mainEntityOfPage":{"@type":"WebPage","@id":"https://nafeu.github.io/2021-03-05/global-filtering-and-sorting-with-react-table/"},"url":"https://nafeu.github.io/2021-03-05/global-filtering-and-sorting-with-react-table/"}</script>
44
45<!-- End Jekyll SEO tag -->
46
47
48
49  <!-- Google Analytics -->
50
51<script>
52(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
53  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
54  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
55})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
56
57ga('create', '', 'auto');
58ga('send', 'pageview');
59
60</script>
60
61
62
63
64</head>
65
66<body>
67  <div class="content-container">
68    <header>
69  <div class="header-small">
70    <a class="nav-item" href="https://nafeu.github.io">BLOG</a>
71    <a class="nav-item" href="https://nafeu.github.io/about#dev">DEV</a>
72    <a class="nav-item" href="https://nafeu.github.io/about#projects">PROJECTS</a>
73    <a class="nav-item" href="https://nafeu.github.io/about#music">MUSIC</a>
74    <a class="nav-item" href="https://nafeu.github.io/about#contact">CONTACT</a>
75  </div>
76</header>
77<div class="post">
78  <div class="post-title">Global Filtering and Sorting with React Table</div>
79  <span class="post-author">by Nafeu Nasir</span>
80  <span class="post-date">
81    <time>05 Mar 2021</time>
82  </span>
83  <div class="post-tag">
84    <ul>
85      
86      <li>
87        <a href="https://nafeu.github.io/tags#coding">
88          <span>coding</span>
89        </a>
90      </li>
91      
92      
93      <li>
94        <a href="https://nafeu.github.io/tags#react-table">
95          <span>react-table</span>
96        </a>
97      </li>
98      
99      
100      <li>
101        <a href="https://nafeu.github.io/tags#javascript">
102          <span>javascript</span>
103        </a>
104      </li>
105      
106      
107      <li>
108        <a href="https://nafeu.github.io/tags#sorting">
109          <span>sorting</span>
110        </a>
111      </li>
112      
113      
114      <li>
115        <a href="https://nafeu.github.io/tags#filtering">
116          <span>filtering</span>
117        </a>
118      </li>
119      
120      
121    </ul>
122  </div>
123
124  <p><img src="https://res.cloudinary.com/dvivnklwq/image/upload/v1614631393/slec2nfokpvtvk2qekss.png" alt="" /></p>
125
126<p>This post is a continuation of my article on <a href="https://nafeu.medium.com/using-react-query-with-react-table-884158535424">Using React Query with React Table</a>. I recommend reading that first to understand the full context.</p>
127
128<p>We will also be following along with the same set of example code which can be found at <a href="https://github.com/nafeu/react-query-table-sandbox">github.com/nafeu/react-query-table-sandbox</a>. We will be focusing on the <a href="https://github.com/nafeu/react-query-table-sandbox/blob/main/src/ReactTableFilterSort.jsx">ReactTableFilterSort.jsx</a> file.</p>
129
130<p>You can get it quickly set up with:</p>
131
132<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git clone https://github.com/nafeu/react-query-table-sandbox.git
133<span class="nb">cd </span>react-query-table-sandbox
134npm <span class="nb">install
135</span>npm start
136</code></pre></div></div>
137
138<h4 id="what-we-are-building">What We Are Building</h4>
139
140<p><img src="https://res.cloudinary.com/dvivnklwq/image/upload/v1614631580/ap0kgbanwz3gnglfxi8h.gif" alt="" /></p>
141
142<h3 id="understanding-our-data">Understanding Our Data</h3>
143
144<p>In the <a href="https://github.com/nafeu/react-query-table-sandbox/blob/main/index.mjs">example code</a>, I prepared a <strong>mock api</strong> which returns data for an imaginary <strong>software dev discussion group</strong> website. The data is formatted like so:</p>
145
146<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[
147  {
148    "id": 1,
149    "name": "How to use react-table in reporting dashboard",
150    "active": 40,
151    "status": "locked",
152    "upvotes": 30
153  },
154  {
155    "id": 2,
156    "name": "How to use react-query for BI solution",
157    "active": 31,
158    "status": "resolved",
159    "upvotes": 39
160  }
161  ...
162]
163</code></pre></div></div>
164
165<p>For the purpose of this tutorial, our data will not get any more complex than this. How can we now leverage React Table to implement a global filter and sortability into our table? We will do so by modifying our existing <code class="language-plaintext highlighter-rouge">ReactQueryWithTable</code> example. Let’s get started.</p>
166
167<h3 id="adding-a-global-filter-component">Adding a Global Filter Component</h3>
168
169<p>First we want to import some additional hooks from the <code class="language-plaintext highlighter-rouge">react-table</code> library, namely the <code class="language-plaintext highlighter-rouge">useGlobalFilter</code>, <code class="language-plaintext highlighter-rouge">useAsyncDebounce</code> and <code class="language-plaintext highlighter-rouge">useSortBy</code> hooks:</p>
170
171<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">
171import</span> <span class="p">{</span>
172  <span class="nx">useTable</span><span class="p">,</span>
173  <span class="nx">useGlobalFilter</span><span class="p">,</span>
174  <span class="nx">useAsyncDebounce</span><span class="p">,</span>
175  <span class="nx">useSortBy</span>
176<span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react-table</span><span class="dl">'</span><span class="p">;</span>
177</code></pre></div></div>
178
179<p>Then we want to create a new component called <code class="language-plaintext highlighter-rouge">GlobalFilter</code> which takes a few React Table defined props and renders a search box for us:</p>
180
181<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">TWO_HUNDRED_MS</span> <span class="o">=</span> <span class="mi">200</span><span class="p">;</span>
182
183<span class="kd">function</span> <span class="nx">GlobalFilter</span><span class="p">({</span>
184  <span class="nx">preGlobalFilteredRows</span><span class="p">,</span>
185  <span class="nx">globalFilter</span><span class="p">,</span>
186  <span class="nx">setGlobalFilter</span><span class="p">,</span>
187<span class="p">})</span> <span class="p">{</span>
188  <span class="kd">const</span> <span class="p">[</span><span class="nx">value</span><span class="p">,</span> <span class="nx">setValue</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="nx">globalFilter</span><span class="p">);</span>
189  <span class="kd">const</span> <span class="nx">onChange</span> <span class="o">=</span> <span class="nx">useAsyncDebounce</span><span class="p">(</span><span class="nx">value</span> <span class="o">=&gt;</span> <span class="p">{</span>
190    <span class="nx">setGlobalFilter</span><span class="p">(</span><span class="nx">value</span> <span class="o">||</span> <span class="kc">undefined</span><span class="p">)</span>
191  <span class="p">},</span> <span class="nx">TWO_HUNDRED_MS</span><span class="p">);</span>
192
193  <span class="k">return</span> <span class="p">(</span>
194    <span class="o">&lt;</span><span class="nx">input</span>
195      <span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">value</span> <span class="o">||</span> <span class="dl">""</span><span class="p">}</span>
196      <span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">e</span> <span class="o">=&gt;</span> <span class="p">{</span>
197        <span class="nx">setValue</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
198        <span class="nx">onChange</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
199      <span class="p">}}</span>
200      <span class="nx">placeholder</span><span class="o">=</span><span class="p">{</span><span class="s2">`Search`</span><span class="p">}</span>
201    <span class="sr">/</span><span class="err">&gt;
202</span>  <span class="p">)</span>
203<span class="p">}</span>
204</code></pre></div></div>
205
206<p>Using <code class="language-plaintext highlighter-rouge">useState</code> and <code class="language-plaintext highlighter-rouge">globalFilter</code>, we create a <code class="language-plaintext highlighter-rouge">value</code> state variable which keeps track of what we put into our search box, and we use <code class="language-plaintext highlighter-rouge">useAsyncDebounce</code> to call <code class="language-plaintext highlighter-rouge">setGlobalFilter</code> with a <code class="language-plaintext highlighter-rouge">200ms</code> input delay.</p>
207
208<p>We can’t really see it here, but <code class="language-plaintext highlighter-rouge">setGlobalFilter</code> performs quite a bit of magic. As our <code class="language-plaintext highlighter-rouge">globalFilter</code> object is connected to the rest of the table, updates from <code class="language-plaintext highlighter-rouge">setGlobalFilter</code> will modify the visible rows in our table.</p>
209
210<h3 id="updating-our-tablequery-component">Updating our TableQuery Component</h3>
211
212<p>The only modification we do here is add <code class="language-plaintext highlighter-rouge">enabled: !tableData</code> to prevent the table from re-fetching in the background as it can mess up the filtered or sorted order. Implementing re-fetching with a filtered or sorted structure is a more advanced topic that won’t be covered in this article.</p>
213
214<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="p">{</span>
215  <span class="na">data</span><span class="p">:</span> <span class="nx">apiResponse</span><span class="p">,</span>
216  <span class="nx">isLoading</span>
217<span class="p">}</span> <span class="o">=</span> <span class="nx">useQuery</span><span class="p">(</span><span class="dl">'</span><span class="s1">discussionGroups</span><span class="dl">'</span><span class="p">,</span> <span class="nx">fetchData</span><span class="p">,</span> <span class="p">{</span> <span class="na">enabled</span><span class="p">:</span> <span class="o">!</span><span class="nx">tableData</span> <span class="p">});
217</span>
218</code></pre></div></div>
219
220<h3 id="updating-our-tableinstance-component">Updating our TableInstance Component</h3>
221
222<p>Here we just update the <code class="language-plaintext highlighter-rouge">tableInstance</code> instantiation with the hooks <code class="language-plaintext highlighter-rouge">useGlobalFilter</code> and <code class="language-plaintext highlighter-rouge">useSortBy</code></p>
223
224<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">tableInstance</span> <span class="o">=</span> <span class="nx">useTable</span><span class="p">(</span>
225  <span class="p">{</span> <span class="nx">columns</span><span class="p">,</span> <span class="nx">data</span> <span class="p">},</span>
226  <span class="nx">useGlobalFilter</span><span class="p">,</span>
227  <span class="nx">useSortBy</span>
228<span class="p">);</span>
229</code></pre></div></div>
230
231<h3 id="updating-our-tablelayout-component">Updating our TableLayout Component</h3>
232
233<p>Here is where the bulk of our updates are in comparison to the <code class="language-plaintext highlighter-rouge">ReactQueryWithTable.jsx</code> file:</p>
234
235<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">TableLayout</span> <span class="o">=</span> <span class="p">({</span>
236  <span class="nx">getTableProps</span><span class="p">,</span>
237  <span class="nx">getTableBodyProps</span><span class="p">,</span>
238  <span class="nx">headerGroups</span><span class="p">,</span>
239  <span class="nx">rows</span><span class="p">,</span>
240  <span class="nx">prepareRow</span><span class="p">,</span>
241  <span class="na">state</span><span class="p">:</span> <span class="p">{</span> <span class="nx">globalFilter</span> <span class="p">},</span>
242  <span class="nx">visibleColumns</span><span class="p">,</span>
243  <span class="nx">preGlobalFilteredRows</span><span class="p">,</span>
244  <span class="nx">setGlobalFilter</span>
245<span class="p">})</span> <span class="o">=&gt;</span> <span class="p">{</span>
246  <span class="k">return</span> <span class="p">(</span>
247    <span class="o">&lt;</span><span class="nx">table</span> <span class="p">{...</span><span class="nx">getTableProps</span><span class="p">()}</span><span class="o">&gt;</span>
248      <span class="o">&lt;</span><span class="nx">thead</span><span class="o">&gt;</span>
249        <span class="o">&lt;</span><span class="nx">tr</span><span class="o">&gt;</span>
250          <span class="o">&lt;</span><span class="nx">th</span>
251            <span class="nx">colSpan</span><span class="o">=</span><span class="p">{</span><span class="nx">visibleColumns</span><span class="p">.</span><span class="nx">length</span><span class="p">}</span>
252          <span class="o">&gt;</span>
253            <span class="o">&lt;</span><span class="nx">GlobalFilter</span>
254              <span class="nx">preGlobalFilteredRows</span><span class="o">=</span><span class="p">{</span><span class="nx">preGlobalFilteredRows</span><span class="p">}</span>
255              <span class="nx">globalFilter</span><span class="o">=</span><span class="p">{</span><span class="nx">globalFilter</span><span class="p">}</span>
256              <span class="nx">setGlobalFilter</span><span class="o">=</span><span class="p">{</span><span class="nx">setGlobalFilter</span><span class="p">}</span>
257            <span class="sr">/</span><span class="err">&gt;
258</span>          <span class="o">&lt;</span><span class="sr">/th</span><span class="err">&gt;
259</span>        <span class="o">&lt;</span><span class="sr">/tr</span><span class="err">&gt;
260</span>        <span class="p">{</span><span class="nx">headerGroups</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">headerGroup</span> <span class="o">=&gt;</span> <span class="p">(</span>
261          <span class="o">&lt;</span><span class="nx">tr</span> <span class="p">{...</span><span class="nx">headerGroup</span><span class="p">.</span><span class="nx">getHeaderGroupProps</span><span class="p">()}</span><span class="o">&gt;</span>
262            <span class="p">{</span><span class="nx">headerGroup</span><span class="p">.</span><span class="nx">headers</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">column</span> <span class="o">=&gt;</span> <span class="p">(</span>
263              <span class="o">&lt;</span><span class="nx">th</span> <span class="p">{...</span><span class="nx">column</span><span class="p">.</span><span class="nx">getHeaderProps</span><span class="p">(</span><span class="nx">column</span><span class="p">.</span><span class="nx">getSortByToggleProps</span><span class="p">())}</span><span class="o">&gt;</span>
264                <span class="p">{</span><span class="nx">column</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="dl">'</span><span class="s1">Header</span><span class="dl">'</span><span class="p">)}</span>
265                <span class="o">&lt;</span><span class="nx">span</span><span class="o">&gt;</span>
266                  <span class="p">{</span><span class="nx">column</span><span class="p">.</span><span class="nx">isSorted</span>
267                    <span class="p">?</span> <span class="nx">column</span><span class="p">.</span><span class="nx">isSortedDesc</span>
268                      <span class="p">?</span> <span class="dl">'</span><span class="s1"> ⬇️</span><span class="dl">'</span>
269                      <span class="p">:</span> <span class="dl">'</span><span class="s1"> ⬆️</span><span class="dl">'</span>
270                    <span class="p">:</span> <span class="dl">'</span><span class="s1"> ↕️</span><span class="dl">'</span><span class="p">}</span>
271                <span class="o">&lt;</span><span class="sr">/span</span><span class="err">&gt;
272</span>              <span class="o">&lt;</span><span class="sr">/th</span><span class="err">&gt;
273</span>            <span class="p">))}</span>
274          <span class="o">&lt;</span><span class="sr">/tr</span><span class="err">&gt;
275</span>        <span class="p">))}</span>
276      <span class="o">&lt;</span><span class="sr">/thead</span><span class="err">&gt;
277</span>      <span class="o">&lt;</span><span class="nx">tbody</span> <span class="p">{...</span><span class="nx">getTableBodyProps</span><span class="p">()}</span><span class="o">&gt;</span>
278        <span class="p">{</span><span class="nx">rows</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">row</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
279          <span class="nx">prepareRow</span><span class="p">(</span><span class="nx">row</span><span class="p">)</span>
280          <span class="k">return</span> <span class="p">(</span>
281            <span class="o">&lt;</span><span class="nx">tr</span> <span class="p">{...</span><span class="nx">row</span><span class="p">.</span><span class="nx">getRowProps</span><span class="p">()}</span><span class="o">&gt;</span>
282              <span class="p">{</span><span class="nx">row</span><span class="p">.</span><span class="nx">cells</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">cell</span> <span class="o">=&gt;</span> <span class="p">{</span>
283                <span class="k">return</span> <span class="o">&lt;</span><span class="nx">td</span> <span class="p">{...</span><span class="nx">cell</span><span class="p">.</span><span class="nx">getCellProps</span><span class="p">()}</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">cell</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="dl">'</span><span class="s1">Cell</span><span class="dl">'</span><span class="p">)}</span><span class="o">&lt;</span><span class="sr">/td</span><span class="err">&gt;
284</span>              <span class="p">})}</span>
285            <span class="o">&lt;</span><span class="sr">/tr</span><span class="err">&gt;
286</span>          <span class="p">)</span>
287        <span class="p">})}</span>
288      <span class="o">&lt;</span><span class="sr">/tbody</span><span class="err">&gt;
289</span>    <span class="o">&lt;</span><span class="sr">/table</span><span class="err">&gt;
290</span>  <span class="p">);</span>
291<span class="p">}</span>
292</code></pre></div></div>
293
294<p>We pull out the following additional props from our table instance:</p>
295
296<pre><code class="language-txt">state: { globalFilter },
297visibleColumns,
298preGlobalFilteredRows,
299setGlobalFilter
300</code></pre>
301
302<p>These allow us to access the <code class="language-plaintext highlighter-rouge">globalFilter</code> object, info on <code class="language-plaintext highlighter-rouge">visibleColumns</code>, the <code class="language-plaintext highlighter-rouge">globalFilter</code> setter and the <code class="language-plaintext highlighter-rouge">preGlobalFilteredRows</code> helper.</p>
303
304<p>Inside our <code class="language-plaintext highlighter-rouge">&lt;thead&gt;</code> we insert a new <code class="language-plaintext highlighter-rouge">&lt;tr&gt;</code>, set it’s <code class="language-plaintext highlighter-rouge">colSpan</code> to the count of <code class="language-plaintext highlighter-rouge">visibleColumns</code> and insert our <code class="language-plaintext highlighter-rouge">GlobalFilter</code> component like so:</p>
305
306<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o">&lt;</span><span class="nx">tr</span><span class="o">&gt;</span>
307  <span class="o">&lt;</span><span class="nx">th</span>
308    <span class="nx">colSpan</span><span class="o">=</span><span class="p">{</span><span class="nx">visibleColumns</span><span class="p">.</span><span class="nx">length</span><span class="p">}</span>
309  <span class="o">&gt;</span>
310    <span class="o">&lt;</span><span class="nx">GlobalFilter</span>
311      <span class="nx">preGlobalFilteredRows</span><span class="o">=</span><span class="p">{</span><span class="nx">preGlobalFilteredRows</span><span class="p">}</span>
312      <span class="nx">globalFilter</span><span class="o">=</span><span class="p">{</span><span class="nx">globalFilter</span><span class="p">}</span>
313      <span class="nx">setGlobalFilter</span><span class="o">=</span><span class="p">{</span><span class="nx">setGlobalFilter</span><span class="p">}</span>
314    <span class="sr">/</span><span class="err">&gt;
315</span>  <span class="o">&lt;</span><span class="sr">/th</span><span class="err">&gt;
316</span><span class="o">&lt;</span><span class="sr">/tr</span><span class="err">&gt;
317</span></code></pre></div></div>
318
319<p>This is what it renders:</p>
320
321<p><img src="https://res.cloudinary.com/dvivnklwq/image/upload/v1614633798/wzf75sipcdgpiw1esekq.png" alt="" /></p>
322
323<p>After this <code class="language-plaintext highlighter-rouge">&lt;tr&gt;</code> and inside the same <code class="language-plaintext highlighter-rouge">&lt;thead&gt;</code>, we include a modified version of the <code class="language-plaintext highlighter-rouge">headerGroups</code> like so:</p>
324
325<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="nx">headerGroups</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">headerGroup</span> <span class="o">=&gt;</span> <span class="p">(</span>
326  <span class="o">&lt;</span><span class="nx">tr</span> <span class="p">{...</span><span class="nx">headerGroup</span><span class="p">.</span><span class="nx">getHeaderGroupProps</span><span class="p">()}</span><span class="o">&gt;</span>
327    <span class="p">{</span><span class="nx">headerGroup</span><span class="p">.</span><span class="nx">headers</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">column</span> <span class="o">=&gt;</span> <span class="p">(</span>
328      <span class="o">&lt;</span><span class="nx">th</span> <span class="p">{...</span><span class="nx">column</span><span class="p">.</span><span class="nx">getHeaderProps</span><span class="p">(</span><span class="nx">column</span><span class="p">.</span><span class="nx">getSortByToggleProps</span><span class="p">())}</span><span class="o">&gt;</span>
329        <span class="p">{</span><span class="nx">column</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="dl">'</span><span class="s1">Header</span><span class="dl">'</span><span class="p">)}</span>
330        <span class="o">&lt;</span><span class="nx">span</span><span class="o">&gt;</span>
331          <span class="p">{</span><span class="nx">column</span><span class="p">.</span><span class="nx">isSorted</span>
332            <span class="p">?</span> <span class="nx">column</span><span class="p">.</span><span class="nx">isSortedDesc</span>
333              <span class="p">?</span> <span class="dl">'</span><span class="s1"> ⬇️</span><span class="dl">'</span>
334              <span class="p">:</span> <span class="dl">'</span><span class="s1"> ⬆️</span><span class="dl">'</span>
335            <span class="p">:</span> <span class="dl">'</span><span class="s1"> ↕️</span><span class="dl">'</span><span class="p">}</span>
336        <span class="o">&lt;</span><span class="sr">/span</span><span class="err">&gt;
337</span>      <span class="o">&lt;</span><span class="sr">/th</span><span class="err">&gt;
338</span>    <span class="p">))}</span>
339  <span class="o">&lt;</span><span class="sr">/tr</span><span class="err">&gt;
340</span><span class="p">))}</span>
341</code></pre></div></div>
342
343<p>One of the most important things here is the use of <code class="language-plaintext highlighter-rouge">column.getSortByToggleProps()</code>, this is what allows us to hook into React Table’s sorting functionality.</p>
344
345<p>Honestly, that is all it takes. We add some extra UI elements in the form of:</p>
346
347<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="o">&lt;</span><span class="nx">span</span><span class="o">&gt;</span>
348  <span class="p">{</span><span class="nx">column</span><span class="p">.</span><span class="nx">isSorted</span>
349    <span class="p">?</span> <span class="nx">column</span><span class="p">.</span><span class="nx">isSortedDesc</span>
350      <span class="p">?</span> <span class="dl">'</span><span class="s1"> ⬇️</span><span class="dl">'</span>
351      <span class="p">:</span> <span class="dl">'</span><span class="s1"> ⬆️</span><span class="dl">'</span>
352    <span class="p">:</span> <span class="dl">'</span><span class="s1"> ↕️</span><span class="dl">'</span><span class="p">}</span>
353<span class="o">&lt;</span><span class="sr">/span</span><span class="err">&gt;
354</span></code></pre></div></div>
355
356<p>Which display the sorting state. They utilize <code class="language-plaintext highlighter-rouge">.isSorted</code> and <code class="language-plaintext highlighter-rouge">.isSortedDesc</code> which again, are values provided to us by React Table thanks to <code class="language-plaintext highlighter-rouge">useSortBy</code>.</p>
357
358<p>And there you have it, that’s all it takes to implement a global filter and sorting using React Table. We are using all default configurations here, but React Table also allows you to control the algorithms behind sorting and filtering. Hope this has helped.</p>
359
360<p><img src="https://res.cloudinary.com/dvivnklwq/image/upload/v1614631580/ap0kgbanwz3gnglfxi8h.gif" alt="" /></p>
361
362<p>Happy Coding!</p>
363
364
365  <div class="post-author-blurb">
366  <div class="blurb-left">
367    <div class="author-headshot"></div>
368  </div>
369  <div class="blurb-right">
370    <div class="author-desc">
371      <strong>Nafeu Nasir</strong> is a musician and full-stack web developer from Toronto, Canada who completed an H.B.Sc in Computer Science and Linguistics at the University of Toronto.
372    </div>
373    <div class="social-links">
374
375    
376    <a href="https://github.com/nafeu"><i class="fa fa-github" aria-hidden="true"></i></a>
377    
378
379    
380    <a href="https://www.linkedin.com/in/nafeu-nasir-aa679b60"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
381    
382
383    
384    <a href="https://twitter.com/phrakturemusic"><i class="fa fa-twitter" aria-hidden="true"></i></a>
385    
386
387  
388    <a href="https://www.instagram.com/phrakture"><i class="fa fa-instagram" aria-hidden="true"></i></a>
389    
390
391  
392    <a href="https://www.youtube.com/channel/phrakture"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
393    
394
395    
396    <a href="mailto:[email protected]"><i class="fa fa-envelope" aria-hidden="true"></i></a>
397    
398
399  </div>
400  </div>
401</div>
402</div>
403
404
405    <!-- Documents about icons are here: http://fontawesome.io/icons/ -->
406<div class="footer">
407  <hr />
408  <div class="footer-link">
409    
410    <a href="https://www.facebook.com/phrakturemusic"><i class="fa fa-facebook" aria-hidden="true"></i></a>
411    
412
413	
414
415	
416    <a href="https://www.youtube.com/channel/phrakture"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
417    
418
419    
420    <a href="https://twitter.com/phrakturemusic"><i class="fa fa-twitter" aria-hidden="true"></i></a>
421    
422
423    
424    <a href="https://github.com/nafeu"><i class="fa fa-github" aria-hidden="true"></i></a>
425    
426
427	
428    <a href="http://stackoverflow.com/users/nafeu"><i class="fa fa-stack-overflow" aria-hidden="true"></i></a>
429    
430
431	
432
433    
434    <a href="https://www.linkedin.com/in/nafeu-nasir-aa679b60"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
435    
436
437	
438
439	
440
441	
442    <a href="https://www.instagram.com/phrakture"><i class="fa fa-instagram" aria-hidden="true"></i></a>
443    
444
445	
446
447    
448
449    
450
451    
452    <a href="mailto:[email protected]"><i class="fa fa-envelope" aria-hidden="true"></i></a>
453    
454
455  </div>
456  © 2024 Nafeu Nasir.
457</div>
458
459  </div>
460</body>
461</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.