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">=></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"><</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">=></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">> 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">=></span> <span class="p">{</span> 246 <span class="k">return</span> <span class="p">(</span> 247 <span class="o"><</span><span class="nx">table</span> <span class="p">{...</span><span class="nx">getTableProps</span><span class="p">()}</span><span class="o">></span> 248 <span class="o"><</span><span class="nx">thead</span><span class="o">></span> 249 <span class="o"><</span><span class="nx">tr</span><span class="o">></span> 250 <span class="o"><</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">></span> 253 <span class="o"><</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">> 258</span> <span class="o"><</span><span class="sr">/th</span><span class="err">> 259</span> <span class="o"><</span><span class="sr">/tr</span><span class="err">> 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">=></span> <span class="p">(</span> 261 <span class="o"><</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">></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">=></span> <span class="p">(</span> 263 <span class="o"><</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">></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"><</span><span class="nx">span</span><span class="o">></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"><</span><span class="sr">/span</span><span class="err">> 272</span> <span class="o"><</span><span class="sr">/th</span><span class="err">> 273</span> <span class="p">))}</span> 274 <span class="o"><</span><span class="sr">/tr</span><span class="err">> 275</span> <span class="p">))}</span> 276 <span class="o"><</span><span class="sr">/thead</span><span class="err">> 277</span> <span class="o"><</span><span class="nx">tbody</span> <span class="p">{...</span><span class="nx">getTableBodyProps</span><span class="p">()}</span><span class="o">></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">=></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"><</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">></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">=></span> <span class="p">{</span> 283 <span class="k">return</span> <span class="o"><</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">></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"><</span><span class="sr">/td</span><span class="err">> 284</span> <span class="p">})}</span> 285 <span class="o"><</span><span class="sr">/tr</span><span class="err">> 286</span> <span class="p">)</span> 287 <span class="p">})}</span>
288 <span class="o"><</span><span class="sr">/tbody</span><span class="err">> 289</span> <span class="o"><</span><span class="sr">/table</span><span class="err">> 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"><thead></code> we insert a new <code class="language-plaintext highlighter-rouge"><tr></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"><</span><span class="nx">tr</span><span class="o">></span> 307 <span class="o"><</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">></span> 310 <span class="o"><</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">> 315</span> <span class="o"><</span><span class="sr">/th</span><span class="err">> 316</span><span class="o"><</span><span class="sr">/tr</span><span class="err">> 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"><tr></code> and inside the same <code class="language-plaintext highlighter-rouge"><thead></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">=></span> <span class="p">(</span> 326 <span class="o"><</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">></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">=></span> <span class="p">(</span> 328 <span class="o"><</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">></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"><</span><span class="nx">span</span><span class="o">></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"><</span><span class="sr">/span</span><span class="err">> 337</span> <span class="o"><</span><span class="sr">/th</span><span class="err">> 338</span> <span class="p">))}</span> 339 <span class="o"><</span><span class="sr">/tr</span><span class="err">> 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"><</span><span class="nx">span</span><span class="o">></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"><</span><span class="sr">/span</span><span class="err">> 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.