New Table Toolbar

[BurkeWise]

Does the new table have a toolbar? I my users are comfortable with that filtering and also like to download data. I really need the download data.

Also, with the new use of the text input filter system, how do you select multiple rows. For example, I want all rows of product x and product y, but not product z.

[Alexi]

@BurkeWise we're actively working on the new toolbar! We're hoping to launch it around the end of the month, but until then you can export data from Table by using the exportData API:

Table also exposes some APIs for filtering! I've attached this example app for you to explore:

Filtering Example.json (77.8 KB)

We will be adding more ergonomic and accessible options for filtering Table soon, but it is possible to implement today.

[BurkeWise]

Thank you. This makes sense.

[yiga2]

@Alexi very useful app and the only place where I have learned that new Table setFilter takes columnId key vs columnName in legacy... How would one know besides you guys ?? I understand new Table is being worked on but at least existing features should be sufficiently documented to be used w/o guessing.

Side question: your app doesn't leverage the "global" fuzzy search property of the new Table (be binding to search input). Any particular reason ?

[Kabirdas]

Hey @yiga2!

The dev team is moving toward a more complete migration path for folks, you can see some documentation about how the two tables relate here. As mentioned in this post though, there's still a ways to go.

[pyee]

Thanks, @Alexi , that helps a bunch.

Is there any documentation on the filterStack filter objects? I was wondering if there's a "between" operator when filtering on date and/or number fields, and how the value property would be treated in that case. Knowing what all the options are would be great. I saw in your example that "equals" uses the symbol instead of being written out - things like that would be great to know.

Thanks!

[Kabirdas]

Hey @pyee!

There isn't a specific between operator but you can combine greaterThan and lessThan operators to create something similar. For instance, this filters for rows created between Jan 1st 2022 and now by combining two filters with the and operator:

table1.setFilterStack({
  filters: [
    { columnId: "createdAt", operator: "lt", value: moment().format() },
    { columnId: "createdAt", operator: "gt", value: moment("1/1/22").format() },
  ],
  operator: "and",
})

Some in-app documentation has recently been added for the .setFilterStack method:

The docs team is aware that there could be more documentation of table filters though and I've bumped that request with them! In the meantime, here's a list of operators you can use for individual filters:

'lessThan'
'lt'
'<'

'lessThanOrEquals'
'lteq'
'<='

'greaterThan'
'gt'
'>'

'greaterThanOrEquals'
'gteq'
'>='

'equals'
'eq'
'='

'doesNotEqual'
'neq'
'!='

'contains'
'includes'

'doesNotContain'
'doesNotInclude'

[Kabirdas]

Hey folks!

Just want to make sure it's flagged here that the new table toolbar has been released

For those who haven't seen it already, you can see more of the recently released table features in this post from the updates page.

[Elliott]

Hi @Kabirdas,

I'm not seeing the Toolbar add-on in self-hosted Retool. Is this not part of the June 15th release? If so, do you know when it will be released?

[Kabirdas]

One more update here the docs now include information about filters in the Build tables section!