react-table VS proposal-iterator-helpers

Tanstack - Tanstack has evolved to an entire ecosystem consisting of the famous Tanstack (or React) Query, Tanstack Table, now also Tanstack Router and Tanstack Form. It started with Tanstack Query, which adopted Nx and Nx Cloud. Zack talked about this collab with Dominik, and we also had Dominik on our Nx live stream. Now, all the above-mentioned Tanstack libs have adopted Nx, and there's more coming.

If you want to bring your own UI, TanStack Table (formerly React Table) [0], if you want something that's batteries included, MUI [1]. There are of course other options with either close or full feature parity, but these are the two I see most often with least pain across different companies. While we're on the topic of recommendations, avoid any- and everything by Telerik.

[0] https://tanstack.com/table/

[1] https://mui.com/material-ui/react-table/

Happy to help, here's one for next time you need tables: https://github.com/TanStack/table

Or for the table react-table can be a powerful option to consider.

svelte-headless-table: Unopinionated and extensible data tables for Svelte. (I haven't tried tanstack-table, but I've heard good things about it)

solution

For this week's pick, I chose TanStack Table, a table-building solution that offers power and flexibility. This headless UI solution provides a lightweight and agnostic core, making it easy to integrate into any React, Solid, Vue, Svelte, or TS/JS project.

Global iterator type is coming: https://github.com/tc39/proposal-iterator-helpers

But a method named `groupBy` on iterators traditionally means a different thing: https://github.com/tc39/proposal-array-grouping/issues/51#is...

Global iterable type it's too late for, since there's many extant iterables in the language and on the web which don't have it in their prototype chain and can't reasonably be changed.

Very much agreed. The amount of mileage we get from using Spread (literally the ...) alone has been amazing. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... Iteration helpers is shipping soon, that'll be a huge help (async iteration helpers will be delayed for a while). https://github.com/tc39/proposal-iterator-helpers .

In the olden days, I feel like the codebases I worked on needed to use .apply() multiple times a week, to figure out some creative way of invoking functions. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... That's all gone now; I'd take even odds that 50% of my team knows .call and .apply.

Chrome 117 is shipping Object.groupBy() and that's gonna be a huge help in eliminating a lot of the last places we end up using lodash. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

Once this https://github.com/tc39/proposal-iterator-helpers reaches browsers, I'm prob gonna be exclusively using Maps.

No, probably not. But with iterator helpers, you can do

> focus more on improving the terrible JS web API

That's W3C’s job, not ECMA’s.

> Where are all the containers?

?

> Sorted sets/maps?

Sets and Maps are sorted (by insertion order)

> Why can't I even map an iterator?

It's coming, but someone will likely be exhausted by that addition. https://github.com/tc39/proposal-iterator-helpers

Upcoming: https://github.com/tc39/proposal-iterator-helpers

Not Generators, but Iterators have a Stage 3 proposal with helpers like these.

I guess you are not the only one dealing with this. That’s why there is this proposal https://github.com/tc39/proposal-iterator-helpers So hopefully it will get easier soon. But in most cases you can simply wrap it in Array.from or you can also clone with the spread operator.

Let's assume Number.range(), iterator helpers and some isPrime() function. From that we could easily create the following: