1<!doctype html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 6 <!-- Favicon --> 7 <link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32x32-9145d87c.png"> 8 <link rel="icon" type="image/png" sizes="16x16" href="/images/favicons/favicon-16x16-f676099d.png"> 9 10 <!-- Always force latest IE rendering engine or request Chrome Frame --> 11 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> 12 13 <!-- Mobile-optimized --> 14 <meta name="viewport" content="width=device-width, initial-scale=1"> 15 16 <!-- Use title if it's in the page YAML frontmatter --> 17 <title>React Table - Best JavaScript Data Grids and Spreadsheets for React, Angular, Vue and Svelte.</title> 18 19 <link rel="shortcut icon" href=""> 20 21 <meta name="description" content="jspreadsheets compiles the best spreadsheets and data grids written in JavaScript. It helps you choose the most suitable component for your project." /> 22 23 <!-- Twitter Card data --> 24 <meta name="twitter:card" value="jspreadsheets compiles the best spreadsheets and data grids written in JavaScript."> 25 26 <!-- Open Graph data --> 27 <meta property="og:title" content="jspreadsheets" /> 28 <meta property="og:type" content="website" /> 29 <meta property="og:url" content="https://jspreadsheets.com/" /> 30 <meta property="og:image" content="https://jspreadsheets.com/images/jspreadsheets-logo.png" /> 31 <meta property="og:description" content="jspreadsheets compiles top spreadsheets and data grids written in JavaScript. It helps you choose the most suitable component for your project." /> 32 33 <!-- Font Awesome --> 34 <link href="/font-awesome/css/font-awesome-41c975f5.css" rel="stylesheet"> 35 36 <!-- Roboto font --> 37 <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet"> 38 39 <!-- Styles --> 40 <link href="/stylesheets/normalize-ef7858ef.css" rel="stylesheet" /><link href="/stylesheets/syntax-0634aad9.css" rel="stylesheet" /><link href="/stylesheets/all-e20ac984.css" rel="stylesheet" /> 41 </head> 42 43 <body> 44 45 <!-- Google Tag Manager -->
vendor: 66 bytes, lines 45-46
45 46 <noscript><iframe src="//www.googletagmanager.com/ns.html?id=
46GTM-MM9XG2
vendor: 91 bytes, lines 46-48
46" 47 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 48
48<script>
vendor: 337 bytes, lines 48-52
48(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 49 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 50 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 51 '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 52 })(window,document,'script','dataLayer','
52GTM-MM9XG2
vendor: 3 bytes, line 52
52');
52</script>
52 53 <!-- End Google Tag Manager --> 54 55 <div class="hero"> 56 <div class="logo-group"> 57 <a href="/" class="logo">jspreadsheets</a> 58 </div> 59 <h1>Best JavaScript Data Grids and Spreadsheets</h1> 60 </div> 61 <div class="navbar"> 62 <div class="container"> 63 <a href="/" class="back">View all projects</a> 64 <div class="right-menu"> 65 <ul> 66 <li><a href="/about">About</a></li> 67 </ul> 68 </div> 69 </div> 70</div> 71 72 73 <div class="main subpage"> 74 75 <div class="sheet"> 76 77 <div class="left-side"> 78 79 <h2>React Table</h2> 80 <div class="links"> 81 <a href="https://github.com/TanStack/table" target="_blank" class="ellipsis"><i class="fa fa-home"></i> https://github.com/TanStack/table</a> 82 <br> 83 <a href="https://github.com/TanStack/table" target="_blank" class="ellipsis"><i class="fa fa-github"></i> https://github.com/TanStack/table</a> 84 </div> 85 86 <p>Hooks for building <strong>lightweight, fast and extendable datagrids</strong> for React</p> 87 88<h2>Features</h2> 89 90<ul> 91<li>Lightweight (5kb - 12kb+ depending on features used and tree-shaking)</li> 92<li>Headless (100% customizable, Bring-your-own-UI)</li> 93<li>Auto out of the box, fully controllable API</li> 94<li>Sorting (Multi and Stable)</li> 95<li>Filters</li> 96<li>Pivoting & Aggregation</li> 97<li>Row Selection</li> 98<li>Row Expansion</li> 99<li>Column Ordering</li> 100<li>Animatable</li> 101<li>Virtualizable</li> 102<li>Resizable</li> 103<li>Server-side/controlled data/state</li> 104<li>Extensible via hook-based plugin system</li> 105</ul> 106 107<h2>Documentation</h2> 108 109<ul> 110<li><a href="https://github.com/TanStack/table/blob/master/docs/installation.md">Installation</a> - Walk through how to install React Table</li> 111<li><a href="https://github.com/TanStack/table/blob/master/docs/concepts.md">Concepts</a> - Read how React Table works and how you can use it better</li> 112<li><a href="https://github.com/TanStack/table/blob/master/docs/examples.md">Examples</a> - Experience and learn from some examples and guides of how to use React Table and implement common patterns</li> 113<li><a href="https://github.com/TanStack/table/blob/master/docs/api/README.md">API</a> - Get to know React Table’s API</li> 114<li><a href="https://github.com/TanStack/table#previous-versions">Previous Versions</a></li> 115<li><a href="https://github.com/TanStack/table/blob/master/CONTRIBUTING.md">Contributing</a> - Become familiar with how to contribute back to React Table</li> 116<li><a href="https://github.com/TanStack/table/blob/master/CODE_OF_CONDUCT.md">Code of Conduct</a> - Be a good React Table citizen by following these repository rules</li> 117</ul> 118 119 120 </div> 121 122 <div class="right-side"> 123 124 <div class="github-stats box"> 125 <h4>STATS ON GITHUB</h4> 126 <ul class="stats"> 127 <li title="Stars"> 128 <i class="fa fa-star"></i> 129 <span class="stat">28313</span> 130 </li> 131 <li title="Forks"> 132 <i class="fa fa-code-fork"></i> 133 <span class="stat">3563</span> 134 </li> 135 <li title="Open Issues"> 136 <i class="fa fa-github"></i> 137 <span class="stat">56</span> 138 </li> 139 </ul> 140 </div> 141 <div class="installation box clearfix"> 142 <ul> 143 <li>License: MIT/Commercial</li> 144 <li>Author: Tanner Linsley</li> 145 <li>Last update: N/A</li> 146 </ul> 147 <div class="buttons"> 148 <a href="https://github.com/TanStack/table" target="_blank" class="btn purple">View on GitHub</a> 149 <a href="https://github.com/TanStack/table/tree/master/docs/examples.md" target="_blank" class="btn lightpurple">Demo</a> 150 </div> 151 </div> 152 <div class="charts box"> 153 <h4>TRENDS</h4> 154 <div class="graphs"> 155 <div id="stars-chart" class="chart"></div> 156 <div id="forks-chart" class="chart"></div> 157 <div id="issues-chart" class="chart"></div> 158 </div> 159 </div> 160 </div> 161 </div> 162 </div> 163 164 165 <div class="footer"> 166 167 <div class="postscript"> 168 <p>This website uses an open source software developed by <a href="https://netlify.com" target="_blank">Netlify</a></p> 169 </div> 170 </div> 171 172
172<script src="/javascripts/all-dda969dc.js"></script>
172 173 174 <!-- Page specific scripts --> 175
175<script> 176 $(function() { 177 var chart_stars = { 178 label: "Stars", 179 data: [[1785801600000,28268],[1785888000000,28279],[1785888000000,28279],[1786060800000,28283],[1786147200000,28291],[1786233600000,28294],[1786320000000,28305],[1786406400000,28313]] 180 }; 181 var options_stars = { 182 yaxis: { 183 tickDecimals: 0 184 }, 185 xaxis: { 186 transform: function (v) { return v; }, 187 mode: "time", 188 tickColor: "#fff" 189 } 190 }; 191 $.plot("#stars-chart", [chart_stars] , options_stars); 192 var chart_forks = { 193 label: "Forks", 194 data: [[1785801600000,3558],[1785888000000,3559],[1785888000000,3559],[1786060800000,3562],[1786147200000,3565],[1786233600000,3564],[1786320000000,3564],[1786406400000,3563]] 195 }; 196 var options_forks = { 197 yaxis: { 198 tickDecimals: 0 199 }, 200 xaxis: { 201 transform: function (v) { return v; }, 202 mode: "time", 203 tickColor: "#fff" 204 } 205 }; 206 $.plot("#forks-chart", [chart_forks] , options_forks); 207 var chart_issues = { 208 label: "Issues", 209 data: [[1785801600000,51],[1785888000000,44],[1785888000000,44],[1786060800000,45],[1786147200000,45],[1786233600000,45],[1786320000000,45],[1786406400000,46]] 210 }; 211 var options_issues = { 212 yaxis: { 213 tickDecimals: 0 214 }, 215 xaxis: { 216 transform: function (v) { return v; }, 217 mode: "time", 218 tickColor: "#fff" 219 } 220 }; 221 $.plot("#issues-chart", [chart_issues] , options_issues); 222 }); 223 224 </script>
224 225 226 227
227<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-555261a702d1c974" async="async"></script>
227 228 229
229<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"d852da7edde9417485ab436bab24e9af","r":1,"spa":2}' crossorigin="anonymous"></script>
229 230</body> 231</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.