Introducing the new Table, Data Grid components ✨

Our new and improved Table collection component is now available.

Enhancements include:

  • Support for up to 50 columns
  • New column types like Tags, Buttons, Choice, and Boolean
  • More flexibility and customization options

We’ve also updated the Data Grid component to have a more spreadsheet-like experience for users who require a denser, edit-first interface.

In other words:

  • Use the updated Table collection component for viewing data
  • Use the updated Data Grid component for editing data

Look out for more details, including updated docs, in the coming weeks.

P.S. Thanks to everyone who’s been testing this component while it was in preview!

16 Likes

Beautiful, I can’t wait to start using these.

If we have an older data grid in place already, do we need to add a new one to get all of the new collection styles? I’m trying to add a Choice column but don’t see how to. What type of input does that require?

Data Grid and Table (formerly New Table) are different components. The Data Grid is also new and slightly different compared to the old Data Grid. Once you get rid of the old data grid, it’s gone. I don’t believe either the old or new data grids contain a choice option. Only the (New) Data Grid and Table does.
Here is a screenshot containing all three.

New data grid does contain choice columns!

4 Likes

I guess I need to play with it more. Thanks for the correction.

Based on NoCodeAndy’s second screen-shot (New Data Grid Component), it shows a Choice column to the right of the Boolean Column.

I already have the new styled Data Grid based on the images, but I don’t see how to feed the Choice Column.

I could be wrong, but I think only the third screenshot is the Data Grid component. The other two are the Table component.

Just figured it out. I had to drag a “New” data grid component to the page. It’s formatting settings are different now than the previous “New” version. It now included the setting for the column types.

UPDATE:

After playing with the New Data Grid, I think I will stick with the former “New” Data Grid component I already had in place. The new version definitely has a lot more options for formatting, BUT the previous version loads faster and scales better on various screen sizes, including a mobile phone.

Also tried to use the Choice Dropdown Column to select number from 1-100. It does allow for the choice selector to work, BUT the numbers in the drop-down were not in order from 1-100. It listed all of the leading 1 numbers, then 2’s, then 3’s…

And selecting the rows with Choice Columns to paste into a Google Sheet, yielded the number 4 in that field in the sheet vs. the number showing from 1-100 selected in the Choice Column.

Guess we will stick with editable “Text” columns for now vs. wishing for quick Choice Selector columns.

It’s promising but perhaps a bit too early to convert for our needs.

3 Likes

Hi @NoCodeAndy

Glad to hear the improvement of table components. However, I can’t see any data displayed with the new version (image 1 uses old version table, image 2 uses new version table, and image 3 source data of new version). Why does it happen?

Thank you in advance.

Do you have any filters for the table component?

In image 1, you were pointing to a collection, and it’s a different table (DT_Performance, not Driver_Performance, unless you changed the name midway).

1 Like

Have no filters.

You’re right, I use different data source with collection component (old table style) for image 1. When I want to create another table & source data, there’s no old version. But, I see no data displayed with list style or table style.

oops, sorry… there is something wrong with its container component :ok_hand:

Both components are great!

These updates would be nice:

  • Action trigger on update
  • Filter (dynamically) data for choices and tags
  • Multiple choices
  • Date/time column type
  • Required or not check
  • Make the view/edit option dynamic

Action trigger would be essential to trigger webhooks and let’s say quickly update a Google calendar event details. Without action trigger, updates stay in app only.

Is it possible to show multiple tags in one column? I could not get that to work. And I am not able to make a “sort” button appear. In fact when I click a column header the page goes blank.

1 Like

Very exciting

Is anyone experiencing sorting issues?

As best as I can tell I’m creating a table with duplicate settings as a pre-existing one and when sorting by table order backwards it isn’t showing the data in the order it is in the data editor (the pre-existing table is correct).

Not sure if it’s worth mentioning but when I click the data table preview at the bottom, it is empty. I’ve checked the source is the same, and the component filters are correct (all of the types I can find).

The tables are great!

But I miss a good view for mobile use.
Currently the tables are great on the desktop but not really usable on mobile. Would be great to have a better view for mobile.
Or as an alternative provide conditional visibility based on screen size or device. Then I could use my old custom collection for mobile and the table for desktop.

You can use the Device Info column to get the screen width and use conditional visibility based on that.

2 Likes

Ah, you’re right. This could be an option. Thanks

1 Like