Today, we’re introducing a new version of our most popular Retool component — Table. It can render, update, and scroll through 100K+ rows and hundreds of columns (with dozens of data types) in milliseconds. Filtering, sorting, single or multi-row selection, customizable action buttons, and more just work out of the box. It is now available for all cloud customers, and is coming soon to self-hosted customers.
0:00 /0:19 1×
All business software starts with tabular data: the list of customers, orders, products, etc. (That’s why so many teams rely on spreadsheets as quick and dirty stopgaps.) Although quite similar to spreadsheets, tables have a few super powers:
- They're decoupled from how you store your data. You can combine multiple dynamic data sources in a single table: from a postgres DB, Salesforce, Zendesk, Stripe, or any other API.
- They’re easy to integrate with other elements in your application. For example, rows can trigger actions, be linked to forms, and easily display complex data types like avatars or tags.
- They’re deeply customizable: styling, edit interactions, validation, and data transformations are all configurable via code.
Building a table from scratch is a ton of work, so most developers reach for a component library. We’ve built with a lot of these over the years, and have consistently run into a couple of problems:
First, there can be a lot of mental overhead with standalone component libraries: learning the APIs, and spelunking through docs and examples to find something you can copy/paste. And yet, once your data is in the table, it’s usually still pretty bare bones. You’ve got to manually add advanced functionality, customize your column formats, and then you have to figure out how to make your table look good. Sometimes, you’ll end up leveraging style properties, but usually you have to write some (or, a lot of) CSS.
Your table also has to be fast. Rendering, scrolling, and editing interactions might feel snappy at 100 rows, but as your dataset grows, a lot of table components become painfully slow. At that point, you have to set up pagination or virtualization, and your table’s performance may still leave users frustrated.
Enter our new Table component. Here are a few of the key improvements we’ve made:
- Table’s performance is constant, whether you have 100 or 100,000 rows. Every interaction, scroll, and render is fast. We’re continuously investing in our performance infrastructure, too (we built and maintain our own custom virtualizer).
- Table auto-detects data types and will generate columns across dates, tags, links, booleans, and more.
- It’s really easy to link your data to actions–whether it’s cell level (e.g. opening a modal on cell click) or row level (e.g. opening another app on row click).
- Filtering, downloading data, and other complex end-user functionality are all built into Table’s toolbar, with support for custom buttons as well.
0:00 /0:18 1×
We also built a set of simple, powerful features that you can use to write back to your data sources. We introduced primary keys so that you can set a column that uniquely identifies rows, and added an option to persist row selection as your users filter, sort, and paginate through data. Single or multiple row selection just works.
0:00 /0:19 1×
Table is also deeply customizable so you can build rich interfaces for your users:
- Use tags to show a dropdown of options that you can populate manually or with a query.
- Write code to configure anything, like labels, colors, and icons.
- And, with the HTML column format, you can display your data in any way, like embedding a progress bar.
0:00 /0:38 1×
Table is even more powerful when paired with the other 100+ components in the Retool library. For example, from a Table, you can now generate a Form with all the right inputs wired up, so that your users can add rows to the underlying dataset. You can also configure custom validation rules, “required” fields, defaults (e.g. createdAt to {{ new Date() }}) and more.
0:00 /0:16 1×
Head to our docs for more feature details, or take it for a spin in your apps by signing into your Retool account.
To get started, simply drag a Table component onto the canvas—the new Table is now the default choice in Retool. Then, connect it to your data and you’re ready to set up actions and customize it further.
We’ll continue to support the legacy Table component in existing apps. If you’d like to upgrade your apps, check out the migration docs.
Reader
