[thread] New Table Feature Announcements

Hi all, this is a running thread for feature announcements for the new Table component! We launched the new Table last month, but have so many exciting features lined up to supercharge the power of this component.

The Table team will be sharing the new features we've shipped in this thread. Feel free to share feedback, ask questions, and more!

Read more about the new Table on the blog post or visit the docs .

6 Likes

We've added more formatting options to Number, Currency, and Percent. You can now specify the notation format and sign display.

number formatting

3 Likes

Table now supports auto height, and is compatible with both scroll and paginated overflow:
output

5 Likes

Rows can be grouped by common values! You can group rows by an arbitrary number of columns, and specify the sort order of each group.

CleanShot 2023-06-23 at 14.27.30

Coming soon: expand groups by default, and aggregate values in columns that aren't grouped.

8 Likes

Hey everyone! Another feature we added this week: cell tooltips! Here are some key capabilities:

  1. Cell tooltips set to overflow mode enable you to display long content within a Table component without compromising performance.

strings

  1. Cell tooltips set to overflow mode also render the formatted cell content for rich column types like tags and avatars.

rich formats

  1. Cell tooltips are also flexible! Using the custom mode, you can set other cell tooltips to suit your unique use case.

custom tooltips

6 Likes

Status indicators are now available for tables in cloud! You can use these to conditionally flag or highlight cells. Add one via the Addon dropdown for a column, and conditionally decide whether to show one via the "Show when" field (use {{ item }} to refer to the content of the cell). The first status indicator matching the conditions for a cell will be the one that is rendered.

Feel free to reach out if you have any questions or feedback!

4 Likes

I had a good use case for this - highlighting missing data in fields, But if using a column type of number and 'item' is undefined then nothing displays. Same thing if it is String type, but the string is empty : ''.

So I can't do something like Show when: {{ item === undefined }} to highlight the missing cell.

The workaround is to make the column a string and set its Mapped value to a hyphen (or any non-empty string): {{ item === undefined ? '-' : item}} and then use a Show when of {{ item === '-' }}. Now it works:

So excited feature, but I can't select content in pop up, when I move mouse to over it, it was disappear, I want to copy content on it.

Looks lovely, and we can use currentSourceRow too to reference other columns so that's great.

1 Like

Great callout -- this is a bug! We'll get a fix in for this in the next release

We're working on cell copying interactions. I'll follow up when these are deployed. However, that only enables copying content inside the cell (overflow tooltips display this content).

Do you have custom tooltips that you wish to copy?

Very excited for this!
Coming soon : expand groups by default, and aggregate values in columns that aren't grouped.

Excellent work!!

2 Likes

thanks. I want to use mouse to select part of content in cell tooltip and use ctrl + c to copy it. or click links on the cell tooltip.

Is dynamic columns a feature that is coming to the new table?

Thanks

Jeremy

Hi @jclutterbuck Dynamic columns should be coming soon -- our team is actively working on this feature and doing some testing before it is ready to launch

2 Likes

Here is my another use case, I can't use mouse to scroll it, because when I hover it, it will disappear. Also I can't set the width and height of cell tooltip
image
(I use markdown table in tooltip.)

Also I have a new feature request - Collapsible table.
Pls consider this is possible. thanks.

3 Likes

Cell tooltips set to overflow mode enable you to display long content within a Table component without compromising performance.

it's in the works :wink:

3 Likes

add + to add new Row
Consider to add + new Row icon back to new Table? In the new table, to achieve this we need to change to data source of table, also need to use a templestate and a script.

add back json column type(column format)
the edited value should be resolved to json in changesetArray instead of json str in legacy table.

    such as changesetArray:[{"actualVolume_cm": { "length": 60, "width": 50, "height": 35 }}]
instead of changesetArray:[{"actualVolume_cm": \"{ "length": 60, "width": 50, "height": 35 }\"}]

consider to add json in column type as in legacy table?

My use case is read the json type from database field. But I can't edit it on the column now. Now my workaround is complex, to create a modal, and hide it, put a jsoneditor component in it, change it datasource to table.selectedRow.someKeyPointToJson.

I think the field of json in database is so common now, so could you pls consider add jsoneditor to column type in new table component?

image

image